由於我們是使用Kendo UI,在Grid呈現時,時常會有全選的需要
在這邊記下全選的程式碼,以便以後要使用時可以直接(複製)
const TemplateSet = {
NoRecords: '<em>查無符合資料!</em>',
CheckAll: "<input type='checkbox' id='header-chb' class='k-checkbox header-checkbox'><label class='k-checkbox-label' for='header-chb'></label>",
};
上方全選按鈕的html template
columns: [
{
headerTemplate: TemplateSet.CheckAll,
template: function (dataItem) {
return `<input type='checkbox' id="${dataItem.FeeID}" class='k-checkbox row-checkbox'>
<label class='k-checkbox-label' for="${dataItem.FeeID}"></label>`;
},
width: "5%"
},
套用在Grid 欄位的物件內 這邊小記(dataItem 是 整個dataSource 的完整每一筆資料,所以可以用dataItem.XXX 來呼叫,或是像json格式呼叫 dataItem["XXX"] )
$grid.data("kendoGrid").table.on("click", ".row-checkbox", selectRow);
定義KendoGrid Click Event 要呼叫的function
function selectRow() {
let checked = this.checked,
row = $(this).closest("tr"),
grid = $grid.data("kendoGrid"),
dataItem = grid.dataItem(row);
self.todoListChkList[dataItem.get('FeeID')] = checked;
if ($('#header-chb').prop('checked')) {
$('#header-chb').prop('checked', false)
}
}
$('#header-chb').change(function (e) {
var checked = $(e.target).prop('checked');
switch (true) {
//全部選取
case checked:
$('.row-checkbox').each(function (idx, item) {
let $target = $(item);
$target.prop('checked', true);
self.todoListChkList[$target.attr('id')] = true;
});
break;
//取消選取
case !checked:
$('.row-checkbox').each(function (idx, item) {
let $target = $(item);
self.todoListChkList[$target.attr('id')] = false;
$target.prop('checked', false);
});
break;
};
});
全選的控制,這邊的做法是先全選,再按一次才會全部取消
所以上面那段Grid 在點擊取消後,也會把全選按鈕取消掉