kindoui grid 初始化及属性说明
顺序可以不一样但尽量不要错
$("#dg").kendoGrid({
allowCopy:boolean ,//是否启用表格复制
columnResizeHandleWidth:Number, //设置列可调整的宽度大小
filterable:Boolean,//是否在表头启用筛选功能
dataSource:数据源,//grid数据源
columns:[{
field:String,//列对应的数据源中的字段名
title:String, //列名
width:Number //列宽度
template: String 或 function(), //列的显示样式或过滤数据
attributes: Object,//列class 和 style属性
editor: function,//
filterable:Boolean,//是否在表头启用筛选功能
command: String 或数组,//设置列按钮
}]
editable: Boolean ,//是否可编辑
height: Number //定义表格的高度
resizable:Boolean,//是否可拖动列宽
scrollable : Boolean,//是否出现滚动条
selectable :Boolean,//表格是否可选中
reorderable:Boolean,//是否可拖动列改变顺序
pageable: Boolean,//是否启用分页
pageSize:Number,//设置表格显示行数
与上面对应使用(pageSizes:[{
numeric:Boolean //是否显示分页页码图标
alwaysVisible:boolean //是否在列表数据没有达到分页时显示分页组件
input: boolean //是否显示跳转页码输入框
previousNext:boolean //是否显示上一页、下一页、首页、尾页等图标
refresh:boolean //是否显示刷新按钮
info: boolean //是否显示分页数据
messages: Object //定义分页组件的消息提示格式及文本信息
}])
sortable:boolean //是否启用表头排序
toolbar :[],//列表上方的按钮
dataBound: function (e) {
//设置字体颜色或行背景色
$.each(dataSource.data(), function (i, v) {
if (v.IsUrgent == "0") {
$('tbody > tr[data-uid="' + v.uid + '"] > td').css("background", "red");
}
})
}
});
grid 双击事件:
grid.on('dblclick', function () {
var row = grid.data("kendoGrid").select();//获取被选中行
var data = grid.data("kendoGrid").dataItem(row);//解析选中行的数据
kendo.alert("单号" + data.id+ "被双击,并发送请求(携带参数)给了地址:"+url);
});
grid数据源属性设置
var dataSource = new kendo.data.DataSource({
aggregate:[],//列的运算:平均值average,最大值max、最小值min、总数count、总和值sum
autoSync:boolean, //true 同步请求,false 异步请求
transport:{
read: {
type: "POST",
url: 请求地址
dataType: "json",
},//数据源读取数据的远程配置。
create:{},//数据源创建数据的远程配置。
update:{} //数据源更新数据的远程配置。
destroy:{}//数据源删除数据的远程配置。
}
parameterMap: function (options, operation) {
var parameter = {
page: options.page,
rows: options.pageSize,
};
return parameter;
}//设置请求参数
page:Number,//页号
pageSize:Number,//行数
schema:{
data: function (d) {
//对下载的数据的一些操作
return d.rows;
},
total: function (d) {
return d.total;
}
}//数据解析
group://数据分组
})
布局方向
垂直:vertical
水平:Horizontal
分隔
<div id="id" style="height: 100%; width: 100%">
<div id="top_pane"> </div>
<div id="bottom_pane"></div>
</div>
$(document).ready(function () {
$("#id").kendoSplitter({
orientation: "vertical",//方向
panes: [
{ collapsible: false, size: "80%" },
{ collapsible: false, size: "20%" }
]
});