Kendo UI Grid 使用总结
Posted 寻找无名的特质
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-
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\' 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" 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" 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属性,如果不定义,验证信息无法显示
- 需要定义 用于显示验证信息
- 如果需要多列显示,需要在页面中定义自定义的样式:
<style>
.k-edit-form-container
width: 700px;
.k-edit-form-container div
box-sizing: border-box;
.k-edit-form-container label
box-sizing: border-box;
</style>
需要将相关元素的box-sizing 设置为border-box
为Grid创建详细显示信息
KendoUI Grid支持在网格行中显示该行数据的详细信息,示例界面如下:
详细信息部分是在Grid控件的detailInit事件中创建的,如果采用mvvm方式定义,示例代码如下:
<div id="functiongrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="[\'create\']"
data-bind="source: functionSource, events: dataBound: fn_dataBound "
data-editable=\'"mode": "popup" \'
data-detail-init="viewModel.functiongrid_detailInit"
data-detail-template=\'functiongridsubtemp\'
data-columns=\'[
"field":"FunctionName","title":"名称",
"field":"Desc","title":"说明",
"field":"ExecuteUrl","title":"地址",
"field":"ViewName","title":"函数类型名",
"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"
]\'
data-scrollable="false"
>
</div>
上面的代码中,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());
模板的定义如下:
<script id="functiongridsubtemp" type="text/x-kendo-template">
<div class="functionTab">
<ul>
<li >输入参数</li>
<li>输出参数</li>
<li>附加属性</li>
</ul>
<div>
<div class=\'inparagrid\'></div>
</div>
<div>
<div class=\'outparagrid\'></div>
</div>
<div>
<div class=\'expropgrid\'></div>
</div>
</div>
</script>
这个模板相对复杂,在一个分页控件中显示三个网格,用于显示函数的输入参数、输出参数和附加参数。需要注意的是,模板中不能用id进行标记,因为在页面中,每一行都需要使用模板创建一组元素,在模板中定义id,不能保证id唯一。因此在函数中,需要使用class来获取相关的元素。
Grid弹出编辑窗下拉框控件
如果在Grid弹出窗中有下拉框控件,可以使用values属性直接绑定到数组,在弹出编辑窗中自动生成下拉框,示例代码如下:
<div id="fieldgrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="[\'create\']"
data-bind="source: fieldSource"
data-editable=\'"mode": "popup" \'
data-columns=\'[
"field":"Name","title":"字段名称",
"field":"Title","title":"字段说明",
"field":"DataType","title":"字段类型","values":dsDataType,
"field":"ControlType","title":"控件类型", "values":dsControlType,
"field":"DefaultValue","title":"缺省值",
"field":"Editable","title":"是否可编辑",
"field":"Visible","title":"是否可见",
"field":"DisplayOrder","title":"显示顺序", editor: numberEditor,
"field":"IsCascade","title":"是否级联",
"field":"CascadeSubField","title":"级联下级",
"field":"CascadeParentField","title":"级联上级",
"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"
]\'
data-scrollable="false">
上面的代码使用了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,就可以自动生成编辑界面,代码如下:
<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\' 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" 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" 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属性,如果不定义,验证信息无法显示
- 需要定义 用于显示验证信息
- 如果需要多列显示,需要在页面中定义自定义的样式:
<style>
.k-edit-form-container
width: 700px;
.k-edit-form-container div
box-sizing: border-box;
.k-edit-form-container label
box-sizing: border-box;
</style>
需要将相关元素的box-sizing 设置为border-box
Grid弹出编辑窗自定义编辑控件
上节介绍了创建自定义的弹出编辑窗体,这种方法的好处是可以完全控制编辑窗体中的各个控件,但也有些麻烦,如果只需要修改其中的几个控件,完全重写一个编辑窗体就显得没有必要了。这时,可以为单个编辑控件进行定制。示例代码如下:
<div id="commandgrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="[\'create\']"
data-bind="source: commandSource"
data-editable=\'"mode": "popup" \'
data-columns=\'[
"field":"Name","title":"名称",
"field":"Title","title":"文本",
"field":"FunctionName","title":"函数名称",
"field":"DisplayOrder","title":"显示顺序", editor: numberEditor,
"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"
]\'
data-scrollable="false">
</div>
上面的代码使用了mvvm的定义方式,其中DisplayOrder字段使用了自定义的editor,numberEditor是一个自定义的函数,在这个函数里创建自定义的控件并添加到container中:
function numberEditor(container, options)
$(\'<input name="\' + options.field + \'"/>\')
.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);//设置行高
本文来自博客园,作者:寻找无名的特质,转载请注明原文链接:https://www.cnblogs.com/zhenl/p/15920798.html
以上是关于Kendo UI Grid 使用总结的主要内容,如果未能解决你的问题,请参考以下文章