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));
});