KendoUI之Grid的问题详解

KendoUI之Grid的问题详解

1.kendoLov带出的值出现 null和undefined

如果数据库中数据为空，查询出来，界面上会显示null

点击新建按钮可能会出现undefined

这是因为template的问题，这样写会出错。

“ !=null ”的时候 将“ || ” 换成“ && ”

或者“ ==null ”的时候 改成“ || ”

然后就没问题了。

具体代码如下：

{
    field: "opeSco",
    title: "<@spring.message '所属经营范围'/>",
    width: 150,
    attributes: {style: "text-align:center"},
    headerAttributes: {
        "class": "table-header-cell",
         style: "text-align: center"
    },

    template:function(item){
        if(item.meaning==null || item.meaning==""){
            return "";
        }
        return item.meaning;
    },

    editor: function (container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container).kendoLov({
            code: "CUS__MANSCOPE_CATEGORYCODE",
            contextPath: '${base.contextPath}',
            locale: '${base.locale}',
            textField: 'meaning',
            select: function (e) {
                options.model.set('opeSco',e.item.value);
                options.model.set('meaning',e.item.meaning);
            },
            query:function(e){
                if (options.model.medType != null) {
                    e.param['propertyCode'] = options.model.medType;
                }
            },
            clearButton:true
            });
    }
},

