Kendo UI Grid 用法详细整理_综合

一. kendo UI grid结构

结构实例

二. kendo UI grid常用属性

1.new kendo.data.DataSource()中常见属性：

2.$("#grid").kendoGrid()中常见属性：

3. kendo UI grid默认方法调用

4. 补充属性

三. kendo UI grid数据校验

1.在dataSource中写校验逻辑

2.有些检验需要在列的editor属性中去做校验

3.单元格原值与新值比较

四. kendo UI grid数据绑定，获取与使用

1.数据交互操作

2. kendo UI grid数据操作

五. kendo UI grid动态列加载

六. kendo UI grid合并行/列/头操作

1.行合并

2.列合并

3.分组合并表头

4.合并表头

5.合并数据行

6.固定列合并行

7.固定列与非固定列同时合并行

七. kendo UI grid鼠标点击事件

八. kendo UI grid内置事件，主要举例几个常用事件，其他做简单介绍

1.change: onChange事件

2.edit:onEdit事件

3.excelExport导出excel事件

4.dataBound:{} 事件

5.dataBinding:{}事件

6.pdfExport事件

7.saveChanges事件

8.save事件

9.beforeEdit事件

10.remove事件

11.其他不常用事件，可自行去了解

九. kendo UI grid colums操作

1.简单输入框类型，通过dataSource去配置

2.日期框

3.下拉框

补充：

4.LOV选择框

5.自定义数字类型输入框

6.表格不可编辑

7.表格必输

十. kendo UI grid 特殊用法补充

1.行操作方法一般写在template:function (e) {}中

2.将方法绑定到viewmodel

3. kendo UI grid实现单元格里按Enter/Tab能跳到下一项

4.进入编辑框，全选内容

5.下拉框:手动输入的写法

6. kendo UI grid选择框勾选

7.tr转换成dataItem

8.查找grid表头并隐藏

9. kendo UI grid列里面的内容过多滚动显示

10.kendoTooltip提示框

11. kendo UI grid编辑更改dataSource值，改变展示内容

12.指定单元格添加标签

13. kendo UI grid全选

14.requestEnd 中的常规操作

15. kendo UI grid获取选中索引

16. kendo UI grid行上下移动

17. kendo UI grid 状态栏添加合计

18. kendo UI grid 获取指定行指定列值

19. kendo UI grid 改变指定列背景色

20. Kendo UI grid 表格实现滚动条自动滚动&轮播效果

21. kendo UI grid表格分组：groupable: true，默认分组折叠

22. kendo UI grid子集表格：数据行可以展开明细表

一. kendo UI grid结构

要做一个最基本的kendoUI grid表格，第一步需要给它一个用于展示的div标签，将grid的div标签放到页面所想要放置的地方。然后给标签绑定kendoGrid，加载kendoUI的grid样式，如果编辑好了表格样式，绑定后，界面上就能看到对应的表格了。接下来要做的就是给它绑定数据，让里面加载出我们想要的内容，那么在此之前，还需要给它绑定一个数据模型，如：viewModel，此模型主要作用数方便后续对数据的处理。绑定完数据模型后，就可以去建立grid的数据对象dataSource，要展示数据，给dataSource绑定值集合，就能展示数据了，具体操作后续会说，这里只做最简单结构介绍。有数据绑定，那就有dataSource最基本的数据操作，增（create），删（destroy），改（update），查（read）操作，这些属于kendoUI grid的dataSource的内置方法，在transport属性中给绑定对应的后台数据操作调用地址（Controller中的@RequestMapping）即可，其下parameterMap中，可以去区分是查询还是DML操作，其下操作，还可以在操作前添加条件，即给viewModel.model赋条件值。最后要调用其内置方法，将对应的标签成员绑定到前面建立的数据模型上，绑定对应事件，来触发内置方法。

结构实例

<script type="text/javascript">var viewModel = Hap.createGridViewModel("#grid");//HAP绑定数据模型（回车查询也是此处绑定）
</script>
<body>
<div id="page-content"><div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;"><span class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;" data-bind="click:create"><iclass="fa fa-plus-square" style="margin-right:3px;"></i>新增</span><span class="btn btn-success k-grid-save-changes" style="float:left;margin-right:5px;" data-bind="click:save"><iclass="fa fa-save" style="margin-right:3px;"></i>保存</span><span class="btn btn-danger" style="float:left;" data-bind="click:remove"><i class="fa fa-trash-o" style="margin-right:3px;"></i>删除</span></div><script>kendo.bind($('#toolbar-btn'), viewModel);//DML事件绑定</script><div class="pull-right" id="query-form" style="padding-bottom:10px;"><input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;" placeholder='<@spring.message "FlexModelColumn.columnName"/>'data-bind="value:model.columnName" class="k-textbox"><span class="btn btn-primary" style="float:left;width:70px" data-bind="click:query" type="submit">查询</span><span class="btn btn-primary " style="margin-right:5px;" data-bind="click:exportExcel"><iclass="fa fa-file-excel-o" style="margin-right:3px;"></i>导出Excel</span><span class="btn btn-primary " style="margin-right:5px;" data-bind="click:pdfExport"><iclass="fa fa-file-excel-o" style="margin-right:3px;"></i>导出PDFExcel</span><div style="clear:both"></div></div><script>kendo.bind($('#query-form'), viewModel);//查询事件绑定</script><div style="clear:both"><!--表格标签--><div id="Grid"></div></div>
</div><script type="text/javascript">Hap.initEnterQuery('#query-form', viewModel.query);//初始模型查询var BaseUrl = _basePath;dataSource = new kendo.data.DataSource({transport: {read: {url: BaseUrl + "/test/model/column/query",type: "POST",dataType: "json"},update: {url: BaseUrl + "/test/model/column/submit",type: "POST",contentType: "application/json"},destroy: {url: BaseUrl + "/test/model/column/remove",type: "POST",contentType: "application/json"},create: {url: BaseUrl + "/test/model/column/submit",type: "POST",contentType: "application/json"},parameterMap: function (options, type) {if (type !== "read" && options.models) {for(var i=0;i<options.models.length;i++){options.models[i].modelId="${RequestParameters.modelId}";//赋值传入参数}var datas = Hap.prepareSubmitParameter(options, type);return kendo.stringify(datas);} else if (type === "read") {options.model.modelId="-1";//条件赋值return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)}}},batch: true,serverPaging: true,pageSize: 5,schema: {data: 'rows',total: 'total',model: {id: "modelId",fields: {}}}});$("#Grid").kendoGrid({dataSource: dataSource,resizable: true,scrollable: true,navigatable: false,selectable: 'multiple, rowbox',pageable: {pageSizes: [5, 10, 20, 50],refresh: true,buttonCount: 5,},columns: [{field: "columnName",title: '<@spring.message "flexmodelcolumn.columnname"/>',width: 120},{field: "description",title: '<@spring.message "flexmodelcolumn.description"/>',width: 120},],editable: true});
</body>

二. kendo UI grid常用属性

1.new kendo.data.DataSource()中常见属性：

