加载前制表符处理 ajax 数据

Question

如果可以在 Tabulator library 中加载到 table 之前修改 table 数据，我需要帮助。我需要将（8极）DIP开关的十进制值转换为单独的8位并将其加载到table。我有这样的 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,}]

到这个table:

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.

将数据加载到 table 时执行此操作

有人可以帮忙吗？

我是新手，我不能自拔

谢谢！

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 作为 table 数据（参见 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

加载前制表符处理 ajax 数据

Tabulator processing ajax data before load

javascript

tabulator