kendo 表格 示例

// 必须引入的一些文件
<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