项目中用到最多的组件是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的工具栏中，所以采用了自定义搜索框，然后将输入的搜索条件拼成一个对象数组，然后再传过去。
原文地址：https://www.cnblogs.com/lindaCai/p/8251255.html
时间： 2024-11-06 15:16:54