加载前处理ajax数据的制表器

如何解决加载前处理ajax数据的制表器

如果可以在加载到 Tabulator library 中的表之前修改表数据，我需要帮助。 我需要将（8 极）DIP 开关的十进制值转换为单独的 8 位并将其加载到表中。 我有这样的 json 格式的数据：

[
{"id":1,"name":"DIP1","value":15},{"id":2,"name":"DIP2","value":75}
]

我想将数据格式化为此（十进制值 15）：

[{"id":1,"sw1":0,"sw2":0,"sw3":0,"sw4":0,"sw5":1,"sw6":1,"sw7":1,"sw8":1,}]

到这张桌子：

columns:[
        { title:'ID',field:'id',width:50 },{ title:'DIP NAME',field:'name',headerFilter:'input',editor:'input',hozAlign:'center' },{ title:' DIP SWITCHES',hozAlign:'center',columns:[               
                { title:'SW1',field:'sw1',width:30,editor:true,formatter:'tickCross',headerVertical:true,headerFilter:'tickCross',headerFilterParams:{"tristate":true},headerSort:false },{ title:'SW2',field:'sw2',{ title:'SW3',field:'sw3',{ title:'SW4',field:'sw4',{ title:'SW5',field:'sw5',{ title:'SW6',field:'sw6',{ title:'SW7',field:'sw7',{ title:'SW8',field:'sw8',],}
],

我知道如何提取 c 中的每一位：

 var sw1 = bitRead( value,7 );
 var sw2 = bitRead( value,6 );
 var sw3 = bitRead( value,5 );
 var sw4 = bitRead( value,4 );
 var sw5 = bitRead( value,3 );
 var sw6 = bitRead( value,2 );
 var sw7 = bitRead( value,1 );
 var sw8 = bitRead( value,0 );

但我不知道如何在使用 ajax 将数据加载到表中时执行此操作。

有人可以帮忙吗？

我是新手，无法自拔。

谢谢！

解决方法

您可以将开关扩展到单独的位值，如下所示：

// You may need to parse (JSON.parse()) if serialized
let data = [{
    "id": 1,"name": "DIP1","value": 15
  },{
    "id": 2,"name": "DIP2","value": 75
  }
]

let transformed = data.map(({
  value,...data
},i) => {
  // toString(2) transforms a number to a binary string
  // PadStarts adds the zeros on left if neccessary
  // split converts the string to array of 8 bits
  let toBits = value.toString(2).padStart(8,"0").split("")
  // this will create an object of eight bits with according values
    .reduce((accum,bit,i) => {
      accum["sw" + (i + 1)] = Number(bit)
      return accum
    },{})
  
  // spread operator will flatten the object
  return {
    id: i + 1,...data,...toBits,}
})

console.log(transformed)

然后，您应该可以像这样使用内容 transformed 作为表格数据（参见 http://tabulator.info/docs/4.9/data）：

var table = new Tabulator("#example-table",{
  // ...other options
          ajaxResponse: function (url,params,response) {
          //url - the URL of the request
          //params - the parameters passed with the request
          //response - the JSON object returned in the body of the response.
          
          // `response` might be rather be `response.data` or such...
          let transformed = response.map(({ value,...data }) => {
            let toBits = value
              .toString(2)
              .padStart(8,"0")
              .split("")
              .reduce((accum,i) => {
                accum["sw" + (i + 1)] = Number(bit);
                return accum;
              },{});

            return {
              ...data,};
          });
          return transformed;
        },});

      table.setData(<YOUR API URL>); // Change to your API endpoint