Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大，这里将常用的一些功能总结一下。
Kendo UI Grid 固定列
在使用Gird控件显示数据时，如果数据列过多，会出现横向滚动条，很多情况下，我们希望某些列固定，这些列固定显示，不随滚动条发生变化。这时，可以在数据列上使用locked属性，比如，下面是使用mvvm定义grid的示例，编辑按钮被设置为固定列:
<div id="fieldgrid" class="grid"
data-role="grid"
data-sortable="true"
data-height="580"
data-toolbar="['create']"
data-bind="source: fieldSource"
data-editable='{"mode": "popup" }'
data-columns='[
{"field":"Name","title":"字段名称", "width": "120px"},
{"field":"Title","title":"字段说明", "width": "120px"},
{"field":"DataType","title":"字段类型","values":dsDataType, "width": "120px"},
{"field":"ControlType","title":"控件类型", "values":dsControlType, "width": "120px"},
{"field":"DefaultValue","title":"缺省值", "width": "120px"},
{"field":"Editable","title":"是否可编辑", "width": "80px"},
{"field":"Visible","title":"是否可见", "width": "80px"},
{"field":"DisplayOrder","title":"显示顺序", editor: numberEditor, "width": "80px"},
{"field":"IsCascade","title":"是否级联", "width": "80px"},
{"field":"CascadeSubField","title":"级联下级", "width": "120px"},
{"field":"CascadeParentField","title":"级联上级", "width": "120px"},
{"command": [ "edit", "destroy" ], "width": "180px","locked":"true"}
]'
data-scrollable="true">需要注意的是，1）固定列总是显示在最左边，2）带有固定列网格在初始化过程时，必须是可见的。如果网格在初始化时不可以见，会出现不可预知的问题。比如这种的场景，如果网格在分页中，初始化时是不可见的，那么，界面可能是这样的：
Grid控件创建自定义弹出编辑窗
Kendo UI Grid控件自带弹出窗编辑，只要在数据源中定义schema，就可以自动生成编辑界面，代码如下：
<div class="form container" id="divForm">
<div id="divGrid">
<div id="mygrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="['create']"
data-bind="source: dataSource"
data-editable='{"mode": "popup" }'
data-columns='[
{"field":"Id","title":"ID"},
{"field":"Name","title":"姓名"},
{"field":"Age","title":"年龄"},
{"field":"JoinDate","title":"入职日期","format": "{0:yyyy-MM-dd}"},
{"field":"Sex","title":"性别","template": "#if (Sex==1){# 女 #}else{# 男 #}# "},
{"field":"Married","title":"婚姻状况","template": "#if (Married){# 已婚 #}else{# 未婚 #}# "},
{"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
]'
data-scrollable="false">
</div>
</div>
</div>
<script>
$(document).ready(function () {
var viewModel = kendo.observable({
dsSex: [{ value: 0, text: '男' }, { value: 1, text: '女' }],
dataSource: new kendo.data.DataSource(
{
data: [],
schema: {
model: {
id: "Id",
fields: {
Id: { editable: true, nullable: false },
Name: { validation: { required: true } },
Age: { type: "number" },
Sex: { editable: true },
JoinDate: { type: "date", editable: true },
Married: { type: "boolean", editable: true }
}
}
}
})
});
kendo.bind($("#divForm"), viewModel);
});
</script>自动生成的编辑界面对于基本数据类型的字段够用了，但在实际中，会有更复杂的要求，比如，某些字段需要使用下拉框或者更复杂的控件，或者我们希望字段多列排列，这时，需要用到自定义的模板，上面的网格的自定义编辑模板如下：
<script id="popup_editor" type="text/x-kendo-template">
<div class="form container">
<div class="form-group row">
<label class="col-sm-2 control-label" for="Id">ID</label>
<div class="col-sm-4">
<input type='number' class='k-textbox' data-bind="value: Id" />
<span class="k-invalid-msg" data-for="Id"></span>
</div>
<!--</div>
<div class="form-group row">-->
<label class="col-sm-2" for="Name">姓名</label>
<div class="col-sm-4 ">
<input type='text' name="Name" class='k-input k-textbox k-valid' data-bind="value: Name" required="required" />
<span class="k-invalid-msg" data-for="Name"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" for="Age">年龄</label>
<div class="col-sm-4">
<input type='number' style="" data-role="numerictextbox" class='form-control' data-bind="value: Age" />
<span class="k-invalid-msg" data-for="Age"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" for="val_JoinDate">参加日期</label>
<div class="col-sm-4">
<input data-role="datepicker" data-culture="zh-CN" style="" class='form-control' data-bind="value: JoinDate," />
<span class="k-invalid-msg" data-for="JoinDate"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" for="val_Married">已婚</label>
<div class="col-sm-4">
<input type="checkbox" style="" data-bind="checked: Married," />
<span class="k-invalid-msg" data-for="Married"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label" for="val_Sex">性别</label>
<div class="col-sm-4">
<select data-role="dropdownlist" class='form-control' data-text-field="text"
data-value-field="value" data-bind="source:dsSex,value: Sex">
</select>
<span class="k-invalid-msg" data-for="Sex"></span>
</div>
</div>
</div>
</script>模板使用script标记，类型为text/x-kendo-template，说明是kendo的模板。模板语言就是html，其中的data标记与kendo MVVM一致。模板中有几点需要注意：
模板中需要验证的字段，需要定义name属性，如果不定义，验证信息无法显示
需要定义 用于显示验证信息
如果需要多列显示，需要在页面中定义自定义的样式：