技术文档

1. grid

1.1.grid与checkbox结合使用
效果展示

代码实现

1.2.grid默认勾选

按照指定行默认勾选
Find(“tr:eq(index)”)

1.3.获取grid当前所有的行及当前行的索引

当前行的索引

每次勾选checkbox时触发，获取当前选中行的索引

1.4.设置grid checkbox的点击事件(勾选与取消)
还没完成勾选的时候就执行click事件
function setClick(){//延时操作函数
/grid checkbox单机事件/
$(".k-checkbox").each(function () {
$(this).click(function () {
alert(“cc”)
});
});
}
//延时0.1秒执行函数setClick
window.setTimeout(setClick, 100);
区分什么时候为勾选什么时候为取消勾选

		demo

1.5.获取grid选中的行及数据
方法1：
var row = $("#Grid").data(“kendoGrid”).select(); //获取选中行对象
$.each(row,function(index,r){
var data = $("#Grid").data(“kendoGrid”).dataItem®;
console.log(data)
});
方法2：
var grid = $("#Grid").data(“kendoGrid”);
var data = grid.selectedDataItems();
grid双击获取该行数据
var querygrid= $("#Grid").data(“kendoGrid”);
querygrid.on(‘dblclick’, ‘.k-grid-content tr’, function () {
// 双击
var row = querygrid.data(“kendoGrid”).select();
var data = querygrid.data(“kendoGrid”).dataItem(row);
var d = data.id;//取数据 与前台的属性值对应
});

1.6.获取grid选中的行及数据(change事件）
change事件写在内部

Change事件写在外部

1.7.循环遍历grid所有行(获取数据)
遍历grid所有的行

获取数据

指定该行的列

1.8.获取grid指定列的全部数据
grid.dataSource.at(index);index从0开始
Grid.selectedDataItems();//获取所有勾选的grid数据

1.9.grid内容居中与刷新
标题居中
headerAttributes: {
“class”: “table-header-cell”,
style: “text-align: center”
},
内容居中
attributes: {style: “text-align:center”},
grid刷新：
$(’#grid’).data(“kendoGrid”).refresh();

1.10.grid toolbar的使用
代码：

效果图：

1.11.grid内部单独的checkbox
Cloumns配置列
{
field : “enabledFlag”,
title : ‘<@spring.message “默认勾选”/>’,
headerAttributes: {
“class”: “table-header-cell”,
style: “text-align: center”
},
attributes: {style: “text-align:center”},
width : 40
},
Transport读取数据源里面配置（Y表示选中，N表示未选中）

效果图

注：该checkbox与第一列的checkbox不一样，第一列的checkbox表示的是当前行的所有属性，而这个checkbox则是这一行数据对象中的一个属性，具有值得存在并不是表示选中该行。

1.12.grid链接
Cloumns配置列
{
title: ‘<@spring.message “详细信息”/>’,
width: 80,
template: function (rowdata) {
if (!!rowdata.id) {
return ‘<@spring.message “详细信息”/>’
}
return ‘’;
},
attributes: {style: “text-align:center”},
headerAttributes: { style: “text-align:center”}

},

效果图

1.13.grid按钮
Cloumns配置列
{
attributes: {style: “text-align:center”},
title : ‘<@spring.message “测试按钮”/>’,
headerAttributes: {style: “text-align:center”},
command : [
{
name:‘edit’,
template:" <@spring.message ‘TestButton’/>",
}
],
width : 80
},

效果图

1.14.grid操作
Cloumns配置列
{
title: “<@spring.message ‘hmdm.operation’/>”,
attributes: {style: “text-align:center”},
headerAttributes: {
“class”: “table-header-cell”,
style : “text-align: center”
},
attributes : {style: “text-align:center;padding:4px 3px 4px 3px”},
command: [
{
name: “edit”,
template: "