（2）kendo UI使用基礎介紹與問題整理——Grid問題/demo、參數、data、filter等

    項目中用到最多的組件是Grid，與它相關的問題也是最多的，下面我會成幾個文章來說明。

    這篇文章會介紹一些相關的常用參數。

 

一、demo及基本的參數說明

   簡單代碼范例demo：

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

    <script>
       $(document).ready(function() {
       var data=[{ id:"1", cause:"包裝破損", quantity:"5",description:"" },
                 { id:"2",cause:"包裝破損", quantity:"2",description:"" }];  //json數據 本地
       $("#grid").kendoGrid(
          dataSource: {                        //數據源                                                                      
            data:data,           
            schema: {
                model: { id: "Id" }       
            }
        },
        persistSelection: true,              //允許選擇
        columns: [                                //列  
                     {
                         selectable: true,             //選擇列
                         width: "50px"                 //列寬
                     }, {
                         field: "id",                       //數據源中id的數據    
                         title: "id",                        //列名    
                         hidden: true                   //隱藏此列     
                     }, {
                        field: "cause",                 //數據源中cause的數據   
                        title: "差異原因"
                    },  {
                        field: "quantity",
                        title: "差異數量"
                    }, {
                        field: "description",
                        title: "差異描述"
                    }
        ]
    }).data("kendoGrid");

   });
    </script>

 

下面是項目中用到的grid列表的代碼（帶分頁，帶工具條）：

//html

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

<script type="text/x-kendo-template" id="template">
　　<div class="toolbar">
　　　　<div class="form-group">
　　　　　　<label class="label-inline"單號：</label>
　　　　　　<input type="text" id="Code" class="form-control input-ssm" spellcheck="false" maxlength="30" />
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label class="label-inline">創建開始時間：</label>
　　　　　　<input type="text" id="startTime" class="form-control input-ssm" />
　　　　</div>
　　　　　　到
　　　　<div class="form-group">
　　　　　　<input type="text" id="endTime" class="form-control input-ssm" />
　　　　</div>
　　　　<button class="btn-cy btn-search" onclick="search()"><i class="fa fa-search"></i>查詢</button>
　　　　<button class="btn-cy btn-search" onclick="reset()"><i class="fa fa-refresh"></i>重置</button>
　　</div>
</script>



//JS

<script>
$("#grid").kendoGrid({
        dataSource: {
            transport: {                                    //請求數據       
                read: {                                       
                    type: "post",
                    url: "/GetList",
                    dataType: "json"
                }
            },
            pageSize: 10,                         //每頁數據條數      
            serverPaging: true,                //服務器提供分頁  
            schema: {
                data: function (d) { return d.data; },
                total: function (d) { return d.total; },                          
                model: { id: "Id" }
            }
        },
        dataBound: function () {                                    //數據加載后執行的事件 
            if ( !this.dataSource.data().length) {               
                var clos = this.dataSource.options.fields.length + 1;
                this.tbody.append('<tr class="no-data"><td colspan="' + clos + '">沒有找到相關數據</td></tr>');
            } else {
                this.tbody.find(".no-data").remove();
            }
        },
        excel: {                     //excel
            allPages: true         //設置導出所有頁面，默認導出excel的當前頁面
        },
        pageable: true,            //分頁
        toolbar: kendo.template($("#template").html()),           //工具欄
        persistSelection: true,                                   //是否可以多選
        pageable: {
            refresh: true,
            pageSizes: false,
            buttonCount: 5,
            input: true,
            numeric: false,
            messages: {
                display: "{0} - {1} 共 {2} 條數據",
                empty: "沒有數據",
                of: "共<span class='z-allPage'>{0}</span>頁 ",
                page: "&nbsp;&nbsp;&nbsp;到第",
                first: "第一頁",
                previous: "前一頁",
                next: "下一頁",
                last: "最后一頁",
                refresh: "刷新"
            }
        },
        columns: [
            {
                selectable: true,
                width: "50px"
            },
            {
                template: "<a href='/Detail/#: Id #'>  #: Code # </a>",
                field: "Code",
                title: "編號",
                width: 230
            },
            {
                field: "Name",
                title: "名稱",
                minResizableWidth: 220,
                headerAttributes: {
　　　　　　　　　　　　style: "text-align: left;" //列標題居左
　　　　　　　　　　},
                attributes: {
                    style: "text-align: left;" //列內容居左
                    class: "color-red"
                }
            },
            {
                field: "TypeStr",
                title: "類型",
                width: 100,
            },
            {
                field: "StateName",
                title: "國家",
                width: 100
            },
            {
                field: "ProvinceName",
                title: "省份",
                width: 100
            },
            {
                field: "CityName",
                title: "城市",
                width: 100
            },
            {
                field: "RegionStr",
                title: "所屬區域",
                width: 90
            },
            {
                field: "LastModifierUserName",
                title: "最后修改人",
                width: 90
            },
            {
                field: "LastModificationTimeStr",
                title: "修改時間",
                width: 120
            },
            {
                field: "StatusStr",
                title: "狀態",
                width: 70
            },
            {
                template: '<div class="btn-group">\                                                                //可以自定義列的顯示
                                         <button type="button" class="btn btn-danger dropdown-toggle"  data-toggle="dropdown">操作<span class="caret"></span></button>\
                                         <ul class="dropdown-menu">\
                                         <li><a href="/Manage/Warehouse/Detail/#: Id #">查看</a></li>\
                                         <li><a href="/Manage/Warehouse/CreateOrEditModal/#: Id #">修改</a></li>\
                                         <li role="separator" class="divider"></li>\
                                         <li><a href="javascript:void(0)" onclick="SaveGridExcel(#: Id #,\'檔案_編號#: Code #\')">導出</a></li>\
                                         </ul></div>',
                title: '操作',
                width: '100px'
            }
        ]

    });
