制表符 headerMenu 需要帮助

Question

我正在使用这个很棒的库 Tabulator，一切正常，但我想让我的代码更有效率，所以我想制作一个 headerMenu 函数来为 table 中的每一列设置所需的值. 现在我为每一列使用单独的函数并且它工作正常但是每个字段有 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 }
            ],
        }
],
 //

但在 table 中什么也没有发生，即使控制台打印真实的字段名称，也没有错误。

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

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

功能正常，所有这些字段都已更改。

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

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

谢谢！

Answer 1

row.update({columnField : false});

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

您需要使用 Computed Property Names。将您的变量包裹在 [brackets] 中，如下所示：

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

制表符 headerMenu 需要帮助

Tabulator headerMenu help needed

javascript

tabulator