​```

2.Grid不可编辑时，设置行背景颜色

tr[data-uid=dataItem.uid] 可以定位Grid的某一行。

//控制背景颜色
{
       hidden: true,
       template: function (dataItem) {
              var uid = dataItem.uid;
              if (dataItem.statusCode == "SUBMITTED") {
                    setTimeout(function () {
                         $("tr[data-uid=" + uid + "]").css("background", "#EBEBEB");
                     }, 0);
               }

         }
},

3.设置Grid某列的Title样式和列内数据样式

//列标题居中
headerAttributes: {
    "class": "table-header-cell",
    style: "text-align: center;"
},

//列数据居左
attributes: {style: "text-align:left;"}, 

//列数据过长时，不换行，简略为 " ... "
attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"},

4.修改某个字段之后 点击保存按钮没有任何效果

原因： __status = ’ ‘

HAP框架判断界面是新增还是修改或者是删除，都是通过“ __status ”。如果没有值，controller是不会操作数据的。

新建： __status = ‘add ‘

更新： __status = ‘update ‘

删除： __status = ‘delete ‘

如果“ __status ”实在是没有值，可以手动设置值。 viewModel.model.set(’ __status’, ‘add’);

5.检查Grid行中是否还有数据没有保存

使用dataSource.hasChanges() 方法。

if(!dataSource1.hasChanges()){
    kendo.ui.showInfoDialog({
        message: '还有未保存的数据，请先保存!'
    });
}else{
     window.top.closeTab("GMI_EDIT"+basicId);
}

6.检查Grid选中的数据是否有脏数据

删除数据时，需要判断选中的数据是否是脏数据（即未保存的数据）

$(“#Grid”).data(“kendoGrid”).selectedDataItems()[i].dirty

//删除数据
function deleteData() {
                var grid = $("#Grid").data("kendoGrid");
                var checked = grid.selectedDataItems(); //获得选中的数据行
                if (checked.length == 0) {
                    kendo.ui.showInfoDialog({
                        message: "请至少选择一行"
                    })
                } else {
                    var dirtyArr = [];
                    var statusCodeArr = [];
                    for (var i = 0; i < checked.length; i++) {
                        dirtyArr.push(checked[i].dirty || checked[i].organizationId == "");
                        statusCodeArr.push(checked[i].statusCode);
                    }
                    if (dirtyArr.indexOf(true) != -1) {
                        //存在未保存的数据
                        kendo.ui.showInfoDialog({
                            message: '请先保存该数据'
                        });
                    } else if (statusCodeArr.indexOf("ALTER") != -1 || statusCodeArr.indexOf("REJECTED") != -1 || statusCodeArr.indexOf("APPROVED") != -1 || statusCodeArr.indexOf("SUBMITTED") != -1 || statusCodeArr.indexOf("REVOKED") != -1) {
                        //存在非新建状态的数据
                        kendo.ui.showInfoDialog({
                            message: '非新建状态不能删除'
                        });
                    } else {
                        Hap.deleteGridSelection({
                            grid: $('#Grid')
                        });
                    }
                }
            }

7.Grid保存之后自动刷新数据，加载数据源

$(‘#grid1’).data(‘kendoGrid’).dataSource.page(1);

或者

$(‘#grid’).data(‘kendoGrid’).dataSource.read();

saveFunction:function () {
    $('#grid1').data('kendoGrid').saveChanges().done(function(e){
        if(e.response.success){
            viewModel.set("model.statusCode","ALTER");
            $("#submit-btn").removeAttr("disabled").on("click",function () {
                viewModel.submitData();
            });
            $('#grid1').data('kendoGrid').dataSource.page(1); //刷新数据
        }
    });
},

8.Input 回车之后可以查询

/* 回车键绑定查询按钮 */
$('#query-form input').keydown(function (e) {
     if (e.keyCode == 13) {
          e.target.blur();
          viewModel.queryResource(e);
      }
});      

9.锁住grid的前两列

locked:true

{
field:'ruleCode',
title: '<@spring.message "gxpvalidrule.rulecode"/>',
width:'100px',
locked:true //锁住前两列
},

10.设置grid列可以拖动

reorderable:true,

纠错：

resizable: true,
scrollable: true,

11.Tooltip 移动到列上会显示所有数据内容

当行数据过长，超出的数据变为“ … ” 。鼠标移动到单元格上，会把行中的所有数据呈现出来。

有以下两种方式：

1）比较丑的一种方法

$("#Grid").kendoTooltip({
        show: function(e){
            if(this.content.text().length > 20){
                this.content.parent().css("visibility", "visible");
            }
        },
        hide:function(e){
            this.content.parent().css("visibility", "hidden");
        },
        filter: "td:nth-child(10)", //this filter selects the first column cells
        position: "center",
        content: function(e){
            var dataItem = $("#Grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var content = dataItem.errorMsg;
            return content;
        }
    }).data("kendoTooltip");

2）相对好看点的方法

a. 首先设置样式

<!--设置tooltip的样式-->
<style>
    div[role=tooltip].k-tooltip{
        padding: 2px;
        background: #5c9acf;
    }
    .k-tooltip-content{
        padding: 4px;
        text-align: left;
        background: #fff;
        color: #666;
    }
    .k-callout {
        border-bottom-color: #5c9acf;
    }
</style>

b.设置数据显示的样式

//数据太长不换行，移动到上边的时候显示框
attributes:{style: "white-space:nowrap;text-overflow:ellipsis;"},

c.添加Tooltip

//add tooltip
$("#Grid").kendoTooltip({
    show: function(e){
        if($.trim(this.content.text()) !=""){
            $('[role="tooltip"]').css("visibility", "visible");
        }
    },
    hide: function(){
        $('[role="tooltip"]').css("visibility", "hidden");
    },
    filter: "td:nth-child(n+3)",
    content: function(e){
        var element = e.target[0];
        if(element.offsetWidth < element.scrollWidth){
            var text = $(e.target).text();
            return '<div style="min-width:100px;max-width: 1000px;">' + text + '</div>';
        }else{
     $('[role="tooltip"]').css("visibility", "hidden");//解决鼠标一开始放在上面出现空模块
            return "";
        }
    }
}).data("kendoTooltip");

备注：使用Tooltip会出现一个问题，如果行上出现复选框，复选框很难选中。

解决方法：把复选框放到最左或者最右

最左，修改n+3中的“ 3 ” ,以达到想要的效果

最右，过滤掉最后一列：filter: “td:nth-child(n+3) :not-last-child”,

12.LOV不可编辑(比较原始的方式)

13.控制Input、LOV、日期框、数字框、多选框、Grid不可编辑且变灰

$("#templateName").attr("readonly",true).css("background", "#EEEEEE");
$('#end-date').attr('disabled',true).data('kendoDatePicker').enable(false);
$('#qualifyType').attr('disabled',true).data('kendoLov').enable(false);
$('#warningLeadTime').attr('disabled',true).data('kendoNumericTextBox').enable(false);
$("#enableFlag").data("kendoCheckbox").enable(false);

//设置grid不可编辑
$("#Grid").data("kendoGrid").setOptions({
                        editable: false
                    });
//设置grid自适应界面显示，否则grid中只能看到一条数据
$("#Grid").data("kendoGrid").autoResize();

14.grid—toolbar—-save按钮，加上这个样式就会自动执行grid中的saveFn方法。

15.Grid列开始日期、结束日期限制大小

{
                field: "startDate",
                title: '开始时间',
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes:{style: "white-space:nowrap;text-overflow:ellipsis;"},
                width: 120,
                format: "{0:yyyy-MM-dd}",
                editor: function(container, options) {
                    var end = options.model.endDate;
                    var d;
                    if(end){
                        d=end;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker({
                            format:"yyyy-MM-dd",
                            max:d,
                            change:function(){
                                if(this.value()!=null){
                                    d = this.value();
                                }else{
                                    d= new Date(1900, 0, 1, 22, 0, 0);
                                }
                            }
                        });
                }
            },
                    {
                field: "endDate",
                title: '结束时间',
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes:{style: "white-space:nowrap;text-overflow:ellipsis;"},
                width: 120,
                format: "{0:yyyy-MM-dd}",
                editor: function(container, options) {
                    var start = options.model.startDate;
                    var d;
                    if(start){
                        d=start;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker({
                            format:"yyyy-MM-dd",
                            min:d,
                            change:function(){
                                if(this.value()!=null){
                                    d = this.value();
                                }else{
                                    d= new Date(2099, 0, 1, 22, 0, 0);
                                }
                            }
                        });
                }
            },

16.通过onclick传递参数

传递非字符串时：”+item.basicId+”

传递字符串参数时： \”“+item.candidateRuleCode+”\” 用双引号将参数包围，同时使用转义符。

//传递int  int  string
return "<button class='btn btn-primary' onclick='detail("+item.basicId+","+item.lineId+",\""+item.candidateRuleCode+"\")'>分配明细</button>"

17.点击按钮弹出模态框

1）设置div用于显示模态框

<div id="win1"></div>

2）设置模态框的样式

$("#win1").kendoWindow({
    width: "600px",
    height:"400px",
    title: '<@spring.message "指定人"/>',
    modal:true,
    resizable: true,
    visible:false,
    iframe:true
});

3）模态框指定到某个特定的html页面

var userWin = $("#win1").data("kendoWindow");
userWin.refresh('wfl_config_user.html?basicId='+basicId+'&lineId='+lineId);
if(parent.autoResizeIframe){
    parent.autoResizeIframe('${RequestParameters.functionCode!}', 500, function(){
        userWin.center().open();
    })
}else {
    userWin.center().open();
}

18.Lov带出的字段不可编辑

container.removeClass(‘k-edit-cell’); 删除单元格的编辑类

{
field: "wflName",
title: '工作流名称',
width: 180,
editor: function(container, options){
    container.html(options.model.wflName);
    container.removeClass('k-edit-cell');
}

19.Grid保存之后设置某列不可编辑

editable:function(col,item){
    if(col=="ruleCode"){
        if(this.basicId != "" && this.basicId != null){ //避免新建的时候也不可编辑
            return false;
        }
    }
    return true;
}

20.先加载grid，再设置按钮状态

21.Grid列拖拽、列选择、显示行号

reorderable:true,       //用于列拖拽

columnMenu: true,       //用于列选择

rownumber:true,         //用于显示行号

22.设置grid行填充颜色为红色

        //css样式类
        <style>
            .grid-red{
                background:#FF0000;
            }
        </style>

        dataBound: function (e) {
            //设置字体颜色
            $.each(dataSource.data(), function (i, v) {
                if(v.billAmount < 0) {
                    $('tbody > tr[data-uid="' + v.uid + '"] > td').attr("class", "grid-red");
                }
            })
        },

23.设置grid行字体颜色为红色

        dataBound: function (e) {
            //设置字体颜色
            $.each(dataSource.data(), function (i, v) {
                if(v.billAmount < 0) {
                    $('tbody > tr[data-uid="' + v.uid + '"] > td').css("color","red");
                }
            })
        },

24.禁用button并移除onclick事件

//当查询字段“核对状态”限制为已核对时，将“自动核对”按钮置灰，不可点击
                function disableAutoSettlementBtn(a){
                    if($("#flowStatus").val() == 'CHECKED'){
                        $("#btn_auto_settlement").attr("disabled", "disabled").unbind();
                        $("#btn_auto_settlement").removeAttr("onclick");
                    }else{
                        $("#btn_auto_settlement").removeAttr("disabled").on("click", function () {
                            autoSettlement();
                        });
                    }
                }

25.Grid的toolbar上按钮隐藏

当编辑或者新建grid时，toolbar上按钮显示并且可以点击

toolbar: [{
             template :
             '<span  id="btn_add" class="span-btn-size span-span" data-bind="click:createFunction"><img alt="" src="${base.contextPath}/resources/image/new.png" /><a ><@spring.message "hap.new"/></a></span>' +
             '<span  id="btn_delete" class="span-btn-size span-span" onclick="deleteData()"><img alt="" src="${base.contextPath}/resources/image/delete.png" /><a ><@spring.message "hap.delete"/></a></span>',
         }],

隐藏按钮：

$("#Grid").data("kendoGrid").setOptions({
    toolbar: null
});