需要制表头菜单帮助

Question

我正在使用这个很棒的库Tabulator，一切正常，但我想让我的代码更高效，所以我想创建一个 headerMenu 函数来为表中的每一列设置所需的值。 现在我为每一列使用单独的函数，它工作正常，但每个字段有 8 个例程......

我正在尝试在这样的一个函数中执行此操作：

var headerMenu= [{                            
    label:"Set All in column to ON",
    action:function(e, column){
        var columnField = column.getField();
        var rows = userTable.getRows(); 
        console.log( columnField );             // already prints desired column field f.e. sw4
        userTable.blockRedraw();                                                               
        rows.forEach(function(row){
            row.update({columnField :true});    // nothing happens                                                            
        }); 
        userTable.restoreRedraw();                                                             
    }
},
{
    label:"Set All in column to OFF",
    action:function(e, column){
        var columnField = column.getField();
        var rows = userTable.getRows(); 
        console.log( columnField );
        userTable.blockRedraw();                                                               
        rows.forEach(function(row){
            row.update({columnField :false});                                                            
        }); 
        userTable.restoreRedraw();                                                            
    }
}]
// my table setup
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, headerMenu:headerMenu },
                { title:'SW2', field:'sw2',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW3', field:'sw3',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW4', field:'sw4',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW5', field:'sw5',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW6', field:'sw6',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW7', field:'sw7',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu },
                { title:'SW8', field:'sw8',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false, headerMenu:headerMenu }
            ],
        }
],
 // 

但是即使控制台打印出真实的字段名称，表格中也没有任何反应，没有错误。

但是当我用所需的字段名称更改 columnField 时：

...
row.update({sw1 :false});
...

函数工作正常，所有这些字段都可以更改。

有人可以帮助我做错什么吗？

我还是初学者，我无法自拔……

谢谢！

Answer 1

row.update({columnField : false});

这并没有按照您认为的方式评估变量。实际上，您正在设置一个名为“columnField”的属性，而不是使用 columnField 变量的值。

您需要使用Computed Property Names。像这样将变量包裹在 [括号] 中：

row.update({ [columnField] : false});