dataSource = new kendo.data.DataSource({transport:{//主要用于dataSource与后台数据交互的方法定义read:{  //读取url:"",  //请求地址type:"POST", //请求方法  POST  GETdataType:"json"  //数据类型    },update:{url: "",type: "POST",contentType: "application/json" //DML操作的数据类型，需要传输对象集合，对应Controller参数对象集合加@RequestBody注解},//更新create:{}, //增加destroy:{},//删除parameterMap: function (options, operation) { //自定义请求参数，可自定义添加操作条件if (type !== "read" && options.models) {//DML操作var datas = Hap.prepareSubmitParameter(options, type)return kendo.stringify(datas);} else if (type === "read") {//查询return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)}}},   batch : true, //可批量操作  autoSync: true,//数据源在和后台进行数据交互的时候是否为同步请求，默认为false异步请求,貌似也可以定义在grid中，待尝试pageSize : 10, //每页显示条数设置  serverPaging : true, //支持分页功能  serverSorting : true,//支持排序功能   serverFiltering : true, //支持查询功能   schema : {   errors: function(response)   {   return response.error; //错误信息显示  },   data : "rows", //定义数据来源  total : "total", //页码总数  model : {   id : "id", //id设置  fields : //对应grid中columns中的成员 {    testName :{   type:"string",//输入框类型，string：字符串文本框；number：数字输入框；date：日期输入框editable : true, //设置为可编辑  validation : {   //单元格数据校验required : true,   //不能为空required: {message: '必输提示'}}   },   testTime:  {   type:"date" //设置字段日期类型   },   testQty:  {   type:"number" //设置字段数字类型  defaultValue: 0, //默认值validation : {   min: 0.01,//最小值step: 0.02,//单元格调整幅度为0.02的倍数custom: function (e) {}//校验触发函数，可在里面做复杂校验或改变值}  },isCompleted: {//checkBox框type: "boolean",checkedValue: "Y",uncheckedValue: "N",defaultValue: "Y"}}   },editable: function (col) {//编辑事件，有值变化就会触发，可以在这里获取值，用于编辑单元格校验if (col == 'testName' || col == 'testTime') {//表名字允许新增不允许修改if (!this.isNew()) {return false;}return true;}return true;}   },group: {  //分组显示field: "",  //分组字段dir: "asc"  //排序方式  asc --- 升序  desc --- 降序},requestEnd: function (e) {//请求结束方法，可在此处理查询结果，结果可直接体现到表格，如自定义索引列if(e.type=="read"){...}},error: function (e) {}//错误处理});

其他属性：
aggregate：Array //聚合计算,可以配置列的聚合计算方法。默认包括平均值average、最大值max、最小值min、总数count、总和值sum
filter：Array | Object //数据源数据进行过滤。可以指定某一列进行数据过滤，通过filed属性指定列，通过operator 属性配置过滤的方法，通过value配置过滤需要的值。operator 的值有，startswith 开始字符，eq等于，neq不等于。
inPlaceSort：Boolean //默认为false。如果设置为true，则在执行排序操作时将对用作数据的原始数组进行排序。此设置只支持本地数据。
offlineStorage：String| Object 是否脱机缓存到sessionStorage，可以设定缓存的key,或者自定义getItem和setItem方法进行数据缓存。

2.$("#grid").kendoGrid()中常见属性：

$('#grid').kendoGrid({dataSource: dataSource,//数据源resizable:true, //大小是否可调，默认为falsescrollable:true, //滚动条，默认为trueallowCopy: true, //默认可复制，false不可复制navigatable: true,//设置为true，则用户可以使用键盘导航来导航小部件。默认情况下，键盘导航被禁用。height: 500px, //定义表格的高低。autoBind: true, //是否启用自动绑定数据，默认为true,设置为false时需要手动调用read()或者page()方法进行数据绑定。groupable:false, //是否显示分组栏，默认为falseselectable:"single row",//选择行方式,默认false禁止选中 row 没有选择框 rowbox 有选择框 ; single 选择单行 multiple ---多行  multiple cell ---允许选择多个单元格  single cell ---单个单元格pageable: {//分页，默认为falsepageSizes: [5, 10, 20, 50],//分页大小设置refresh: true,  //是否显示刷新按钮buttonCount: 5     //显示分页按钮数量//以下不定义则为默认值messages: {     //分页显示信息display: "{0} - {1} 共 {2} 条数据",empty: "没有要显示的数据",page: "Page",of: "of {0}",itemsPerPage: " ",first: "首页",previous: "上一页",next: "下一页",last: "最后一页",refresh: "刷新",      },numeric: true,   //是否显示分页按钮      previousNext: true, //是否显示翻页按钮   info: true，         //是否显示分页信息  },columns: [//列信息{field:"Id",//列名，和对应的数据源绑定，显示对应的数据。title:"编号",//表格头部显示的列文本名locked: true,//固定列，冻结列，默认falselockable: false,//固定列值属性不可更改width:50,//列宽format: "{0:HH:mm:ss}",//显示格式，显示时分秒headerTemplate: kendo.template('<span><@spring.message "stock.site"/></span>'),// 自定义头标签template: function (dataItem){},//String | function 可以设置列的显示样式，也可以在该属性中过滤数据。attributes: {style: "text-align:center;"},//列数据居中，在属性可以为列添加class 和 style。headerAttributes: {style: "text-align:center"},//列头文本居中，在属性可以为列头添加class 和 style。editor: function(){}, //最常用，官方定义：提供一种方法来指定该列的自定义编辑UI。使用容器参数创建编辑UI。在使用过程中发现，在编辑数据时会根据该方法对数据进行分装。如该列为字典列，数据源与字典互相对应，该列在显示的时候应该显示字典而不是数据源数据，该方法可以解决这类问题。filterable: false,//Boolean ｜Object 该配置可以将表级筛选进行关闭。command: [{//String | Array 设置列的按钮。系统默认两种按钮 edit编辑，destroy删除，其他的按钮需要自定义生成。name: 'edit',template: '<a href="javascript:void(0)" class="k-grid-edit">编辑</a>',click: function (e) {}}],columns : []//子列集合，可实现分组列头合并}]  dataBound: function () {},  //数据绑定事件，可实现查询后，需要执行的操作cancel: function () {},  //取消编辑事件editable: "inline", //数据编辑方式 true 可编辑 false 不可编辑  inline 行内编辑（默认行内） popup 弹框编辑方式excel: {},//excel导出信息设置，与excelExport连用excelExport: function (e) {},//excel导出数据准备方法change: onChange //可触发选择行事件
})

3. kendo UI grid默认方法调用

$("#grid").data('kendoGrid').addRow();// 新建
$("#grid").data('kendoGrid').saveChanges();// 保存
$("#grid").data('kendoGrid').cancelChanges();// 取消编辑
$("#grid").data('kendoGrid').saveAsExcel();// 保存为Excel
$("#grid").data('kendoGrid').saveAsPDF();// 保存为PDF

4. 补充属性

altRowTemplate：String | function 是否启用自定义表格行级样式模版，可以自定义需要显示的表格样式。
columnResizeHandleWidth: Number 设置列可调整的宽度大小。
filterable：是否在表头启用筛选功能，默认为false，禁用筛选功能。在设置为true的时候可以配置更多筛选设置。
columnMenu：Boolean ｜ Object 默认为false，设置为true的时候表头上会显示列操作的菜单图标。点击菜单按钮，会有多种列操作，包括排序，和筛选及列的显示隐藏功能。
reorderable：Boolean 默认false禁止改变列的顺序。设置为true时可以拖动列来改变列的显示顺序。
rowTemplate： String ｜Function 可以自定义行的显示模版。这个属性的实用性还是很高的
toolbar：String | Array | Function 设置列表上方的按钮。可以在表格上方设置按钮及其他显示内容。与行级按钮效用类似

三. kendo UI grid数据校验

1.在dataSource中写校验逻辑

schema: {data: 'rows',total: 'total',model: {id: "testId",fields: {length: {type: "number",validation: {min : 0,//最小值step : 1,//最小变化值custom: function (e) {var length = e[0].value;//获取当前值if (LENGTH > length) {//oldValue与newValue比较var datas = $("#grid").data('kendoGrid').dataSource.data();$.each(datas, function (i, v) {if (v.partsPackId == K_ID) {$('#grid').data('kendoGrid')._data[i].length = LENGTH;$('#grid').data('kendoGrid').refresh();//前台刷新return false;}});}return true;}}},minCol: {validation: {//最值校验required: true,//必输校验required:{message:'必输提示'},filedValueValidation:function (input) {//自定义函数，每次验证调用if(cnt1>0){return flag1;}cnt1=cnt1+1;if(input.is("[name=minCol]")){var minValue=input.val();//获取当前值//校验输入的是否是数值flag1=/^-?\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/.test(minValue);if(!flag1){kendo.ui.showErrorDialog({title:'错误',message:'最小值只能输入数字，请检查！'});return false;}//校验是否大于最大值var maxValue=$(input).parent().next("td").text();//next获取后一单元格值，获取前一单元格用previf(ifNotNull(maxValue)&&Number(minValue)>Number(maxValue)){kendo.ui.showErrorDialog({title:'错误',message:'最小值应小于最大值，请检查！'});return false;}return flag1;}}},}},editable: function (col) {if (col == 'siteId' || col == 'materialCode') {if (!this.isNew()) {//列允许新增不允许修改return false;}return true;}LENGTH = 0;K_ID = this.id;if (col == 'length') {//获取单元格编辑前值LENGTH = (this.length == null || this.length == "") ? 0 : this.length;}return true;}}}

2.有些检验需要在列的editor属性中去做校验

//grid的columns下的列的editor方法
editor:function (container, options) {if (!options.model.otherCol) {alert('请先输入其他值');return;}//后续操作
}

3.单元格原值与新值比较

实现相对复杂，但是不会出现我校验一次，二次校验时，旧值已经变化，没法做正确比较

//定义原值变量
var OLD_VALUE = 0;
//定义初始值对象集合
var DATA_ARRAY = [{"materialLotId": "","primaryUomQty": ""
}]//加载初始对象集合方法
function LoadDataArray() {var datas = $("#grid").data('kendoGrid').dataSource.data();for (var i = 0; i < datas.length; i++) {var rowData = {"materialLotId": "","primaryUomQty": ""}rowData.materialLotId = datas[i].materialLotId;rowData.primaryUomQty = datas[i].primaryUomQtyDATA_ARRAY[datas.length - 1 - i] = rowData;}
}//dataBound中调用LoadDataArray
dataBound:function(){LoadDataArray();
}//定义获取原值方法
function GetOldValue(id) {var value = 0;$.each(DATA_ARRAY, function (i, v) {if (v.materialLotId == id) {value = DATA_ARRAY[i].primaryUomQty;return false}});return value;
}//editable中调用GetOldValue
editable: function (col) {if (col == 'primaryUomQty') {OLD_VALUE = GetOldValue(this.materialLotId);return true;}return true;
}//schema的列校验中做比较
primaryUomQty: {type: "number",validation: {required: true,required: {message: "数量不可为空"},custom: function (e) {var value = e[0].value;if (OLD_VALUE >= value && value >= 0) {return true;} else {e.attr("data-custom-msg", '请输入小于' + OLD_VALUE + '大于等于0的数');//custom消息警告return false;}}}
}

四. kendo UI grid数据绑定，获取与使用

1.数据交互操作

a.grid数据交互

除上述直接通过标签绑定grid的viewModel，来实现内置增删改查等方法的调用外，还可以通过重写增删改查方法实现调用，如下：

//删改查等与增相同，onCreate 为标签绑定的方法，需注意是要标签通过data-bind="click:onCreate"的方式绑定了viewModel 
var viewModel = Hap.createGridViewModel("#grid",{onCreate : function (e) {//可以在调用内置方法前，做自定义逻辑操作等，也可只有自己的实现方法，不调用grid内置方法e.data.create();//调用自带新增}});

注意：如果是用自定义方法掉数据操作方法，新增或修改行的数据传后台，需要改行对应行数据状态viewModel.model.set(’ __status’, ‘add’);//修改update

b.grid行数据交互与操作方法创建

{title: '操作',attributes: {style: "text-align:center;"},headerAttributes: {style: "text-align:center"},template:function (dataItem) {//return Hap.createAnchor('测试', testCreate, 'test');//不想写标签，可以用HAP自带方法创建return "<span class='delete-span' onclick='removeRow(this)' " +"'>删除</span>";//自定义操作方法调用，可多个标签},width: "80px"
}//删除操作
function removeRow(obj) {grid.removeRow($(obj).parent().parent());//前台移除行grid.dataSource.sync('destroy');//调用内置删除方法，删除移除行
}//测试
function testCreate(value){alert(value);
}

2. kendo UI grid数据操作

a.表格数据源赋值，除了dataSource属性直接绑定dataSource对象外，还可以通过其他方式给表格赋值

//赋值二维对象数组
$("#grid").data("kendoGrid").dataSource.data(rows);//第一行插入行对象
grid.dataSource.insert(0, { qty: 1,name:"a" });//最后一行插入行对象
for(var i=0;i< args.rows.length;i++){$('#grid').data('kendoGrid').dataSource.insert(args.rows[i]);
}//添加不定行
var grid = $("#grid").data("kendoGrid");            
for (var i = 0; i < data.length; i++)
{grid.dataSource.add({ID: data[i].ID,MAC: data[i].MAC});
}//添加空行
grid.addRow();

b.单元格赋值

//指定行单元格赋值
$('#grid').data('kendoGrid')._data[0].kId = 1;//赋值完需页面刷新//坐标单元格赋值
$("#grid").find('tr[data-uid='+uid+']').find('td').eq(1).text(1);
//或者：$("#grid").find('tr').eq(1).find('td').eq(1).text(1);//选中行单元格赋值
var row = $("#grid").data("kendoGrid").select();
var data = $("#grid").data("kendoGrid").dataItem(row);
data.set("Id", "1");

c.数据清理

//清空数据1
$("#grid").data("kendoGrid").dataSource.data("");//清空数据2，可清空指定行
var grid = $("#SearchGrid").data("kendoGrid");   var All = grid.dataSource.view();for (var i = 0; i < All.length; i++) {grid.dataSource.remove(All[i]); }//行前台删除操作
{title: '操作',template:function (dataItem) {return "<span class='delete-span' onclick='removeRow(this)' " +"'>删除</span>";},sortable: false//方法列不让排序，避免出现异常
}
function removeRow(obj) {grid.removeRow($(obj).parent().parent());
}

d.数据刷新

//前端页面刷新表格
$('#grid').data('kendoGrid').refresh();//重新查所有数据
viewModel.refresh();
$('#grid').data('kendoGrid').dataSource.read();
//重新查第一页数据
$("#lgrid").data('kendoGrid').dataSource.page(1);// 1可替换成当前页$("#lgrid").data('kendoGrid').dataSource._page//数据同步
dataSource.sync();//数据同步，相当于提交数据

e.数据获取

//其他方法获取grid选中单行或多行第一行数据
var row = $("#grid").data("kendoGrid").select();
var data = $("#grid").data("kendoGrid").dataItem(row);//获取所有选中行数据
var selectDatas = $("#grid").data("kendoGrid").selectedDataItems();//onChange事件触发，获取选中行
function onChange(arg) {var selected = this.dataItem(this.select());//获取选中行数据var workNum=selected.workOrderNum;viewModel2.model.set("workOrderNum", workNum);viewModel2.refresh();//实现头行查询
}//grid单击事件获取指定行数据（双击事件一样）
$("#grid").on('click', 'td', function () {//获取选中行var rowIndex = this.rowIndex;var data = $("#grid").data("kendoGrid").dataSource.data()[rowIndex];if (data && data.actualId) {viewModelLine.model.set("actualId", data.actualId);$("#gridLine").data("kendoGrid").dataSource.read();//实现头行查询}//获取选中列var colIndex = 0;$.each(this.childNodes, function (i,v) {if(v.className == "k-state-border-down"){colIndex = i;return false;}});})//获取所有数据
var datas = $("#grid").data('kendoGrid').dataSource.data();
$.each(datas, function (i, v) {if (v.isNew()) {}//判断是否新增行
});//dataBound处理数据
dataBound: function () {var rows = this.items();//获取所有数据$(rows).each(function () {var index = $(this).index() + 1;var rowLabel = $(this).find(".row-number");//序号列展示标签赋值$(rowLabel).html(index);});
},
{title: "序号",width: 80,headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},template: "<span class='row-number'></span>",
}//获取变更数据集合
function  getChangedData() {var grid=$("#grid").data("kendoGrid");var ds = grid.dataSource;if(!grid.validate()){//校验数据isValid = false;return false;}if (!ds.hasChanges()) return false;//判断有无更改数据var newRow = [];$.each(ds.data(), function (idx, data) {if (data.dirty === true) {//数据有变化var d = data.toJSON();d['__status'] = data.isNew() ? 'add' : 'update';//判断新增修改d['__id'] = data.uid;newRow.push(d);}});return newRow;
}

五. kendo UI grid动态列加载

动态加载列，就是通过js，在grid加载前去添加列

/*** 加载表格列，grid加载前调用* @param opCount 子列批数* @constructor*/
function SetGridColumns(grid, opCount) {var columns = [];columns.push({field: "workOrderType",title: '生产订单类型',width: 120,locked: true,//固定列lockable: false});var childNodes = [];if (opCount != null) {for (var i = 1; i <= opCount; i++) {childNodes.push({field: "opInputQty" + i,title: '工序投入数',width: 120});childNodes.push({field: "opCompleteQty" + i,title: '工序完工数',width: 120});childNodes.push({field: "opPercentPass" + i,title: '工序合格率',width: 120});}}columns.push({field: "工序头",title: '生产订单类型',width: 620,columns: childNodes});// 列加载，可修改grid中其他属性grid.setOptions({columns: columns});
}

六. kendo UI grid合并行/列/头操作

1.行合并

在列attributes中加rowspan:2，合并两行

2.列合并

在列attributes中加colspan:2，合并两列

需注意：被合并行/列需隐藏显示

3.分组合并表头

{title: '分组头',headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},width: 200,columns : [{title: "分组行1",field: "line1",width: 80,headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},},{title: "分组行2",field: "line2",width: 120,headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},editor: function (container, options) {//单元格只读$('<span data-bind="text:line2"></span>').appendTo(container);}}]
}

4.合并表头

/*** 合并表头* @param titleName 合并列名* @param colSpanCount 合并数* @constructor*/
function GridHeaderSpan(titleName, colSpanCount) {var index = 1$('#grid thead th').each(function (i, v) {if ($(v).attr('data-title') == titleName) {if (index == 1) {$(v).attr('colspan', colSpanCount);$(v).css('text-align', 'center');} else {$(v).hide();}index++;}});
}

5.合并数据行

dataBound: function () {for (var colIndex= 1; colIndex<= 2; colIndex++) {GridRowSpan('grid', colIndex);//调用合并}
}/*** 指定列行合并* @param dimension_col* @constructor*/
function GridRowSpan(gridId, dimensionColIndex) {var first_instance = null;var rowspan = 0;var trArr = $('#' + gridId + ' .k-grid-content').find("tr");trArr.each(function (i) {var dimension_td = $(this).find('td:nth-child(' + dimensionColIndex + ')')if (first_instance == null) {if (ifNotNull(dimension_td.text())) {rowspan = 1;first_instance = dimension_td;}} else if (ifNotNull(dimension_td.text()) && dimension_td.text() == first_instance.text()) {rowspan++;dimension_td.hide();} else {if (rowspan > 1) {first_instance.attr('rowspan', rowspan);}if (ifNotNull(dimension_td.text())) {rowspan = 1;first_instance = dimension_td;} else {rowspan = 0;first_instance = null;}}if (trArr.length - 1 == i && rowspan > 1) {first_instance.attr('rowspan', rowspan);}});
}//合并方法2
function GridRowSpan(dimension_col) {var first_instance = null;var rowspan = 0;$('#grid .k-grid-content').find("tr").each(function () {var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')')if (first_instance == null) {if(ifNotNull(dimension_td.text())) {first_instance = dimension_td;}rowspan = 0;} else if (dimension_td.text() == first_instance.text()) {$('#grid').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;} else {rowspan = 0;if(ifNotNull(dimension_td.text())) {first_instance = dimension_td;}}});}

6.固定列合并行

固定列整体属于一个新的列组，所以做合并不用隐藏列，被合并列会字段自动压缩

{field: "test1",title: '测试1',width: 120,locked: true,//固定列lockable: false,attributes: {rowspan: "2"}//合并两行
},
{field: "test2",title: '测试2',width: 120,locked: true,//固定列lockable: false,attributes: {rowspan: "2"}
}

7.固定列与非固定列同时合并行

这个需要注意的是，在隐藏时，需要对其非固定列的数据列进行隐藏，因为固定列的思想是把gird分出两个列组，每个列组对于一个table，所以在对非固定列合并时，只用获取非固定列组的table对象，进行行合并，不能直接对grid下的行进行合并，不然会影响固定列合并效果。列分组效果如图：

合并实现代码：

//固定列合并行
{field: "soNum",title: '销售订单',width: 120,locked: true,//固定列lockable: false,attributes: {rowspan: "2"}//合并两行
},
{field: "workOrderNum",title: '生产订单',width: 120,locked: true,//固定列lockable: false,attributes: {rowspan: "2"}
}//非固定列合并行
dataBound: function () {for (var dimension_col = 1; dimension_col <= 2; dimension_col++) {GridRowSpan(dimension_col);}
}/*** 指定列行合并* @param dimension_col* @constructor*/
function GridRowSpan(dimension_col) {var first_instance = null;var rowspan = 0;$('#grid .k-grid-content').find("tr").each(function () {//重点时这里需要获取非固定列组（k-grid-content）对应的数据行var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')')if (first_instance == null) {first_instance = dimension_td;rowspan = 0;} else if (dimension_td.text() == first_instance.text()) {$('#grid').find('tr').each(function () {if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {rowspan++;if (rowspan == 2) {//合并两行return false;}}});dimension_td.hide();first_instance.attr('rowspan', rowspan);first_instance = null;rowspan = 0;} else {rowspan = 0;first_instance = dimension_td;}return;});
}

实现效果：

七. kendo UI grid鼠标点击事件

需设置Grid对应可选属性：selectable: true,//selectable: true 可以使用行选中；"row" 可选中行；"cell" 可选中项；"multiple, row" 可选中多行；"multiple, cell" 可选中多项

//单元格单击事件
$("#grid").on('click','.k-grid-content .k-rowbox',function(){// 获取当前点击行数据var row =$("#grid").data("kendoGrid").select();//grid被选中var data = $("#grid").data("kendoGrid").dataItem(row);//获取选中行的数据
})
//单元格双击事件
$("#grid").on('dblclick','.k-grid-content .k-rowbox',function(){//获取选中行的数据var row = $("#grid").data("kendoGrid").dataItem($(this).parent().prevObject);
})// 单击行事件
$("#grid").on('click', '.k-grid-content tr', function () {var row = $("#grid").data("kendoGrid").select();var data = $("#grid").data("kendoGrid").dataItem(row);
});
// 双击行事件
$("#grid").on('dblclick', '.k-grid-content tr', function () {//获取选中行var rowIndex = this.rowIndex;var data = $("#grid").data("kendoGrid").dataSource.data()[rowIndex];
});

八. kendo UI grid内置事件，主要举例几个常用事件，其他做简单介绍

1.change: onChange事件

用户在选择行或单元格时触发，this关键字被设置为当前实例，与鼠标点击事件有异曲同工的效果

function onChange(arg) {var selected = this.dataItem(this.select());//获取选中数据var headerId=selected.headerId;viewModelLine.model.set("headerId", headerId);if(viewModelLine.model.headerId==null || viewModelLine.model.headerId=="")viewModelLine.model.set("headerId", -1);//实现点击头查询行$("#line-grid").data('kendoGrid').dataSource.page(1);
}

2.edit:onEdit事件

用户编辑或创建数据时触发。

参数：

e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑。
e.sender：当前kendoGrid实例。
e.container：编辑容器的JQ对象，根据编辑模式的不同，容器也是不同的

function onEdit(e) {if (!e.model.isNew()) {var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");numeric.enable(false);//新增列不可编辑}
}

3.excelExport导出excel事件

参数：

e.sender：当前实例。
e.data：数据项的数组。
e.workbook：excel配置对象，用于初始化一个kendo.ooxml.Workbook类。工作簿的修改将反应在输出的excel文档中。
e.proventDefault：如果调用，将不会保存生成的文件。

//按钮触发导出excel
<span class="btn btn-primary k-grid-excel" style="float:left; margin-right: 5px;"data-bind="click:exportExcel"><i class="fa fa-file-excel-o" style="margin-right:3px;"></i><@spring.message "hap.exportexcel"/></span>$("#grid").kendoGrid({excel: {fileName: "test",filterable: true , },excelExport: function (e) {var rows =  e.workbook.sheets[0].rows;var datas = e.data;e.workbook.sheets[0].rows[0].cells[1].value='工厂';e.workbook.sheets[0].rows[0].cells[2].value='物料编码';for (var i=1;i<rows.length;i++){rows[i].cells[0].value=datas[i -1].plantCode;//工厂rows[i].cells[1].value=datas[i -1].itemCode;//物料编码}}
});

4.dataBound:{} 事件

绑定到其数据源中的数据时触发。

$("#grid").kendoGrid({dataBound: function(e) {console.log("数据绑定了");}
});

5.dataBinding:{}事件

在绑定其数据源之前触发。

参数：

e.sender：当前实例。
e.preventDefault：如果调用阻止数据绑定操作，表格行将保持不变，dataBound事件不会触发。
e.action：导致dataBinding事件的操作。可能的值：rebind、sync、add、remove。
e.index：如果添加或删除操作，则可用，显示添加或删除的元素索引。
e.items：显示将要从DataSource添加、删除的元素的项目数组。

$("#grid").kendoGrid({dataBinding: function(e) {console.log("要绑定数据了，快操作我");}
});

6.pdfExport事件

当用户点击导出到PDF按钮时触发。

参数：

e.sender：当前实例。
e.preventDefault：如果调用，将不会保存生成的文件。
e.promise：在导出完成时触发。

将定期调用以下参数：

page：当前页面内容。
pageNumber：当前页码。
progress：范围为0-1的数字，表示当前导出操作的速度。
totalPages：总页数

$("#grid").kendoGrid({pdf: {allPages: true},pdfExport: function(e) {e.promise.progress(function(e) {console.log(kendo.format("{0:P} complete", e.progress));}).done(function() {alert("Export completed!");});}
});//导出PDF
$("#grid").data("kendoGrid").saveAsPDF();

7.saveChanges事件

用户点击“保存”命令按钮时触发。

参数：

e.preventDefault：如果调用，将不会调用数据源的同步方法。
e.sender：当前实例。

$("#grid").kendoGrid({saveChanges: function(e) {kendo.ui.showConfirmDialog({title: $l('hap.tip.info'),message: $l('hap.tip.delete_confirm')}).done(function (event) {if (event.button != 'OK') {e.preventDefault();}});}
});

8.save事件

数据项被保存时触发。

参数：

e.model：被绑定到的数据项。如果e.model.id为空，则新创建的行将被保存。
e.container：当前编辑容器元素的JQ对象。
e.values：用户输入的值。仅在editable.mode选项设置为incell时可用。
e.sender：当前实例。
e.preventDefault：调用阻止保存操作。在incell中，编辑后的表格单元格将退出编辑模式。在"inline"和"pupop"编辑模式下，编辑表格将保持打开状态。

$("#grid").kendoGrid({save: function(e) {if (e.values.test !== "") {if (e.values.test !== e.model.test) {console.log("保存成功");}} else {e.preventDefault();console.log("请输入值");}}
});

9.beforeEdit事件

在编辑器创建之前，点击编辑或创建数据时触发，可以用于自定义逻辑，阻止编辑。

参数：

e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑
e.sender：当前kendoGrid实例

$("#grid").kendoGrid({beforeEdit: function(e) {if (!e.model.isNew()) {e.preventDefault();}}
});

10.remove事件

当用户点击删除命令，并在确认窗口中确认删除时触发。

参数：

e.model：选中的数据项。
e.row：当前表格行的JQ对象。
e.sender：当前实例。

$("#grid").kendoGrid({remove: function(e) {console.log(e.model);}
});

11.其他不常用事件，可自行去了解

cellClose事件、cancel事件、page事件、sort事件、filter事件、filterMenuInit事件、filterMenuOpen事件、group事件、groupCollapse事件、groupExpand事件、columnHide事件、columnLock事件、columnUnlock事件、columnMenuInit事件、columnMenuOpen事件、columnReorder事件、columnResize事件、columnShow事件、detailCollapse事件、detailExpand事件、detailInt事件、navigate事件

九. kendo UI grid colums操作

列合并可见上文

1.简单输入框类型，通过dataSource去配置

dataSource = new kendo.data.DataSource({ schema : {   data : "rows", //定义数据来源  total : "total", //页码总数  model : {   id : "id", //id设置  fields : //对应grid中columns中的成员 {    testName :{   type:"string"//输入框类型，string：字符串文本框；number：数字输入框；date：日期输入框}}   }
});

2.日期框

日期不包含时间：kendoDatePicker({})
日期包含时间：kendoDateTimePicker({})
时间：kendoTimePicker({})

//时间框，日期框类似
{field: "timeTest",title: '时间',format: "{0:HH:mm:ss}",width:150,editor: function (container, options) {var start = options.model.timeTest;var opts = {format: "HH:mm:ss",parseFormats:"HH:mm:ss",};if (start) {opts.min = start;//设置最小值}$('<input name="' + options.field + '" required/>').appendTo(container).kendoTimePicker(opts);}
},

3.下拉框

//自定义集合，可以用后台返回集合
var SITE = [{value : "1",meaning : "A"},{value : "2",meaning : "B"}]//下拉框列
{field: "siteId",title: '测试',width: 120,template: function (dataItem) {var v = dataItem.siteId;$.each(SITE, function (i, n) {//展示值if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {v = n.meaning;return false;}});return v || "";},editor: function (container, options) {//选择值$('<input required name="' + options.field + '"/>').appendTo(container).kendoDropDownList({dataTextField: "meaning",dataValueField: "value",dataSource: SITE,valuePrimitive: true//当为true时输入框获取dataValueField对应的值，为false时获取dataTextField对应的值。默认false});}
}

补充：

1）下拉框数据源可在editor方法中进行控制
2）下拉框只读控制特殊处理

4.LOV选择框

{field: "materialCode",title: 'LOV测试',width: 120,template: function (dataItem) {return dataItem['materialCode'] || ''},editor: function (container, options) {$('<input name="' + options.field + '"/>').appendTo(container).kendoLov($.extend(<@lov "YLT_LOV_MATERIAL" />, {//HAP中配置LOV，如何配置，可自行查找valueField: "materialId",textField: "materialCode",model: options.model,query:function(e){e.param['siteId'] = viewModel.model.siteId;//查询条件，这里是grid列值，其他值可以直接等于},select: function(e) {//返回结果赋值options.model.set("materialId", e.item.materialId);options.model.set("materialName", e.item.materialName);}}));//LOV实现}
}

5.自定义数字类型输入框

{field: "qty",title: '数量',width: 100,editor: function (container, options) {// 暴露3位小数$('<input name="' + options.field + '" required/>').appendTo(container).kendoNumericTextBox({format: "#####.###",decimals: 3,min: 0.001});},
}

6.表格不可编辑

输入框不可编辑，我常用如下方式。在dataSource的列属性设置editable : false，是可以的，但是此法列不能直接再赋值展示

{field: "seq",title: '测试',width: 60,editor: function (container, options) {//覆盖span标签，实现只读$('<span data-bind="text:seq"/>').appendTo(container);}
}

其他类型表格只有通过给editor中input输入标签加 disabled，如下图：

补充：下拉集合的另一种实现只读效果方式

{field: "status",title: '订单状态',width: 100,attributes: {style: "text-align:center;white-space:nowrap;text-overflow:ellipsis;"},headerAttributes: {style: "text-align:center"},template: function (dataItem) {var v = dataItem.status;return getFastCodeMeaning(WO_STATUS, v);},editor: function (container, options) {$('<span>' + getFastCodeMeaning(WO_STATUS, options.model.status) + '</span>').appendTo(container);}
}

7.表格必输

输入框必输，直接在dataSource的列validation中加上required即可

schema : {   data : "rows", //定义数据来源  total : "total", //页码总数  model : {   id : "id", //id设置  fields : //对应grid中columns中的成员 {    testName :{   type:"string",//输入框类型，string：字符串文本框；number：数字输入框；date：日期输入框validation : {   //单元格数据校验required : true,   //不能为空required: {message: '必输提示'}}   }}   } 
}

其他框必输如上文加不可编辑类似，将disabled换成required即可。

十. kendo UI grid 特殊用法补充

1.行操作方法一般写在template:function (e) {}中

{title: '操作',template:function (dataItem) {//行删除return "<span class='delete-span' onclick='removeRow(this)' " +"'>删除</span>";},width: "80px"
}

2.将方法绑定到viewmodel

可直接像绑定grid增删改查等方法，用标签通过data-bind="click:updateFlagStatus"绑定方法

viewModel.updateFlagStatus=function(arr){}

3. kendo UI grid实现单元格里按Enter/Tab能跳到下一项

//禁止grid内触发原生的enter和tab事件
$("#grid table").on("keydown", "td", function (e) {return !(e.keyCode == 9 || e.keyCode == 13);
});
//grid内的按键操作
$("#grid table").on("keyup", "td", function (e) {var grid = $("#stationGrid").data("kendoGrid")var tblCells = grid.content.find("td:not(.unSelect)");var index = tblCells.index(grid.content.find("td.k-edit-cell"));if ([9, 13, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {var newIndex = (e.keyCode == 37) ? (index - 1) : (e.keyCode == 38)? (index - grid.columns.length) : (e.keyCode == 40) ? (index + grid.columns.length) : (index + 1);if (tblCells[newIndex]) {//加 grid.columns.length 可跳到下一行grid.editCell(tblCells[newIndex]);}return false;}
});

4.进入编辑框，全选内容

//编辑，全选输入框的内容
$("#grid table").on("focus", "td", function (e) {$(this).find("input").select();
});

5.下拉框:手动输入的写法

6. kendo UI grid选择框勾选

//全选
var items = grid.items();
$.each(items,function (i,item) {grid.select(item);
});//单击事件，选中单行
$("#grid").on('click', '.k-grid-content tr', function () {// 获取当前点击行数据var selected = grid.dataItem($(this).parent().prevObject);//选中行勾选var items = grid.items();grid.clearSelection();//清除选中行$.each(items,function (i,item) {var dataItem =  grid.dataItem(item);if(dataItem.uid == selected.uid){grid.select(item);return false;}});
});//grid勾选选中行
var gridCheckRow = function (item) {$(item).addClass("k-alt k-state-current k-state-selected").attr("aria-selected", true);
}
//grid取消勾选选中行
var gridUnCheckRow = function (item) {$(item).removeClass("k-state-current k-state-selected").attr("aria-selected", false);
}//升级 实现单击选中&取消
var unClickFlag = false;
$("#grid").on('click', '.k-grid-content tr', function () {if (!unClickFlag) {$($(this).children()[0]).children('input').attr('id', grid.dataItem($(this)).uid);unClickFlag = true;//避免程序控制点击触发点击事件Emt.clickByElementId(grid.dataItem($(this)).uid);} else {unClickFlag = false;}
})
/*** @description 模拟事件（默认单击）*/
Emt.clickByElementId = function (elementId, type) {if (document.all) {//IEdocument.getElementById(elementId).click();} else { // 其它浏览器var e = document.createEvent("MouseEvents");e.initEvent((ifNull(type) ? "click" : type), true, true);document.getElementById(elementId).dispatchEvent(e);}
};

7.tr转换成dataItem

var tr = $(cellText).parent().parent();
var dataItem = grid.dataItem(tr);

8.查找grid表头并隐藏

$("#lineDtlGrid table:eq(0)").find("th").eq(0).hide(); 
//$("#lineDtlGrid table:eq(0) th:eq(0)").css("display","none")
//$("#lineDtlGrid table:eq(0)").children("thead").children("tr").children("th").eq(0).hide();

9. kendo UI grid列里面的内容过多滚动显示

{title: '<@spring.message "trp.tst.bill.testitem"/>',width: 170,template: function (rowdata) {var item = "";$.each(rowdata.testItemList, function (i, v) {item = item + "<li style='list-style-type:lower-alpha'>" + v.testItemName + "</li>";});return "<div style='overflow-y:auto;max-height:60px;'>" + item + "</div>";}
},

10.kendoTooltip提示框

//提示框样式
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;
}

//列值不换行
{field: "column",title: '列',width: 100,//列数据过长时，不换行，简略为 " ... "//style: "white-space:nowrap;text-overflow:ellipsis;"attributes: {style: "white-space:nowrap;text-overflow:ellipsis;"},headerAttributes: {style: "text-align:center"}
},//提示框
$("#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)",content: function (e) {// 指定列特殊处理，显示指定值if (e.target.context.cellIndex == 2) {var taskOrderNum = workDistributeGrid.dataItem(e.target.closest("tr")).taskOrderNum;return '<div style="min-width:100px;max-width: 1000px;">' + taskOrderNum + '</div>';}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");

11. kendo UI grid编辑更改dataSource值，改变展示内容

fields: {workHours: {type: "number",validation: {min: 0,//最小值step: 0.1,//最小变化值custom: function (e) {//var workHours = e[0].value;//获取当前值var currentRow = employeeGrid.dataItem(e.parents('tr'));//获取当前行if (currentRow) {currentRow.totalHour = currentRow.workHours + currentRow.nonWorkHour;employeeGrid.refresh();}return true;}}}
}

12.指定单元格添加标签

$.each(datas, function (i, v) {var htmlText = "<i onclick='removeRow(this)' class='fa fa-minus-square minus-square-i' " +"style='font-size: 34px;cursor: pointer;z-index:100'></i>";$('tbody > tr[data-uid="' + v.uid + '"] td:eq(0)').append(htmlText);//添加自定义标签$('tbody > tr[data-uid="' + v.uid + '"] td:eq(0) span').css('display','none');//隐藏选中框return false;
});

13. kendo UI grid全选

function gridSelectAll(grid, selectAllFlag) {var data = grid.dataSource.data();if (selectAllFlag) {$(".k-checkbox").removeClass("fa").removeClass("fa-check");//取消全选$.each(data, function (i, v) {v.enterFlag = 'N'})} else {$(".k-checkbox").addClass("fa").addClass("fa-check");//全选，选中可以用上部方法gridCheckRow $.each(data, function (i, v) {v.enterFlag = 'Y'})}return !selectAllFlag;
}

14.requestEnd 中的常规操作

requestEnd: function (e) {var response = e.response;if(response){var type = e.type;if(type !='read'){ //保存后操作if(response.success){closePage(parent.splitDiv);}}}else{kendo.ui.showErrorDialog({title: $l('hap.error'),message: $l('<@spring.message "mt.server.error"/>')});}
}

15. kendo UI grid获取选中索引

//获取选中单元格列Index
var getGridSelectedColIndex = function (obj) {var colIndex = 0;$.each(obj.childNodes, function (i, v) {if (v.className == "k-state-border-down") {colIndex = i;return false;}});return colIndex;
}
//获取表格被选中行集合
var getGridSelectedRowIndexs = function (grid) {var rowIndexArr = [];$.each(grid.items(), function (i, v) {//判断行是否被选中if ($(v).attr('aria-selected')) {rowIndexArr.push(i);}});return rowIndexArr;
}

补充：

// 默认选中单元格
setTimeout(function () {var grid = $("#grid").data("kendoGrid")var tblCells = grid.content.find("td:not(.unSelect)");grid.editCell(tblCells[1]);
}, 400);

16. kendo UI grid行上下移动

//更新表格序列
var setGridSequence = function (grid) {var datas = grid.dataSource.data();$.each(datas, function (i, v) {v.seq = i + 1;v.sequence = i + 1;});grid.refresh();
}//上移
var gridMoveUp = function (grid) {var selectDatas = grid.selectedDataItems();//获取被选中行集合var selectedRowIndexs = getGridSelectedRowIndexs(grid);//获取新数据源var startIndex = -1;//选中第一行索引var endIndex = -1;//选中最后一行索引var datas = grid.dataSource.data();$.each(datas, function (i, v) {if (selectDatas[0].uid == v.uid) {//获取选中第一行索引startIndex = i;}if (selectDatas[selectDatas.length - 1].uid == v.uid) {//获取选中最后一行索引endIndex = i;}});//更新数据源if (startIndex > 0) {var changeRow = datas[startIndex - 1];grid.dataSource.remove(changeRow)grid.dataSource.insert(endIndex, changeRow);//更新序号if(seqFlag){setGridSequence(grid);}//重新选中选中行var items = grid.items();if (selectedRowIndexs[0] > 0) {$.each(items, function (i, v) {if (selectedRowIndexs.includes(i + 1)) {gridCheckRow(v);//选中行}});} else {gridCheckRow(items[0]);//选中行}}
}
//下移
var gridMoveDown = function (grid) {var selectDatas = grid.selectedDataItems();//获取被选中行集合var selectedRowIndexs = getGridSelectedRowIndexs(grid);//获取新数据源var startIndex = -1;//选中第一行索引var endIndex = -1;//选中最后一行索引var datas = grid.dataSource.data();$.each(datas, function (i, v) {if (selectDatas[0].uid == v.uid) {//获取选中第一行索引startIndex = i;}if (selectDatas[selectDatas.length - 1].uid == v.uid) {//获取选中最后一行索引endIndex = i;}});//更新数据源if (endIndex < datas.length - 1) {var changeRow = datas[endIndex + 1];grid.dataSource.remove(changeRow)grid.dataSource.insert(startIndex, changeRow);//更新序号if(seqFlag){setGridSequence(grid);}//重新选中选中行var items = grid.items();if (selectedRowIndexs[selectedRowIndexs.length - 1] < grid.dataSource.data().length - 1) {$.each(items, function (i, v) {if (selectedRowIndexs.includes(i - 1)) {gridCheckRow(v);//选中行}});}else{gridCheckRow(items[selectedRowIndexs[selectedRowIndexs.length - 1]]);//选中行}}
}

17. kendo UI grid 状态栏添加合计

// 数据源绑定合计状态栏
dataSource.aggregate([{ field: "qty1", aggregate: "sum" },{ field: "qty2", aggregate: "sum" }
]);//指定状态栏名称
{field: "firstCol",title: '第一列',width: 100,footerTemplate: "合计"
},//合计列处理
{field: "qty1",title: '数量1',width: 80,//添加footerTemplate标签Id，用于动态显示合计值footerTemplate: "<span id='sum1' class='foot-num'>#=kendo.format('{0:n}',sum)#</span>" //默认两位小数
},{field: "qty2",title: '数量2',width: 80,// 不处理小数位数footerTemplate: "<span id='sum2' class='foot-num'>#=sum#</span>"
},

18. kendo UI grid 获取指定行指定列值

// 获取指定行列值
var remarkDatas = gridRemark.dataSource.data();
if(remarkDatas.length > 0){var remarks = [];$.each(gridRemark.columns,function (i,v) {var val = remarkDatas[i].get(v.field);//获取指定行，指定列值if (ifNotNull(val)) {remarks.push(remarkDatas[i].get(v.field) + '：' + val);}})viewModel.model.set('remark', remarks.join(';'));
}

19. kendo UI grid 改变指定列背景色

// 改变指定列背景
/*** @description 获取指定列明列索引*/
Emt.getColumnIndexByName = function (grid, columnName) {var columnIndex = -1;$.each(grid.columns, function (i, v) {if (columnName == v.field) {columnIndex = i;return false;}});return columnIndex;
}// 状态颜色控制
Emt.changeWoStatusCellBackColor = function (grid, num) {var columnIndex = (typeof num == "number") ? num : Emt.getColumnIndexByName(grid, num);$.each(grid.dataSource.data(), function (i, v) {if (v.status == 'RELEASED') {$('tbody > tr[data-uid="' + v.uid + '"] > td:eq(' + columnIndex + ')').css("background-color", releasedColor);} else {$('tbody > tr[data-uid="' + v.uid + '"] > td:eq(' + columnIndex + ')').css("background-color", normalColor);}});
}

20. Kendo UI grid 表格实现滚动条自动滚动&轮播效果

// 可在requestEnd方法中调用
function autoScroll() {// 技术滚动条需滚动高度var scrollHeight = (document.getElementById("grid").scrollHeight- Number($(".k-grid-content").css("height").replace("px", "")))*5, scrollTop = 0;var timer = setInterval(function () {// 滚动条位置改变scrollTop += 5;$("#grid").find(".k-grid-content").animate({scrollTop: scrollTop}, 100);if (scrollTop >= scrollHeight) {clearInterval(timer);}//滚动到底部，释放计时器}, 100);
}// 实现平滑轮播列表
function setAutoScroll() {var scrollRate = 20;//滑动频率, 毫秒// 添加克隆数据标签$("#grid").find(".k-grid-content").find(".k-selectable").append('<tbody id="tb2"></tbody>');var box = $("#grid").find(".k-grid-content")[0];var l1 = $("#grid").find(".k-grid-content").find(".k-selectable").find("tbody")[0];var l2 = document.getElementById("tb2");autoScroll()function autoScroll() {box.scrollTop = 0;// 重置滚动条位置if (l1.offsetHeight > box.offsetHeight) {l2.innerHTML = l1.innerHTML;//克隆l1的数据scrollMove = setInterval(scrollup, scrollRate);box.onmouseover = function () {clearInterval(scrollMove)}}}function scrollup() {//滚动条距离顶部的值恰好等于l1的高度，达到滚动临界点，让scrollTop=0回到初始位置，实现无缝滚动if (box.scrollTop >= l1.offsetHeight) {box.scrollTop = 0;} else {box.scrollTop++;}}//鼠标离开时，滚动继续box.onmouseout = function () {scrollMove = setInterval(scrollup, scrollRate);}
}

21. kendo UI grid表格分组：groupable: true，默认分组折叠

dataBound: function () {// Kendo Grid默认分组折叠var grid = $("#grid").data("kendoGrid");if(grid.tbody.find(">tr.k-grouping-row").length>0){grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));// 添加分组行$.each($('tr[role*="row"]'),function (i,v) {// 获取所有行if(v.hasAttribute('data-uid')){// 判断数据行$(v).hide();// 数据行隐藏}});}
}

22. kendo UI grid子集表格：数据行可以展开明细表

<!-- 表格涉及标签 -->
<div style="background: #207192; padding: 0 1rem 1rem 1rem; height: 100%;"><div id="id-multistageTable" style="height:100%;"></div><script type="text/x-kendo-template" id="template"><div class="tabstrip"><ul><li class="k-state-active" style="display: none">投入信息</li></ul><div><div class="orders"></div></div></div></script>
</div>

js代码、需在表格dataSource中指定头Id列

 var expandData = {};// 展开记录、重查需初始// grid参数
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function (e) {var row = e.sender.tbody.find("tr.k-master-row").first();var items = expandData['expanded'];var grid = $("#id-multistageTable").data("kendoGrid");if (items) {items = JSON.parse(items);items.forEach(function (x) {var item = grid.dataSource.view().find(function (y) {return y.id == x;});if (item) {row = $('#' + grid.element.attr('id') + ' tr[data-uid="' + item.uid + '"]')e.sender.expandRow(row);}})}
},
detailCollapse: function (e) {var grid = $("#id-multistageTable").data("kendoGrid");var item = grid.dataItem(e.masterRow);var items = JSON.parse(expandData['expanded']);items = items.filter(function (x) {return x != item.id;});expandData['expanded'] = JSON.stringify(items);
},
detailExpand: function (e) {var grid = $("#id-multistageTable").data("kendoGrid");var item = grid.dataItem(e.masterRow);var items = expandData['expanded'];if (items) {items = JSON.parse(items);} else {items = [];}if (!items.includes(item.id)) {items.push(item.id);}expandData['expanded'] = JSON.stringify(items);
},// 多级表格的子表格
function detailInit(e) {var detailRow = e.detailRow;detailRow.find(".tabstrip").kendoTabStrip({animation: {open: {effects: "fadeIn"}}});var detailRowDs = e.data.lineList || [];// 头对应lineList行数据集合detailRow.find(".orders").kendoGrid({dataSource: detailRowDs,scrollable: false,sortable: false,columns: [{field: "sequence", title: "顺序", width: "60px"},{field: "qty", title: "数量", width: "60px"},{field: "uomCode", title: "单位", width: "100px"}]});
}

Kendo UI Grid 用法详细整理

一. kendo UI grid结构

结构实例

二. kendo UI grid常用属性

1.new kendo.data.DataSource()中常见属性：

2.$("#grid").kendoGrid()中常见属性：

3. kendo UI grid默认方法调用

4. 补充属性

三. kendo UI grid数据校验

1.在dataSource中写校验逻辑

2.有些检验需要在列的editor属性中去做校验

3.单元格原值与新值比较

四. kendo UI grid数据绑定，获取与使用

1.数据交互操作

2. kendo UI grid数据操作

五. kendo UI grid动态列加载

六. kendo UI grid合并行/列/头操作

1.行合并

2.列合并

3.分组合并表头

4.合并表头

5.合并数据行

6.固定列合并行

7.固定列与非固定列同时合并行

七. kendo UI grid鼠标点击事件

八. kendo UI grid内置事件，主要举例几个常用事件，其他做简单介绍

1.change: onChange事件

2.edit:onEdit事件

3.excelExport导出excel事件

4.dataBound:{} 事件

5.dataBinding:{}事件

6.pdfExport事件

7.saveChanges事件

8.save事件

9.beforeEdit事件

10.remove事件

11.其他不常用事件，可自行去了解

九. kendo UI grid colums操作

1.简单输入框类型，通过dataSource去配置

2.日期框

3.下拉框

补充：

4.LOV选择框

5.自定义数字类型输入框

6.表格不可编辑

7.表格必输

十. kendo UI grid 特殊用法补充

1.行操作方法 一般写在template:function (e) {}中

2.将方法绑定到viewmodel

3. kendo UI grid实现单元格里按Enter/Tab能跳到下一项

4.进入编辑框，全选内容

5.下拉框:手动输入的写法

6. kendo UI grid选择框勾选

7.tr转换成dataItem

8.查找grid表头并隐藏

9. kendo UI grid列里面的内容过多滚动显示

10.kendoTooltip提示框

11. kendo UI grid编辑更改dataSource值，改变展示内容

12.指定单元格添加标签

13. kendo UI grid全选

14.requestEnd 中的常规操作

15. kendo UI grid获取选中索引

补充：

16. kendo UI grid行上下移动

17. kendo UI grid 状态栏添加合计

18. kendo UI grid 获取指定行指定列值

19. kendo UI grid 改变指定列背景色

20. Kendo UI grid 表格实现滚动条自动滚动&轮播效果

21. kendo UI grid表格分组：groupable: true，默认分组折叠

22. kendo UI grid子集表格：数据行可以展开明细表

1.行操作方法一般写在template:function (e) {}中