Kendo ui 使用总结----Kendo UI Grid

比眉伴天荒 2022-05-20 05:37 231阅读 0赞

代码中理解比较好。

## 代码 ##

数据获取：
       var melDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "post",
                    url: '/controller/method',
                    dataType: "json",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation == "read") {
                        //拼接参数
                        var parameter = {
                            page: options.page,
                            pageSize: options.pageSize,
                            searchDay: $("#weatherDate").val(),
                            eAirportCode: $("#txtAirportName").data("kendoComboBox").value()
                        return kendo.stringify(parameter);
                    }
                }
            },
            // 设置页面大小
            pageSize: 15,
            schema: {
            // 回调方法
                data: function (d) {
                    return d.Data;
                },
                total: function (d) {
                    return d.Total;
                }
            },
            serverPaging: true
        });
    
    
     $("#grid").kendoGrid({
                dataSource: melDataSource,
                sortable: true,
                reorderable: true,
                //分组
                //groupable: true,
                //可调节页面大小
                //resizable: true,
                //过滤
                //filterable: true,
                // 列按钮开关
                //columnMenu: true,
                // 滚动条
                scrollable: true,
                // 分页设置
                pageable: {
                    // 页面大小选项
                    pageSizes: [15, 25, 35],
                    // 页数按钮显示个数
                    buttonCount: 5,
                    // 显示信息
                    messages: {
                        display: "显示{0}-{1}条，共{2}条",
                        empty: "没有数据",
                        page: "页",
                        of: "/ {0}",
                        itemsPerPage: "条/页",
                        first: "第一页",
                        previous: "前一页",
                        next: "下一页",
                        last: "最后一页",
                        refresh: "刷新"
                    }
                },
                           columns: [
               {
                   field: "Code",
                   title: "编号",
                   width: "100px",
                   //冻结列 太低版本不支持
                   locked: true,
                   //locked: true
                   lockable: false,
               },
               {
                   field: "Name",
                   title: "名称",
                   width: "120px",
                   locked: true,
                   lockable: false,
               },
                {
                    field: "element",
                    title: "维度",
                    width: "120px",
                    locked: true,
                    lockable: false,
                },
                 {
                     field: "Hour01",
                     title: "1H",
                     width: "120px",
                     // 设置样式
                     attributes: {
                     // 可以加类名
                     "class":"classnmae"
                         style: "color:black;background-color: #if(Hour_01==null) {#  #}else if(Hour_01==0.1) {# rgb(146, 208, 80) #}else if(Hour_01==0.2){# rgb(0, 176, 80) #}else if(Hour_01==1.1){# rgb(255, 255, 0) #}else if(Hour_01==1.2){# rgb(255, 192, 0) #}else if(Hour_01==1.3){# rgb(102, 153, 255) #}else if(Hour_01==1.4){# rgb(209, 160, 199) #}else if(Hour_01==2.1){# rgb(255, 0, 0) #}else if(Hour_01==2.2){# rgb(192, 0, 0) #}else if(Hour_01==2.3){# rgb(122, 48, 160) #}else if(Hour_01.indexOf('<<') >= 0){# rgb(255, 235, 156) #}else if(Hour_01.indexOf('>') >= 0){# rgb(198,239,206) #}else if(Hour_01.indexOf('<500') >= 0||Hour_01.indexOf('<30') >= 0){# rgb(255,199,206) #}#"
                     },
                     // 模板
                     template: function (d) {
                     //逻辑处理
                      var content = "";
                      return content;
                     }
                 }],
                // 事件 
                dataBound: function () {
                // 实现功能：行合并
                    $('#grid>.k-grid-content-locked>table').each(function (index, item) {
                        var dimension_col = 1;
                        var dimension_col2 = 2;
                        // First, scan first row of headers for the "Dimensions" column.
                        $('#grid>.k-grid-header>.k-grid-header-locked>table').find('th').each(function () {
                            if ($(this).text() == '列名') {
                                // first_instance holds the first instance of identical td
                                var first_instance = null;
                                var rowspan = 0;
                                $(item).find('tr').each(function () {
                                    // find the td of the correct column (determined by the colTitle)
                                    var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
    
                                    if (first_instance == null) {
                                        first_instance = dimension_td;
                                        rowspan = 0;
                                        //$(first_instance).css('border-top', 'solid 1px #000000');
                                    } else if (dimension_td.text() == first_instance.text()) {
                                        // if current td is identical to the previous
                                        // then remove the current td
                                        //rowspan++;
                                        $(item).find('tr').each(function () {
                                            if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
                                                rowspan++;
                                            }
                                        });
    
                                        dimension_td.hide();
                                        first_instance.attr('rowspan', rowspan);
                                        rowspan = 0;
                                        // increment the rowspan attribute of the first instance
                                        //$(item).find('tr').each(function () {
                                        //    if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
                                        //        rowspan++;
                                        //    }
                                        //});
    
                                        //first_instance.attr('rowspan',  first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
    
                                        //first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                                    } else {
                                        rowspan = 0;
                                        // this cell is different from the last
                                        first_instance = dimension_td;
                                        $(first_instance).css('border-top', 'solid 1px #000000');
                                    }
                                });
                                return;
                            }
    
                            if ($(this).text() == '列名') {
                                // first_instance holds the first instance of identical td
                                var first_instance = null;
                                var rowspan = 0;
                                $(item).find('tr').each(function () {
                                    // find the td of the correct column (determined by the colTitle)
                                    var dimension_td = $(this).find('td:nth-child(' + dimension_col2 + ')');
    
                                    if (first_instance == null) {
                                        first_instance = dimension_td;
                                        rowspan = 0;
                                        //$(first_instance).css('border-top', 'solid 1px #000000');
                                    } else if (dimension_td.text() == first_instance.text()) {
                                        // if current td is identical to the previous
                                        // then remove the current td
                                        //rowspan++;
                                        $(item).find('tr').each(function () {
                                            if ($(this).find('td:nth-child(' + dimension_col2 + ')').text() == first_instance.text()) {
                                                rowspan++;
                                            }
                                        });
    
                                        dimension_td.hide();
                                        first_instance.attr('rowspan', rowspan);
                                        rowspan = 0;
                                        // increment the rowspan attribute of the first instance
                                        //$(item).find('tr').each(function () {
                                        //    if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
                                        //        rowspan++;
                                        //    }
                                        //});
    
                                        //first_instance.attr('rowspan',  first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
    
                                        //first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                                    } else {
                                        rowspan = 0;
                                        // this cell is different from the last
                                        first_instance = dimension_td;
                                        $(first_instance).css('border-top', 'solid 1px #000000');
                                    }
                                });
                                return;
                            }
                            dimension_col++;
                            dimension_col2++;
                        });
    
                });
            }
        });