（5）kendo UI使用基礎介紹與問題整理——Grid問題/顯示效果的一些問題

     由於我參與的項目中涉及到一些不一樣的顯示效果，這里對用到的幾個進行簡單的整理和說明。

 一、給表頭和內容添加樣式

        headerAttributes、attributes這兩個屬性分別是給表頭和表內容添加樣式的兩個屬性，使用demo如下：

 {
         field: "Name",
         title: "名稱",
         minResizableWidth: 220,
         headerAttributes: {
　　　　　      style: "text-align: left;", //列標題居左
              class: "color-red"
　　　    },
         attributes: {
             style: "text-align: left;", //列內容居左
             class: "color-red"
         }
},

   可以添加style或者class設置樣式。可以在官網找到這部分的參考demo。

 二、Multi-column headers

        官網效果截圖如下：

        

       簡要代碼如下：

columns: [{
            field: "CompanyName",
            title: "Company Name",
            width: 420
        },
        {
            title: "Contact Info",
            columns: [{
                field: "ContactTitle",
                title: "Contact Title",
                width: 200
            },{
                field: "ContactName",
                title: "Contact Name",
                width: 200
            },{
                title: "Location",
                columns: [ {
                    field: "Country",
                    width: 200
                },{
                    field: "City",
                    width: 200
                }]
            },{
                field: "Phone",
                title: "Phone"
            }]
        }]

很容易理解，就是嵌套的辦法。

 

三、自定義編輯列表項

         （啊，心好累，之前寫好的內容保存的時候竟然出了問題，還要再寫一遍o(╥﹏╥)o）

         首先需要解釋一下，我這邊說的“自定義編輯列”，並不是Grid的editable的那種編輯狀態，而是列表項里帶有可編輯的內容，如：input、dropdownlist、textare等可以編輯的組件。

         下面上一個簡略的demo：      

{
           field: "Name",
           title: "名字",
           width: 100,
           template: function (e) {
                 return '<input name="Name"  value="' + e.Name+ '"  type="text" />';
           }
}

     通過上面的代碼，我所謂的自定義編輯列表項的意思，大家應該明白了。

     （1）解決自定義編輯列表項Gird的數據保存問題

     對於帶有自定義編輯列表項的Grid，可能在實際應用的時候，會遇到數據保存的問題，就是Gird的dataSource數據保存的問題。

     解決保存數據的問題：

     思路：給可編輯的輸入框或下拉框，添加一個onblur事件，然后在onblur事件中添加修改dataSource的方法。

     代碼如下：

//Grid column
{
           field: "Name",
           title: "名字",
           width: 100,
           template: function (e) {
                 return '<input name="Name"  value="' + e.Name+ '"  type="text" onblur="changeName(this.value,' + e.Id + ')"/>';
           }
}

//changeName
function changeName(Name, Id) {
    var data = $("#grid").data("kendoGrid").dataSource.data();
    if (typeof (data) != "undefined") {
        for (var i = 0; i < data.length; i++) {
            if (data[i].Id == Id) {
                data[i].Name= Name;
                break;
            }
        }
    }
};

 

（2）初始化組件的問題

 如果列表項是dropdownlist，就會涉及到初始化dropdownlist組件的問題，我的解決方法是把初始化的代碼放到databound里。

 簡略的初始化dropdownlist的代碼如下：

dataBound: function () {
          if(this.dataSource.data().length>0) {
                var selects = $("select[name='dropdownlist']");
                if (selects.length > 0) {
                    for (var i = 0; i < selects.length; i++) {
                        //這里寫dropdownlist的初始化代碼
                        /*這里大家自己發揮吧*/
                    }
                }
            }
 }

 

 

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

 四、在一個頁面加載數據實現的滑動翻頁（官網有此demo）

官網demo地址：https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

描述

在某些情況下，您可能需要在網格中使用大量的數據，並且由於瀏覽器資源有限，一次獲取並處理這些數據會造成性能損失。

幸運的是，Kendo UI網格有一個稱為數據虛擬化的解決方案，可以緩解在處理大量數據時的速度減慢。當通過scrollable-> virtual配置選項啟用時，它將顯示網格內容的垂直滾動條，並僅呈現通過網格數據源的pageSize屬性設置的項目數。拖動滾動條並超出pageSize后，它會自動請求檢索並呈現下一組網格行。

網格虛擬化功能支持本地和遠程數據，而在本演示中，記錄是從遠程端點獲取的。

demo：

<div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverPaging: true,
                            serverSorting: true,
                            pageSize: 100,
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            }
                        },
                        height: 543,
                        scrollable: {
                            virtual: true
                        },
                        sortable: true,
                        columns: [
                            { field: "OrderID", title: "Order ID", width: 110 },
                            { field: "CustomerID", title: "Customer ID", width: 130},
                            { field: "ShipName", title: "Ship Name", width: 280 },
                            { field: "ShipAddress", title: "Ship Address" },
                            { field: "ShipCity", title: "Ship City", width: 160 },
                            { field: "ShipCountry", title: "Ship Country", width: 160 }
                        ]
                    });
                });
            </script>