Kendo UI Grid控件的功能强大，这里将常用的一些功能总结一下。
Kendo UI Grid 固定列
在使用Gird控件显示数据时，如果数据列过多，会出现横向滚动条，很多情况下，我们希望某些列固定，这些列固定显示，不随滚动条发生变化。这时，可以在数据列上使用locked属性，比如，下面是使用mvvm定义grid的示例，编辑按钮被设置为固定列:
需要注意的是，1）固定列总是显示在最左边，2）带有固定列网格在初始化过程时，必须是可见的。如果网格在初始化时不可以见，会出现不可预知的问题。比如这种的场景，如果网格在分页中，初始化时是不可见的，那么，界面可能是这样的：
Grid控件创建自定义弹出编辑窗
Kendo UI Grid控件自带弹出窗编辑，只要在数据源中定义schema，就可以自动生成编辑界面，代码如下：
自动生成的编辑界面对于基本数据类型的字段够用了，但在实际中，会有更复杂的要求，比如，某些字段需要使用下拉框或者更复杂的控件，或者我们希望字段多列排列，这时，需要用到自定义的模板，上面的网格的自定义编辑模板如下：
模板使用script标记，类型为text/x-kendo-template，说明是kendo的模板。模板语言就是html，其中的data标记与kendo MVVM一致。模板中有几点需要注意：
- 模板中需要验证的字段，需要定义name属性，如果不定义，验证信息无法显示
- 需要定义 用于显示验证信息
- 如果需要多列显示，需要在页面中定义自定义的样式：
需要将相关元素的box-sizing 设置为border-box
为Grid创建详细显示信息
KendoUI Grid支持在网格行中显示该行数据的详细信息，示例界面如下：
详细信息部分是在Grid控件的detailInit事件中创建的，如果采用mvvm方式定义，示例代码如下：
上面的代码中，detailInit事件需要写为mvvm的方式，也就是需要用data开头，不同的单词中间用“-”分隔，全部为小写，这样，detailInit就需要写为data-detail-init。这个事件定义的函数在视图模型中,还有一个需要定义的属性是detailTemplate,用于定义显示模板,相关部分的代码如下：
functiongrid_detailInit: function (e) {
e.detailRow.find(".functionTab").kendoTabStrip(
{
animation: {
open: {
effects: "fadeIn"
}
}
}
);
if (!e.data.InParas) e.data.InParas = [];
if (!e.data.OutParas) e.data.OutParas = [];
if (!e.data.ExProps) e.data.ExProps = [];
var dsIn = new kendo.data.DataSource({
data: e.data.InParas,
schema: {
model: {
id: "FieldName",
fields: {
FieldName: { editable: true, validation: { required: true } },
ParaName: { editable: true, validation: { required: true } }
}
}
}
});
e.detailRow.find(".inparagrid").kendoGrid({
dataSource: dsIn,
editable: "popup",
toolbar: ['create'],
columns: [{
title: "字段名称",
field: "FieldName"
}, {
title: "Api参数名",
field: "ParaName"
}, {
command: ["edit", "destroy"]
}
]
});
var dsOut = new kendo.data.DataSource({
data: e.data.OutParas,
schema: {
model: {
id: "FieldName",
fields: {
FieldName: { editable: true, validation: { required: true } },
ParaName: { editable: true, validation: { required: true } }
}
}
}
});
e.detailRow.find(".outparagrid").kendoGrid({
dataSource: dsOut,
editable: "popup",
toolbar: ['create'],
columns: [{
title: "字段名称",
field: "FieldName"
}, {
title: "Api参数名",
field: "ParaName"
}, {
command: ["edit", "destroy"]
}
]
});
var dsEx = new kendo.data.DataSource({
data: e.data.ExProps,
schema: {
model: {
id: "PropName",
fields: {
PropName: { editable: true, validation: { required: true } },
PropValue: { editable: true, validation: { required: true } }
}
}
}
});
e.detailRow.find(".expropgrid").kendoGrid({
dataSource: dsEx,
editable: "popup",
toolbar: ['create'],
columns: [{
title: "属性名称",
field: "PropName"
}, {
title: "属性值",
field: "PropValue"
}, {
command: ["edit", "destroy"]
}
]
});
},
还要定义绑定函数如下：
fn_dataBound: function (e) {
e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
}
模板的定义如下：
这个模板相对复杂，在一个分页控件中显示三个网格，用于显示函数的输入参数、输出参数和附加参数。需要注意的是，模板中不能用id进行标记，因为在页面中，每一行都需要使用模板创建一组元素，在模板中定义id，不能保证id唯一。因此在函数中，需要使用class来获取相关的元素。
Grid弹出编辑窗下拉框控件
如果在Grid弹出窗中有下拉框控件，可以使用values属性直接绑定到数组，在弹出编辑窗中自动生成下拉框，示例代码如下：
上面的代码使用了mvvm的定义模式，其中DataType和ControlType字段的values绑定到数组，数组定义示例如下:
var dsDataType = [
{ value: 'number', text: '数值' },
{ value: 'string', text: '字符串' },
{ value: 'date', text: '日期' },
{ value: 'boolean', text: '布尔' }];
var dsControlType = [
{ value: 'InputNumber', text: '数字输入' },
{ value: 'InputText', text: '文本输入' },
{ value: 'DatePicker', text: '日期输入' },
{ value: 'Checkbox', text: '单选框' },
{ value: 'Selection', text: '下拉框' },
{ value: 'ComboBox', text: '级联下拉框' }
];
数组定义时值字段名为value，显示字段名为text。在弹出编辑窗中，会自动创建为下拉框，显示结果如下：
使用这种方法，就不需要为下拉框定制显示控件了。
为Grid控件创建自定义弹出编辑窗
Kendo UI Grid控件自带弹出窗编辑，只要在数据源中定义schema，就可以自动生成编辑界面，代码如下：
自动生成的编辑界面对于基本数据类型的字段够用了，但在实际中，会有更复杂的要求，比如，某些字段需要使用下拉框或者更复杂的控件，或者我们希望字段多列排列，这时，需要用到自定义的模板，上面的网格的自定义编辑模板如下：
模板使用script标记，类型为text/x-kendo-template，说明是kendo的模板。模板语言就是html，其中的data标记与kendo MVVM一致。模板中有几点需要注意：
- 模板中需要验证的字段，需要定义name属性，如果不定义，验证信息无法显示
- 需要定义 用于显示验证信息
- 如果需要多列显示，需要在页面中定义自定义的样式：
需要将相关元素的box-sizing 设置为border-box
Grid弹出编辑窗自定义编辑控件
上节介绍了创建自定义的弹出编辑窗体，这种方法的好处是可以完全控制编辑窗体中的各个控件，但也有些麻烦，如果只需要修改其中的几个控件，完全重写一个编辑窗体就显得没有必要了。这时，可以为单个编辑控件进行定制。示例代码如下：
上面的代码使用了mvvm的定义方式，其中DisplayOrder字段使用了自定义的editor，numberEditor是一个自定义的函数，在这个函数里创建自定义的控件并添加到container中：
function numberEditor(container, options) {
$('')
.appendTo(container)
.kendoNumericTextBox({
format:"n0"
});
}
这里定义了数字输入的格式，不显示小数。
根据条件改变行显示
在网格显示时，经常需要设置条件，根据网格中的数据，改变网格或者所在行的显示属性。比如如果数据超过某个限度，需要显示报警颜色。这些需求包括当满足一定条件时：
- 整行背景颜色改变
- 字体颜色改变
- 字体加粗
- 增加删除线
- 当网格的第一列时复选框时，自动选中当前行
- 当网格的第一列时复选框时，不允许选择
在Kendo Grid的dataBound事件中，可以实现上述功能。 示例代码如下：
dataBound: function (e) {
var rows = e.sender.tbody.children();
for (var j = 0; j < rows.length; j++) {
var row = $(rows[j]);
var dataItem = e.sender.dataItem(row);
var age = dataItem.get("AGE");
var cells = row.children();
if (age > 15) {
for (var idx = 0; idx < cells.length; idx++) {
var mytd = cells[idx];
cells[idx].bgColor = "green"; //设置行背景颜色
}
}
if (age < 15) {
for (var idx = 0; idx < cells.length; idx++) {
var mytd = cells[idx];
if (idx == 0) {
var chk = mytd.children[0];
$(chk).prop("checked", true); //设置选择框
}
$(mytd).css("font-weight", "bold"); //设置字体
$(mytd).css("color", "red");//设置字体颜色
$(mytd).css("text-decoration", "line-through");//加删除线
$(mytd).height(100);//设置行高
}
}
}
}