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

Question

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

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

我想把数据格式化成这个（十进制值 15）：

[{"id":1, "name":"DIP1", "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, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW2', field:'sw2',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW3', field:'sw3',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW4', field:'sw4',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW5', field:'sw5',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW6', field:'sw6',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW7', field:'sw7',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW8', field:'sw8',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
            ],
        }
],

我知道如何提取 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 将数据加载到表中时执行此操作。

有人可以帮忙吗？

我是新手，无法自拔。

谢谢！

Answer 1

您可以像这样将开关分散到一个单独的位值：

// 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, bit, i) => {
                accum["sw" + (i + 1)] = Number(bit);
                return accum;
              }, {});

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

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