需要Tabulator headerMenu帮助

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});
...

函数运行得很好，所有这些字段都被更改为OK。

有人能帮我解决我做错了什么吗？

我还是个初学者，我情不自禁…

谢谢!

Answer 1

row.update({columnField : false});

这并不是以您认为应该的方式计算变量。实际上，您正在设置一个名为"columnField“的属性，而不是使用columnField变量的值。

您需要使用Computed Property Names。将变量放在括号中，如下所示：

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