kendo 表格 示例

  $(‘#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: [
                    {
                        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) {
                    var gridData = $(‘#gridTable‘).data(‘kendoGrid‘);
                    var bbb = {};
                    _this.gouxuanshuju.forEach(item => {
                        bbb[item] = true;
                    });
                    gridData._selectedIds = bbb;
                    if (!_this.element) {
                        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‘);
                                }
                            });
                        }
                    } else {
                        if ($(‘#modalSaveBacklog‘).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 // 是否排序

            });