前端框架之：kendoui笔记之 grid及dataSource 数据源

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%" }
                ]
            });