kendoUI学习 KendoGrid相关属性说明

kendoUI-kendoGrid属性说明：

//数据源设置
var dataSource = new kendo.data.DataSource({
      transport: {
      	//表格读取数据接口地址
          read: {
              url: "readUrl",
              type: "post",
              dataType: "json",
              cache: false
          },
          //表格编辑更新数据接口地址
          update: {
              url: "updateUrl",
              type: "post",
              dataType: "json",
              contentType: "application/json"
          },
          //表格编辑新增数据接口地址
          create: {
              url: "createUrl",
              type: "post",
              dataType: "json",
              contentType: "application/json"
          },
          //表格编辑删除数据接口地址
          destroy: {
              url: "deleteUrl",
              type: "post",
              dataType: "json",
              contentType: "application/json"
          },
          parameterMap: function (options, operation) {
          	//这里是最终发送到接口的参数处理方法
              if (operation == "read") {
                  return options;
              }
              return kendo.stringify(options.models[0]);
          }
      },
      requestEnd: function (e) {
      //前端列表请求完成回调的方法，可以在这里进行新增编辑删除后的列表刷新操作，或者对非指定格式的返回信息进行进一步解析
      	//var res  = e.response;
      	//if(!res.success){
      	// alert(res.msg);
      	//}
          var type = e.type;
          if ("read" != type) {
              this.read();
          }
      },
      schema: {
      	total:"total",//列表远程分页获取总条数的字段
      	data:"list",//列表远程分页获取数据的字段--也可以使用回调函数进行特殊处理
      	//data:function(e){
// if(e.success){
// 		return e.data;
// }
//},
          model: {
              id: "id",
              fields: {
              //列表属性定义--一般在使用kendo自带的编辑新增方法时有效，自定义编辑时这里的属性没有意义
                  name: {type: "string", validation: {maxLength: 50}},//可以设置字段长度
                  sex: {type: "string"},
                  createTime: {type: "date"},
                  age: {type: "number"}
              }
          }
      },
      pageSize: 20,
      serverPaging: true,//开启远程分页-默认不开启
      serverFiltering: true //是否开启远程过滤
  });

$("#grid").kendoGrid({
    dataSource: dataSource,
    //前端分页显示设置-不影响后端分页参数
    pageable: {
        pageSize: pageSize || 20,
        pageSizes: pageSizes || [20, 40, 60],
        numeric: true,
        buttonCount: 5,
        refresh: true,
        messages: {
            empty: "无数据",
            display: "显示条目 {0}-{1} 共 {2} 条",
            page: "第",
            of: "页 共{0}页",
            itemsPerPage: "条/页"
        }
    },
    //前端过滤时根据配置的model里面的字段属性进行相应的过滤条件输入
    filterable:{
     extra: false,
     operators: {
         string: {
             contains: "包含"
         },
         date: {
             eq: "等于",
             gt: "大于",
             lt: "小于"
         },
         number: {
             eq: "等于",
             gt: "大于",
             lt: "小于"
         }
     }
 	},
    sortable: false,
    resizable: true,
    selectable: "row",
    height: 800,
    filterMenuInit: function (e) {
    	//此处设置列表的表头过滤的下拉数据源-一般是该字段属于数据字典类型固定值筛选；
        var dataSource = this.dataSource;
    if (e.field == "sex") {
            initMultiSelectFilterSex.call(this, e);
        }
    },
    dataBound: function (e) {
    //数据绑定时的回调方法，一般处理一些特定状态下的数据显示
        $("#grid table tbody tr").each(function () {
            var row = $(this).is("tr") ? $(this) : $(this).parents("tr");
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(row);
           
        });
    },
    //editable: {
      //  mode: "inline",//行内编辑
      //  confirmation: false
    //},
    editable: {
        mode: "popup",//弹出层编辑
         window: {
             title: "新增",
             animation: false,
             width: 700,
             open: function(e){
					//点击编辑或者新增时弹出层弹出后的回掉方法-可以在这里设置需要处理的表单字段类型；比如设置性别字段为下拉框
				$("input[name='sex']").kendoDropDownList({
	               height: 250,
	                dataTextField: "name",
	                dataValueField: "value",
	                noDataTemplate: '无数据',
	                index: 0,
	                dataSource:  [
	                    {text: "男", value: "1"},
	                    {text: "女", value: "0"}
	                ]
	            });
			 },
         }
     },
    //数据列表设置
    columns: [
    	......,
    	 {
             title: "操作",
              width: 220,
              headerAttributes: {style: "text-align: center;"},
              attributes: {style: "text-align: center;"},
              command: ['edit','destroy']
          }
    ]
});
function initMultiSelectFilterSex(e) {
    var popup = e.container.data("kendoPopup");
    var dataSource = this.dataSource;
    var field = e.field;

    var helpTextElement = e.container.children(":first").children(":first");
    helpTextElement.nextUntil(":has(.k-button)").remove();

    var element = $("<select></select>").insertAfter(helpTextElement).kendoDropDownList({
        dataSource: [{
            value: 1,
            text: "男"
        }, {
            value: 0,
            text: "女"
        }],
        dataTextField: "text",
        dataValueField: "value"
    });

    e.container.find("[type='submit']").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        var kendoDropDownList = element.kendoDropDownList();
        var editorValue = kendoDropDownList.val();
        var operator = function (item, value) {
            var found = true;
            for (var i = 0; i < editorValue.length; i++) {
                if (editorValue.indexOf(item)) {
                    found = false;
                }
            }
            return found;
        };

        dataSource.filter({
            operator: operator,
            field: "sex"
        });
        popup.close();
    })
}