Сетка W2UI: флажки не сохранены;

Question

Я ввел две кнопки на панели инструментов, одну "CheckAll", а другую "UncheckAll", они должны воздействовать на определенный столбец, например, "Статус" (с флажками) в сетке. Я написал две функции 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 она проверяла все флажки в столбце "Статус выбранных строк", затем "Сохранить" сохраняет все изменения в базе данных.

Answer 1

Я думаю, что лучшим способом было бы прикрепить checkAll и снять галочку All к самой сетке. Тогда его проще использовать. Я также изменил функцию рендера, чтобы сохранить статус обратно в записи сетки. Итак, вот как вы можете добавить:

{ 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();

Однако вам потребуется получить все идентификаторы записей для отправки их на сервер, для этого используйте getAllChecked. Во-вторых, я не думаю, что вам нужно определять эти функции, так как они такие короткие. Просто звоните им напрямую, когда они вам нужны.

ПРИМЕЧАНИЕ: вы можете рассмотреть использование grid.show.selectColumn = true. См. http://w2ui.com/web/docs/w2grid.show