（3）kendo UI使用基礎介紹與問題整理——Grid問題/ Checkbox selection

      kendo UI的grid提供了選中行的功能，先上一張官網的截圖：

一、簡單說明  

    selectable 可選參數

• "row" - the user can select a single row. 行
• "cell" - the user can select a single cell. 項
• "multiple, row" - the user can select multiple rows. 多行
• "multiple, cell" - the user can select multiple cells. 多項

     

     通常使用選擇的時候，用法是 selectable: true 這個時候可以使用行選中。

 

     上面說的選擇是變色的那種選中。如何需要的是checkbox選中，那么需要設置

     persistSelection: true,

     columns:[{ selectable:true}]

 

     行選中和checkbox選中不可以同時使用，會存在沖突，實際需要的時候需要自定義，在我做的項目中需要兩種功能並存的時候，使用的是自定義行選中，checkbox使用grid提供的方法。

二、行選中和checkbox選中並存時的處理

      下面是我自定義的點擊行 然后選中行的事件

//點擊行選中事件
$("#grid").on("click", "tbody tr[role='row'] td", function () {
    if ($(this).html().indexOf("k-checkbox") < 0) {//判斷點擊項是不是checkbox，不是的情況下再進行行選中的操作
        $("#grid tr").removeClass("chooseRow");
        $(this).parent().addClass("chooseRow"); //添加行選中的樣式
        var index = $(this).parent().index();   //獲取選中行的下標
        var selectedId = $("#grid").data("kendoGrid").dataSource.at(index).Id;  //獲取選中行的ID
    }

});

    可以從代碼中了解到，是通過chooseRow這個class標志選中行的，同時我給帶有chooseRow的行設置了樣式。

   上面實現的是行選中的單選。也可以自己通過對上面方法的修改實現多選。

 

三、checkbox實現單選

         實現這個功能，首先要去掉全選的checkbox，代碼如下：

//加載grid列表加載的后面
$("input[aria-label='Select all rows']").next(".k-checkbox-label").remove();
$("input[aria-label='Select all rows']").remove();

      然后在點擊checkbox的時候做判斷，實現只能選中一行

// 單選
$(document).on("click", "#grid tbody tr[role='row'] td", function () {
        var index = $(this).parent().index();   //獲取選中行的下標
        var grid = $("#grid").data("kendoGrid");
        grid.select("tr:eq(" +index + ")");
        var localCheck = $("#grid").find(".k-checkbox:checked"); 
        if(localCheck.length > 1) {
           grid.clearSelection();
           grid.select("tr:eq(" +index + ")");
        }
});

 

四、selection相關方法

（1）指定某一行進行選中的方法

//方法1：
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(0)");

//方法2：
var grid = $("#grid").data("kendoGrid");
var uid = grid.dataSource.at(0).uid;
grid.select("tr[data-uid='" + uid + "']");

 

 （2）輸出選中數據的方法

//方法一：
var grid = $("#grid").data("kendoGrid");
grid.select();    //輸出選中行的數據（當前頁）

//方法二：
var grid = $("#grid").data("kendoGrid");
console.log(grid.selectedKeyNames());        //輸出選中行的關鍵字（支持分頁） 注： 要求這個grid必須設置schema的model，輸出的選中項數據就是model設定的值，如mode設置的是id，那么輸出的值就是選中行的id值。

 

 （3）清除選中項

//方法一：
var grid = $("#grid").data("kendoGrid");
grid.clearSelection();    //只能清除當前頁的選中項

//方法二：
var grid = $("#grid").data("kendoGrid");
grid._selectedIds={};    //可以清除所有頁的選中項

 不過在實際應用中，會發現上面清除選中項的“方法二”，存在無法清除當前頁面選中樣式的問題，所以，我配合使用了grid.clearSelection()。