首页 > 代码库 > KendoUI:Grid控件的使用
KendoUI:Grid控件的使用
1.创建和基本选项配置
有两种创建grid的方式,我这里使用已存在的html div标签,然后再将div元素kendo化.
<div id=”grid”></div>
<script th:inline=”javascript”>
$(function(){
$('#grid') .kendoGrid({
dataSource : dataSource, //数据源加载
pageable : { //分页信息选项设置
input : true,
numeric : false,
refresh: true,
pageSizes: true,
buttonCount: 5
},
sortable : true, //可排序
height : 430, //表格高度设置
toolbar : [ //工具条，可使用模板自定义
{
name : "create",
text : "添加"
},
{
template :
kendo.template($("#pageStyleSkinTemplAddTemplate").html())
},
{
template :
kendo.template($("#pageStyleSkinQueryTemplate").html())
}
],
columns : [ //表格列设置
{
field: "fileName", //dataSource中与data对应的域（field）的名称
title: "风格名称", //表头名称
width: 200 //列宽
},
{
field: "updaterId",
title: "更新人",
width: 100
},
{
field: "updateTime",
title: "上传时间",
width: 200,
format: "{0: yyyy-MM-dd HH:mm:ss}" //格式化时间
},
{
command : [ //对行数据的操作
{
text:"编辑", //名称
click: editFunction //自定义点击事件
},
{
text:"下载",
click: loadFunction
},
{
name : "destroy", //调用dataSource中的删除方法
text : "删除"
}
],
title : "操作", //表头名称
width : "250px" //列宽
}
],
editable :
{
mode : "popup", //弹出窗口的编辑模式（行内编辑：”inline”）
},
messages : //分页条部分显示中文信息的设置
{
display : "Showing {0}-{1} from {2} data items",
empty : "No data"
}
});
});
</script>2.基本CRUD操作
(1)假设数据来源为ajax请求,我这里不使用kendo封装好的ajax请求,使用灵活的自己写的ajax请求.
var codeGridSource = new kendo.data.DataSource(
{
transport : {
read : function(options) {
var map = {};
if (options.data.take)
map.take = options.data.take;
if (options.data.skip)
map.skip = options.data.skip;
if (options.data.page)
map.page = options.data.page;
if (options.data.pageSize)
map.pageSize = options.data.pageSize;
if (!options.data.filter){
}
else
{
options.data.filter = {
logic : "and",
filters : [
{
field : "codeName",
value : $("#codeName").val()
},
{
field : "codeType",
value : $("#codeType").val()
},
{
field : "codeTypeName",
value : $("#codeTypeName").val()
},
{
field : "codeCode",
value : $("#codeCode").val()
}
]};
var fi1 = {};
var fi2 = [];
var j = 0;
$.each(options.data.filter.filters, function(i,element) {
if (options.data.filter.filters[i].value)
{
fi2[j] = options.data.filter.filters[i];
j++;
}
});
if (fi2.length > 0)
{
fi1.filters = fi2;
fi1.logic = options.data.filter.logic;
map.filter = fi1;
}
}
//排序
if (!options.data.sort)
{
}
else
{
options.data.sort = [
{
field : $("#codeOrder0").val(),
dir : $("#codeDir0").val()
},
{
field : $("#codeOrder1").val(),
dir : $("#codeDir1").val()
}
];
var fi3 = [];
var j = 0;
$.each(options.data.sort, function(i,element){
if (options.data.sort[i].field) {
fi3[j] = options.data.sort[i];
j++;
}
});
if (fi3.length > 0)
{
map.sort = fi3;
}
}
$.ajax({
url : "code/single-list.json",
dataType: "json",
data:{
models : kendo.stringify(map)
},
type:"POST",
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
update : function(options) {
$.ajax({
url : "code/single-update.json",
dataType: "json",
data:{
models : kendo.stringify(options.data.models)
},
type:"POST",
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
destroy : function(options) {
$.ajax({
url : "code/delete.json",
dataType: "json",
data:{
models : kendo.stringify(options.data.models)
},
type:"POST",
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
create : function(options) {
$.ajax({
url : "code/single-create.json",
dataType: "json",
data:{
models : kendo.stringify(options.data.models)
},
type:"POST",
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
}
},
batch : true,
pageSize : 8,
serverPaging : true,
serverSorting : true,
serverFiltering : true,
schema : {
errors: function(response)
{
return response.error;
},
data : "list",
total : "total",
model : {
id : "id",
fields :
{
codeIndex:
{
editable : true,
type:"number",
defaultValue: 0,
validation:{
required:true,
min:0
}
},
codeCode :
{
editable : true,
type:"string",
validation:
{
codeCodevalidation: function (input)
{
if (input.is("[name=codeCode]") && $.trim(input.val()) == "" )
{
input.attr("data-codeCodevalidation-msg", "请输入业务代码！");
input.css("border-color","red");
return false;
}
else{
input.css("border-color"," #94C0D2");
}
return true;
}
}
},
codeName :
{
editable : true,
type:"string"
},
codeType :
{
editable : true,
type:"string",
validation:
{
codeTypevalidation: function (input)
{
if (input.is("[name=codeType]") && $.trim(input.val()) == "")
{
input.attr("data-codeTypevalidation-msg", "请输入代码类型！");
input.css("border-color","red");
return false;
}
else{
input.css("border-color"," #94C0D2");
}
return true;
}
}
},
codeTypeName:
{
editable : true,
type:"string"
}
}
}
},
error: function(e) {
alert(e.errors); // displays "Invalid query"
codeGridSource.cancelChanges();
}
});(2)使用kendo自带的封装好的ajax请求来实现.var dataSource = new kendo.data.DataSource(
{
transport : {
read : {
url : "xxx.json", //定义查询url
type : "POST"
},
create : {
url : "xxx.json", //定义新增url
type : "POST"
},
update : {
url : "xxx.json", //定义修改url
type : "POST"
},
destroy : {
url : "xxx.json", //定义删除url
type : "POST"
},
parameterMap : function(options,operation) { //定义提交给后台携带的参数
var map = {};
if (operation !== "read") {
return {
models : kendo.stringify(options.models) //查询操作时返回的参数
};
};
if (options.take)
map.take = options.take;
if (options.skip)
map.skip = options.skip;
if (options.page)
map.page = options.page;
if (options.pageSize)
map.pageSize = options.pageSize;
if (!options.filter) {
}
else
{
//设置查询条件和连接符
options.filter = {
logic : "and", //定义查询条件间的连接符
filters : [
{
field : "startTime",
value : $("#startTime").val() //查询条件的值的取值
},
{
field : "endTime",
value : $("#endTime").val()
},
{
field : "fileName",
value : $("#fileName").val()
},
]};
var fi1 = {};
var fi2 = [];
var j = 0;
$.each(options.filter.filters, function(i,element) {
if (options.filter.filters[i].value)
{
fi2[j] = options.filter.filters[i];
j++;
}
});
if (fi2.length > 0)
{
fi1.filters = fi2;
fi1.logic = options.filter.logic;
map.filter = fi1;
}
}
if (!options.sort)
{ }
else
{
//排序 选项的设置
options.sort = [
{
field : $("#pageStyleSkinOrder0").val(),
dir : $("#pageStyleSkinDir0").val()
},
{
field : $("#pageStyleSkinOrder1").val(),
dir : $("#pageStyleSkinDir1").val()
}
];
var fi3 = [];
var j = 0;
$.each(options.sort, function(i,element){
if (options.sort[i].field) {
fi3[j] = options.sort[i];
j++;
}
});
if (fi3.length > 0)
{
map.sort = fi3;
}
}
//操作为查询时提交给后台的参数
if (operation === "read")
{
return {
models : kendo.stringify(map)
};
}
}
},
batch : true, //可批量操作
pageSize : 8, //每页显示条数设置
serverPaging : true, //支持分页功能
serverSorting : true,//支持排序功能
serverFiltering : true, //支持查询功能
schema : {
errors: function(response)
{
return response.error; //错误信息显示
},
data : "list", //定义数据来源
total : "total", //页码总数
model : {
id : "id", //id设置
fields :
{
//根据data中对象的字段来获取要获取的字段的值
fileName :
{
editable : true, //设置为可编辑
validation : //校验：不能为空
{
required : true
}
},
updateTime:
{
type:"date" //设置字段类型
}
}
}
},
error: function(e) { //显示error信息
alert(e.errors);
dataSource.cancelChanges();
}
});KendoUI:Grid控件的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。