普通用法
$("#grid").html(''); // 如果不清空 会出现多次请求接口的问题 $('#grid').kendoGrid({ columns: [ { title: '序号', // 表头名称 template: function (data) { return num++; }, width: 80, filterable: false, encoded: true }, ], sortable: true, filterable: true, dataSource: { data: data, // 表格数据 pageSize: 10 // 显示条数 } }
后端传参
$("#grid").html(''); // 如果不清空 会出现多次请求接口的问题 $("#grid").kendoGrid({ dataSource: { pageSize: 10, // 必须放到 transport 前面 serverPaging: true, transport: { read: function (options) { if (!options.data.pageSize) { options.data.page = 1; } var PageSize = options.data.pageSize === undefined ? -1 : options.data.pageSize; var PageIndex = options.data.page || 1; $.ajax({ url: '请求的地址', type: 'GET', data: { title: '', fileType: '', status: '', taskTime: '', pageIndex: PageIndex, pageSize: PageSize, }, contentType: "application/json", dataType: "json", async: !0, cache: !1, success: function (results, status, n) { results.list.forEach(function (item, index) { item.sortNumber = index - 0 + 1 + ( PageIndex - 1) * PageSize; }); options.success(results); // 成功后的数据放到这个 }, error: function (e, t, n) { alert('error') } }); } }, schema: { model: { id: 'linkID' }, data: function (d) { return d.list; }, total: function (d) { // counte = d.total; return d.total; } }, }, pageable: { pageSizes: true, buttonCount: 5 }, persistSelection: true, change: onChange, height: '500px', columns: [{ selectable: true, width: "50px" }, { field: 'sortNumber', title: '序号', width: 80 }, { field: "title", title: "标题" }, { field: "fileType", title: "文件类型" }, { field: "linkID", title: "linkID" }, { field: "taskTime", title: "时间" }, { field: "", title: "操作", template: function (dataItem) { return '<span class="text-primary" style="cursor:pointer" data-id="' + dataItem.linkID + '">详情</span>'; } } ] });
全部勾选
function quanxuan() { $.ajax({ url: "https://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp", type: 'get', success: function (data) { // 首先要勾选当前页 不然 存在无法勾选当前页面选中样式的问题 $.each(grid.tbody.find('tr'), function () { $(this).find('input[type=checkbox]').prop('checked', true); $(this).addClass('k-state-selected'); }) // 把请求的参数的id 循环放到 grid._selectedIds中 data.forEach(item => { grid._selectedIds[item.ProductID] = true }); }, error: function (err) { alert(err) } }) }
注意: 这个ajax 一定要把所有的数据到请求过来
清除勾选
var grid = $('#gridTable').data('kendoGrid'); grid.clearSelection(); // 清除当前页的选中行 grid._selectedIds = {}; // 清除所有的选中行
注意: 在实际应用中，会发现上面清除选中项的“grid._selectedIds = {}”，存在无法清除当前页面选中样式的问题，所以，我配合使用了grid.clearSelection()。
查看勾选
//方法一： var grid = $("#grid").data("kendoGrid"); grid.select(); //输出选中行的数据（当前页） //方法二： var grid = $("#grid").data("kendoGrid"); //输出选中行的关键字（支持分页） 注： 要求这个grid必须设置schema的model，输出的选中项数据就是model设定的值，如mode设置的是id，那么输出的值就是选中行的id值。 console.log(grid.selectedKeyNames());
指定某一行选中
//方法1： var grid = $("#grid").data("kendoGrid"); grid.select("tr:eq(0)"); //方法2： var grid = $("#grid").data("kendoGrid"); var uid = grid.dataSource.at(0).uid; grid.select("tr[data-uid='" + uid + "']");
当前页全部勾选
方法一:
var gridData = $('#gridTable').data('kendoGrid'); var items = gridData.items(); $.each(items, function (i, item) { gridData.select(item); });
方法二:
$.each(gridData.tbody.find('tr'), function () { $(this).find('input[type=checkbox]').prop('checked', true); // 此处设置每行的checkbox选中，必须用prop方法 $(this).addClass('k-state-selected'); });
完整代码
// 勾选事件 onChange1: function (e) { var _this = this; var arr = $('#gridTable').data('kendoGrid').selectedKeyNames(); arr.forEach(function (item) { if (_this.gouxuanshuju.indexOf(item) === -1) { _this.gouxuanshuju.push(item); } }); }, $('#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: '请求的地址', type: 'get', data: { userName: this.userId, title: '', fileType: '', status: '', taskTime: '', bigType: '', pageIndex: PageIndex, pageSize: PageSize } }, this.bind(function (error, result) { if (!error) { for (let i = 0; i < result.list.length; i++) { result.list[i].index = i + 1; } options.success(result); } else { alert({ type: 'error', str: result.responseJSON ? result.responseJSON.message : result.responseText }); } })); }) }, schema: { model: { id: 'id' }, total: function (data) { total = data.total; return data.total; }, data: function (data) { return data.list; } } }, pageable: { pageSizes: true, // 是否显示跳转页 buttonCount: 5 // 默认显示几页 }, persistSelection: true, change: _this.bind(function () { _this.onChange1(); }), columns: [ { width: 40, selectable: true }, { title: '序号', width: 80, field: 'index' }, { title: '文件标题', field: 'title', width: 200 }, { title: '文件类型', field: 'fileType', width: 200 }, { title: '送达时间', field: 'taskTime', width: 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, width: 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) { // 数据回显 if ($('#saveBacklog').html()) { var gridData = $('#gridTable').data('kendoGrid'); 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'); } }); } }, sortable: true // 是否排序 });
表格高度沾满整个页面
// element 元素
tableHeigth: function (element) { var dataArea = element.find('.k-grid-content'); var bottomArea = element.find('.k-grid-pager'); var newHeight = $(document.body).height() - element.offset().top; var diff = element.innerHeight() - dataArea.innerHeight(); element.height(newHeight - bottomArea.innerHeight()); dataArea.height(newHeight - diff - bottomArea.innerHeight()); },
