项目中用到最多的组件是Grid，与它相关的问题也是最多的，下面我会成几个文章来说明。
这篇文章会介绍一些相关的常用参数。
一、demo及基本的参数说明
简单代码范例demo：
<div id="grid"></div> <script> $(document).ready(function() { var data=[{ id:"1", cause:"包装破损", quantity:"5",description:"" }, { id:"2",cause:"包装破损", quantity:"2",description:"" }]; //json数据 本地 $("#grid").kendoGrid( dataSource: { //数据源 data:data, schema: { model: { id: "Id" } } }, persistSelection: true, //允许选择 columns: [ //列 { selectable: true, //选择列 width: "50px" //列宽 }, { field: "id", //数据源中id的数据 title: "id", //列名 hidden: true //隐藏此列 }, { field: "cause", //数据源中cause的数据 title: "差异原因" }, { field: "quantity", title: "差异数量" }, { field: "description", title: "差异描述" } ] }).data("kendoGrid"); }); </script>
下面是项目中用到的grid列表的代码（带分页，带工具条）：
//html <div id="grid"></div> <script type="text/x-kendo-template" id="template"> <div class="toolbar"> <div class="form-group"> <label class="label-inline"单号：</label> <input type="text" id="Code" class="form-control input-ssm" spellcheck="false" maxlength="30" /> </div> <div class="form-group"> <label class="label-inline">创建开始时间：</label> <input type="text" id="startTime" class="form-control input-ssm" /> </div> 到 <div class="form-group"> <input type="text" id="endTime" class="form-control input-ssm" /> </div> <button class="btn-cy btn-search" onclick="search()"><i class="fa fa-search"></i>查询</button> <button class="btn-cy btn-search" onclick="reset()"><i class="fa fa-refresh"></i>重置</button> </div> </script> //JS <script> $("#grid").kendoGrid({ dataSource: { transport: { //请求数据 read: { type: "post", url: "/GetList", dataType: "json" } }, pageSize: 10, //每页数据条数 serverPaging: true, //服务器提供分页 schema: { data: function (d) { return d.data; }, total: function (d) { return d.total; }, model: { id: "Id" } } }, dataBound: function () { //数据加载后执行的事件 if ( !this.dataSource.data().length) { var clos = this.dataSource.options.fields.length + 1; this.tbody.append(‘<tr class="no-data"><td colspan="‘ + clos + ‘">没有找到相关数据</td></tr>‘); } else { this.tbody.find(".no-data").remove(); } }, excel: { //excel allPages: true //设置导出所有页面，默认导出excel的当前页面 }, pageable: true, //分页 toolbar: kendo.template($("#template").html()), //工具栏 persistSelection: true, //是否可以多选 pageable: { refresh: true, pageSizes: false, buttonCount: 5, input: true, numeric: false, messages: { display: "{0} - {1} 共 {2} 条数据", empty: "没有数据", of: "共<span class=‘z-allPage‘>{0}</span>页 ", page: " 到第", first: "第一页", previous: "前一页", next: "下一页", last: "最后一页", refresh: "刷新" } }, columns: [ { selectable: true, width: "50px" }, { template: "<a href=‘/Detail/#: Id #‘> #: Code # </a>", field: "Code", title: "编号", width: 230 }, { field: "Name", title: "名称", minResizableWidth: 220, headerAttributes: { style: "text-align: left;" //列标题居左 }, attributes: { style: "text-align: left;" //列内容居左 } }, { field: "TypeStr", title: "类型", width: 100, }, { field: "StateName", title: "国家", width: 100 }, { field: "ProvinceName", title: "省份", width: 100 }, { field: "CityName", title: "城市", width: 100 }, { field: "RegionStr", title: "所属区域", width: 90 }, { field: "LastModifierUserName", title: "最后修改人", width: 90 }, { field: "LastModificationTimeStr", title: "修改时间", width: 120 }, { field: "StatusStr", title: "状态", width: 70 }, { template: ‘<div class="btn-group">\ //可以自定义列的显示 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">操作<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="/Manage/Warehouse/Detail/#: Id #">查看</a></li> <li><a href="/Manage/Warehouse/CreateOrEditModal/#: Id #">修改</a></li> <li role="separator" class="divider"></li> <li><a href="javascript:void(0)" onclick="SaveGridExcel(#: Id #,\‘档案_编号#: Code #\‘)">导出</a></li> </ul></div>‘, title: ‘操作‘, width: ‘100px‘ } ] }); </script>
下面对上面的gird用到的一些方法所涉及到的一些问题进行说明。
1 dataBound
这个参数能够对grid加载时进行一些处理，如上面用到的“在表格没有数据的情况下给出提示”，并且可以直接通过this来获取当前表格的grid对象。
除了上面用到的一个demo，还可以在databound里添加一些自己需要的其他功能，如给表格加动态的行号，还有给表格里的一些内容添加一些初始化组件等。
2 columns的template
它是自定义显示的列，上面使用的是 template: "<a href=‘/Detail/#: Id #‘> #: Code # </a>", 这是给这一列显示的数据添加了一个链接；
还可以这样使用：
template: function (e) {
if (e.IsHave== true) {
return "是";
}
else if (e.IsHave == false) {
return "否";
}
}
其他的参数应该会从上面的demo中理解使用方法。
========================================================================
二、grid关于data和dataSource的相关方法
项目中会涉及到通过本地js读取grid列表中数据的方法，不过这里目前发现是存在一个问题，就是分页显示分时候，没有办法通过js获取到全部data，只能获取到当前页的data，所以下面只对不分页的情况进行整理。
演示grid demo：
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30},
{ name: "John Doe", age: 33},
]
});
1、data
$("#grid").data("kendoGrid").dataSource.data();
2、data - 取数据
取出某一行数据
//方法1： $("#grid").data("kendoGrid").dataSource.data()[0]; : //方法2： $("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)"); //方法3： $("#grid").data("kendoGrid").dataSource.at(0);
取出某一行数据中的某一列：
//方法1： $("#grid").data("kendoGrid").dataSource.data()[0].Id; //方法2： $("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)").Id; //方法3： $("#grid").data("kendoGrid").dataSource.at(0).Id;
3、data - 增加
添加一条数据：
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({ name: "John Doe", age: 33 }); //add只能添加一条数据
4、data - 修改
修改某行数据：
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0); //取第一条数据
data.set("name", "John Doe"); //修改第一条数据
5、data - 删除
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0); //取第一条数据
grid.dataSource.remove(data); //删除第一条数据
6、dataSource数据源 - 修改
var dataSource = new kendo.data.DataSource({
data: [
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
说明：需要先创建一个DataSource，然后通过setDataSource方法进行设置。
dataSource也可以这样设置
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "post",
url: "/getData",
dataType: "json"
}
},
batch: true,
schema: {
data: function (d) {
return d.data;
},
model: { id: "Id"}
},
serverFiltering: true,
filter: sqlSource
});
7、total：统计grid列表数据的总条数
方法：
$("#grid").data("kendoGrid").dataSource.total()
说明：统计grid列表数据的总条数（包含所有页面的数据）
注：$("#grid").data("kendoGrid").dataSource.data().length 这条语句也能统计grid数据的条数，但是仅限于当前页面，不包含所有页面。因此这种方法仅适用于不带分页的场景。
$("#grid").data("kendoGrid").dataSource.total()这种方法相对来说更具优势。
三、filter 自定义查询条件
注：需要配合后台来实现此功能
用法demo：
var Code = $("#Code").val().replace(/\s+/g, ""); var Name = $("#Name").val().replace(/\s+/g, ""); var dataSource = []; //dataSource是json数组，用来放查询的条件 if (Code != "") { dataSource.push({ field: "Code", operator: "eq", value: Code }); } if (Name != "") { dataSource.push({ field: "Name", operator: "contains", value: Name }); } $("#grid").data("kendoGrid").dataSource.filter(dataSource);
说明，由于项目的原因，kendo自身基础的filter是在列表中的那种，而是放在kendo的工具栏中，所以采用了自定义搜索框，然后将输入的搜索条件拼成一个对象数组，然后再传过去。
