KendoUI之Grid的问题详解

KendoUI之Grid的问题详解
- 1.kendoLov带出的值出现 null和undefined
- 2.Grid不可编辑时，设置行背景颜色
- 3.设置Grid某列的Title样式和列内数据样式
- 4.修改某个字段之后点击保存按钮没有任何效果
- 5.检查Grid行中是否还有数据没有保存
- 6.检查Grid选中的数据是否有脏数据
- 7.Grid保存之后自动刷新数据，加载数据源
- 8.Input 回车之后可以查询
- 9.锁住grid的前两列
- 10.设置grid列可以拖动
  - 纠错：
- 11.Tooltip 移动到列上会显示所有数据内容
  - 1）比较丑的一种方法
  - 2）相对好看点的方法
- 12.LOV不可编辑(比较原始的方式)
- 13.控制Input、LOV、日期框、数字框、多选框、Grid不可编辑且变灰
- 14.grid—toolbar—-save按钮，加上这个样式就会自动执行grid中的saveFn方法。
- 15.Grid列开始日期、结束日期限制大小
- 16.通过onclick传递参数
- 17.点击按钮弹出模态框
  - 1）设置div用于显示模态框
  - 2）设置模态框的样式
  - 3）模态框指定到某个特定的html页面
- 18.Lov带出的字段不可编辑
- 19.Grid保存之后设置某列不可编辑
- 20.先加载grid，再设置按钮状态
- 21.Grid列拖拽、列选择、显示行号
- 22.设置grid行填充颜色为红色
- 23.设置grid行字体颜色为红色
- 24.禁用button并移除onclick事件
- 25.Grid的toolbar上按钮隐藏

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 cellsposition: "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
});