</script>

 

下面對上面的gird用到的一些方法所涉及到的一些問題進行說明。

1 dataBound 

這個參數能夠對grid加載時進行一些處理，如上面用到的“在表格沒有數據的情況下給出提示”，並且可以直接通過this來獲取當前表格的grid對象。

除了上面用到的一個demo，還可以在databound里添加一些自己需要的其他功能，如給表格加動態的行號，還有給表格里的一些內容添加一些初始化組件等。

 

2 columns的template

它是自定義顯示的列，上面使用的是 template: "<a href='/Detail/#: Id #'> #: Code # </a>", 這是給這一列顯示的數據添加了一個鏈接；

還可以這樣使用：

template: function (e) {
                     if (e.IsHave== true) {
                         return "是";
                     }
                     else if (e.IsHave == false) {
                         return "否";
                     }
                 }

 

其他的參數應該會從上面的demo中理解使用方法。

========================================================================

 

二、grid關於data和dataSource的相關方法

項目中會涉及到通過本地js讀取grid列表中數據的方法，不過這里目前發現是存在一個問題，就是分頁顯示分時候，沒有辦法通過js獲取到全部data，只能獲取到當前頁的data，所以下面只對不分頁的情況進行整理。

演示grid demo：

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }  
  ],
  dataSource: [
    { name: "Jane Doe", age: 30},
    { name: "John Doe", age: 33},
  ]
});

 

1、data   

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

 

2、data - 取數據

    取出某一行數據  

//方法1：   
$("#grid").data("kendoGrid").dataSource.data()[0];  :

//方法2：
$("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)");

//方法3：
$("#grid").data("kendoGrid").dataSource.at(0);

    取出某一行數據中的某一列：

//方法1： 
$("#grid").data("kendoGrid").dataSource.data()[0].Id;

//方法2： 
 $("#grid").data("kendoGrid").dataItem("tbody tr:eq(0)").Id;

//方法3： 
$("#grid").data("kendoGrid").dataSource.at(0).Id;

 

3、data - 增加

添加一條數據：

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({ name: "John Doe", age: 33 }); //add只能添加一條數據

4、data - 修改

修改某行數據：

var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0);  //取第一條數據
data.set("name", "John Doe");      //修改第一條數據 

5、data - 刪除

 var grid = $("#grid").data("kendoGrid");
 var data = grid.dataSource.at(0); //取第一條數據
 grid.dataSource.remove(data);     //刪除第一條數據

 注：

項目中用到刪除表中一條數據，簡略代碼如下：

//column的操作列
{
                title: "操作",
                width: 100,
                template: function (e) {
                    var html = '<a href="javascript:void(0)" onclick="Delete(' + e.Id + ')">刪除</a>';
                    return html;
                },
                width: 50
            }

//刪除一條數據
function Delete(Id) {
    kendo.confirm("確定要刪選中的數據嗎?").then(function () {
        var data = $("#grid").data("kendoGrid").dataSource.data();
        for (var i = 0; i < data.length; i++) {
            if (data[i].Id == Id) {
                data.splice(i, 1);//這部分也可以參考上面的刪除方法改寫（詳見下文）
                $("#grid").data("kendoGrid").dataSource.data(data); 
            }
        }
    });
};


//改寫局部代碼如下：
if (data[i].Id == Id) {
       var removeData = $("#grid").data("kendoGrid").dataSource.at(i)
       $("#grid").data("kendoGrid").dataSource.remove(removeData ); 
}

 

6、dataSource數據源 - 修改

var dataSource = new kendo.data.DataSource({
         data: [
           { name: "John Doe", age: 33 }
         ]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);

 

說明：需要先創建一個DataSource，然后通過setDataSource方法進行設置。

dataSource也可以這樣設置

var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "post",
url: "/getData",
dataType: "json"
}
},
batch: true,
schema: {
data: function (d) {
return d.data;
},
model: { id: "Id"}
},
serverFiltering: true,
filter: sqlSource
});

 

7、total：統計grid列表數據的總條數

方法：

$("#grid").data("kendoGrid").dataSource.total()

說明：統計grid列表數據的總條數（包含所有頁面的數據）

 

注：$("#grid").data("kendoGrid").dataSource.data().length 這條語句也能統計grid數據的條數，但是僅限於當前頁面，不包含所有頁面。因此這種方法僅適用於不帶分頁的場景。

$("#grid").data("kendoGrid").dataSource.total()這種方法相對來說更具優勢。

 

三、filter 自定義查詢條件

注：需要配合后台來實現此功能

 

用法demo：

var Code = $("#Code").val().replace(/\s+/g, "");
var Name = $("#Name").val().replace(/\s+/g, "");
var dataSource = []; //dataSource是json數組，用來放查詢的條件
if (Code != "") {
dataSource.push({ field: "Code", operator: "eq", value: Code });
}
if (Name != "") {
dataSource.push({ field: "Name", operator: "contains", value: Name });
}
$("#grid").data("kendoGrid").dataSource.filter(dataSource);

 

 說明，由於項目的原因，kendo自身基礎的filter是在列表中的那種，而是放在kendo的工具欄中，所以采用了自定義搜索框，然后將輸入的搜索條件拼成一個對象數組，然后再傳過去。