kendo Grid的使用

html中定义div

<div id="grid"></div>

创建一个options

//创建kendo的数据源
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "getUser.do",//服务器链接地址
            contentType : "application/json",
            type : "POST",
            dataType : "json"
        },
        parameterMap : function(options, operation) {
            //此处封装自定义的参数，例如：userId
            options.userId= 1;
            return JSON.stringify(options);
        }
    },
    schema: {
        data: "data",//获取返回的json对象中的data属性的值显示在表格中
        total: "total"//获取返回的json对象中的total属性作为分页中的总数据条数
    },
    pageSize: 15,//每页显示的数据条数
    serverPaging: true//表示由服务器端分页
});
var options = {
    dataSource: dataSource,
    height: 515,
    groupable: false,
    sortable: false,
    resizable: true,
    selectable: "multiple,row",//表格可多选
    pageable: {
        refresh: true,//表格左下角会出现刷新按钮，点刷新会重新请求服务器
        buttonCount: 10,//分页按钮的数量
        pageSizes: [10, 15, 20]//每页显示的数据条数的选择
    },
    change: kendoGridChange,//表格改变事件，例如：选中,见下面kendoGridChange方法
    columns: [{title: "用户编号", field: "userId", width: 65}
            , {title: "用户名", field: "userName", width: 70, template: "#=userName==null?'--':userName#"}]//表格的列定义
};

创建kendoGrid

//判断kendoGrid是否已定义
var dataDisplayGrid = $("#grid").data("kendoGrid");
if (dataDisplayGrid) {
    //销毁kendoGrid,可用来在一个表格中显示不同类型的数据，比如：点击切换按钮从服务器加载不同的数据，如：User,Student,columns不一样的情况。
    $('#grid').kendoGrid('destroy').empty();
}
//创建kendoGrid
$("#grid").kendoGrid(options);

kendoGrid全选

$("#grid tr").addClass("k-state-selected");
$("#grid").data("kendoGrid").trigger("change")

kendoGrid取消所有选中项

$("#grid").data("kendoGrid").clearSelection();

kendoGrid选择事件

function kendoGridChange(e){
    var cellId = e.sender._cellId;
    //获取gridName
    var gridName = cellId.substring(0, cellId.indexOf("_"));
}

kendoGrid获取选中项

var dataItems = [];//存储选中的项，对象数组（每一行数据所对应的对象）
var dataItemGrid = $("#grid").data("kendoGrid");
if (dataItemGrid === undefined) {
    return dataItems;
}
dataItemGrid.select().each(function (i) {
    dataItems[i] = dataItemGrid.dataItem($(this));
});