W2UI网格:选中复选框不保存;

W2UI grid: Checked Checkboxes not saving;

本文关键字：保存 复选框 网格 W2UI      更新时间：2023-09-26

我在工具栏上引入了两个按钮，一个"CheckAll"，另一个"UncheckAll"，它们将对网格中的特定列产生影响，比如"Status"（带复选框）。为此，我编写了两个Javascript函数。

function check_all(the_unchecked){
        for(i=0; i<the_unchecked.length; i++){
        the_unchecked[i].checked = true;
    }
}
function uncheck_all(the_checked){
    for(i=0; i<the_checked.length; i++){
        the_checked[i].checked = false;
    }

}受影响的字段：

{field: 'status', caption: 'Status', size: '50px', searchable: 'text', resizable: true, render: function (records) {
                    if (records.status === true) {
                        return   '<span style="background-color:#a3e9a4; width:100%;display:block;"> <input class="enable_check" type="checkbox" name="enable_check[]" value="true" checked="true"></span>';
                    } else {
                        return  '<span style="background-color:#f69988; width:100%;display:block;"> <input class="enable_check2" name="enable_check[]" value="false" type="checkbox"></span>';
                    }
                }, style: 'text-align:center'},

问题是，当我单击"保存"按钮时，选中的按钮既不会发送/保存到数据库。

我想要的是，当单击CheckAll时，它会选中提取行的Status列中的所有复选框，然后"保存"将所有更改保留到数据库中。

我认为最好的方法是将checkAll和uncheckAll附加到网格本身。然后它更容易使用。我还修改了render函数，将状态保存回网格记录。所以，这就是你可以添加的方式：

{ field: 'status', caption: 'Status', size: '50px', 
    render: function (record) {
        return '<div style="text-align: center">'+
           '    <input type="checkbox" ' + (record.status ? 'checked' : '') + 
           '        onclick="var obj = w2ui['''+ this.name + ''']; obj.get('+ record.recid +').status = this.checked;">'+
           '</div>';
    }
}

然后我将这些功能添加到网格中

checkAll: function () {
    this.set({ status: true });
},
uncheckAll: function () {
    this.set({ status: false }); 
},
getAllChecked: function () {
    return this.find({ status: true });
}

可以在定义轴网的列时添加。之后，你可以这样称呼它：

w2ui[grid_name].checkAll();
// OR
w2ui[grid_name].uncheckAll();

但是，您需要获取所有记录ID才能将其提交到服务器，请使用getAllChecked。转念一想，我认为你不需要定义这些函数，因为它们很短。只要在需要的时候直接打电话给他们。

注意：您可能会考虑使用grid.show.selectColumn=true。看见http://w2ui.com/web/docs/w2grid.show

相关文章：