Kendo UI Grid 用法详细整理
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，
·
目录
1.new kendo.data.DataSource()中常见属性：
2.$("#grid").kendoGrid()中常见属性：
八. kendo UI grid内置事件，主要举例几个常用事件，其他做简单介绍
1.行操作方法 一般写在template:function (e) {}中
3. kendo UI grid实现单元格里按Enter/Tab能跳到下一项
11. kendo UI grid编辑更改dataSource值，改变展示内容
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"><i
class="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"><i
class="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"><i
class="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"><i
class="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 GET
dataType:"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, //大小是否可调，默认为false
scrollable:true, //滚动条，默认为true
allowCopy: true, //默认可复制，false不可复制
navigatable: true,//设置为true，则用户可以使用键盘导航来导航小部件。默认情况下，键盘导航被禁用。
height: 500px, //定义表格的高低。
autoBind: true, //是否启用自动绑定数据，默认为true,设置为false时需要手动调用read()或者page()方法进行数据绑定。
groupable:false, //是否显示分组栏，默认为false
selectable:"single row",//选择行方式,默认false禁止选中 row 没有选择框 rowbox 有选择框 ; single 选择单行 multiple ---多行 multiple cell ---允许选择多个单元格 single cell ---单个单元格
pageable: {//分页，默认为false
pageSizes: [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,//固定列，冻结列，默认false
lockable: 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();// 保存为PDF4. 补充属性
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获取后一单元格值，获取前一单元格用prev
if(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].primaryUomQty
DATA_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) {//IE
document.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"}
]
});
}
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
33
0- 0
已为社区贡献3条内容
所有评论(0)