// 必须引入的一些文件
<link href="js/kendoui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="js/kendoui/styles/kendo.silver.min.css" rel="stylesheet" />
<script src="js/kendoui/js/jquery.min.js"></script>
<script src="js/kendoui/js/kendo.all.min.js"></script>
$('#gridTable').kendoGrid({
dataSource: {
pageSize: 10,
serverPaging: true,
transport: {
read: this.bind(function (options) {
if (!options.data.pageSize) {
options.data.page = 1;
}
var PageSize = options.data.pageSize === undefined ? total : options.data.pageSize;
var PageIndex = options.data.page || 1;
$.ajax({
url: this.api.getTodoFilesList,
type: 'get',
data: {
userName: this.userId,
title: '',
fileType: '',
status: '',
taskTime: '',
bigType: '',
pageIndex: PageIndex,
pageSize: PageSize
},
success: function(res) {
options.success(res); // 把求情到的参数放到表格中
}
}));
})
},
schema: {
model: {
id: 'linkID'
},
total: function (data) {
total = data.total;
return data.total;
},
data: function (data) {
return data.list;
}
}
},
pageable: {
pageSizes: true, // 是否显示跳转页
buttonCount: 5 // 默认显示几页
},
persistSelection: true,
height: '500px', // 列表的高度
change: _this.bind(function () {
_this.onChange1();
}),
// 表头
columns: [
{
40,
selectable: true
},
{
title: '序号',
80,
field: 'index'
}, {
title: '文件标题',
field: 'title',
200
}, {
title: '文件类型',
field: 'fileType',
200
}, {
title: '送达时间',
field: 'taskTime',
160,
template: function (data) {
return moment(data.taskTime).format('YYYY-MM-DD hh:mm:ss');
},
filterable: false,
encoded: true
},
{
command: '',
title: '操作',
filterable: false,
encoded: true,
120,
template: function (dataItem) {
var html = `<a href="#" class="text-primary" data-name="gridView" data-value="${dataItem.status}" title="${dataItem.status}" >${dataItem.status}</a>`;
return html;
}
}
],
// 回显数据用
dataBound: function (e) {
var _this = this;
var gridData = $('#gridTable').data('kendoGrid');
var bbb = {};
把老数据循环遍历放到 空对象中 也可以直接放到 gridData._selectedIds 中
_this.gouxuanshuju.forEach(item => {
bbb[item] = true;
});
gridData._selectedIds = bbb; // 把回显的数据放到 gridData._selectedIds中if ($('#saveBacklog').html()) {
selectedLinID.find(function (item) {
var aaa = e.sender._data.findIndex(function (data) {
return data.linkID === item;
});
if (aaa !== -1) {
gridData.tbody.find('tr').eq(aaa).find('input[type=checkbox]').prop('checked', true);
gridData.tbody.find('tr').eq(aaa).addClass('k-state-selected');
}
});
}
}
},
editor: function (container, options) {
console.log(container, options);
},
sortable: true // 是否排序
});
// 全选
selectAll: function () {
// 获取所有数据
var searchData = $('[data-value=searchData]').val();
var ccc = $('#gridTable').data('kendoGrid')._selectedIds;
var _this = this;
Commontool.httpJson({
url: this.api.getTodoFilesList,
type: 'get',
data: {
userName: this.userId,
title: searchData,
fileType: '',
status: '',
taskTime: '',
bigType: '',
pageIndex: 1,
pageSize: 100000
}
}, this.bind(function (err, res) {
if (!err) {
res.list.forEach(function (item) {
_this.gouxuanshuju.push(item.linkID);
ccc[item.linkID] = true;
});
var gridData = $('#gridTable').data('kendoGrid');
$.each(gridData.tbody.find('tr'), function () {
$(this).find('input[type=checkbox]').prop('checked', true); // 此处设置每行的checkbox选中，必须用prop方法
$(this).addClass('k-state-selected');
});
}
}));
},
// 确定已选
makeSelected: function () {
this.gouxuanshuju = []; // 这里一定要清空 不然老数据就会还在
var ccc = $('#gridTable').data('kendoGrid')._selectedIds;
if (JSON.stringify(ccc) !== '{}') {
for (const key in ccc) {
this.gouxuanshuju.push(key);
}
} else {
this.gouxuanshuju = [];
}
Commontool.httpJson({
url: this.api.getTodoFilesList,
type: 'get',
data: {
// 获取搜索框的内容
title: $('[data-value=searchData]').val(),
fileType: '',
status: '',
taskTime: '',
userName: this.userId,
pageIndex: 1,
bigType: '',
pageSize: 10000
}
}, this.bind(function (err, res) {
if (!err) {
for (let i = 0; i < res.list.length; i++) {
res.list[i].index = i + 1;
}
var html = '';
if (!this.element) {
res.list.forEach(item => {
if (this.gouxuanshuju.indexOf(item.linkID) > -1) {
html = html + `<span data-id="${item.linkID}"><i class="iconfont icon-cms-close-circle-fill position-absolute cloest" data-name="removeElement"></i>${item.title}</span>`;
}
});
$('#saveBacklog').html(html);
} else {
res.list.forEach(item => {
if (this.gouxuanshuju.indexOf(item.linkID) > -1) {
html = html + `<span data-id="${item.linkID}">${item.title}</span>`;
}
});
$('#modalSaveBacklog').html(html);
}
}
}));
$('[data-value=searchData]').val('');
$('#myModalToDo').modal('hide');
},
// 清除勾选
removeAll: function () {
this.gridData = $('#gridTable').data('kendoGrid');
this.gridData.clearSelection();
this.gridData._selectedIds = {};
},
https://blog.csdn.net/qq_35611143/article/details/81485551