KendoUi 學習筆記(二) Grid

Kendo.ui.Grid

Kendo Ui Grid控件，繼承至Widget。

一、構造

      allowCopy    Boolen|Object  (默認：false)

     當他設置true，用戶就可以選中行點擊復制，可以復制進入excel和記事本。

    設置Object可以設置高級Copy，比如復制后通過分隔符隔開。    

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});
</script>

  例子—   

 allowCopy.delimeter  String|Object(默認："\t")

    delimeter是同一行，項與項之間的分隔符。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: {
        delimeter: ",",
    },
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});
</script>

    altRowTemplate   String|Function

    呈現行的模板。默認不同行之間通過<tr>

    通過這個屬性，可以自定義展示模板。支持kendo.template(html)和純html。

    例子：指定交互行模板通過Funtion    

<div id="grid"></div>
<script id="alt-template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td colspan="2">
            <strong>#: name #</strong>
            <strong>#: age #</strong>
        </td>
    </tr>
</script>
<script>
$("#grid").kendoGrid({
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  altRowTemplate: kendo.template($("#alt-template").html())
});
</script>

 例子：指定交互行模板通過String

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
  altRowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
});
</script>

 

    autoBind  Boolean（default：true）

    當他設置成false，Grid在初始化的時候將不綁定，必須調用read()方法才能被綁定。

    個人理解：這樣就完全將數據和展示分離開。

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#grid").kendoGrid({
  autoBind: false,
  dataSource: dataSource
});
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
</script>

 

     columnResizeHandleWidth  Number（default：3）

     定義每次句柄處理的寬度。讓人更容易調整寬度。

      存在疑問：未啟用

 

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columnResizeHandleWidth: 6
});
</script>

 

 

 

      columns  Array

      列配置模型。一個array對象或者string。javascript對象解釋一個列配置。String指定綁定列名綁定的列。grid會根據列配置創建列。

      dataSource    Object|Array|kendo.data.DataSource

      dataSource是用於展示table rows。一個javascript對象要符合source config配置的對象，也可以是一個javascript array或者一個已經存在的kendo,data.DataSource 實例。

      當datasource 配置是一個javascript 對象或者一個kendo.data.DataSourece實例，使用它的value配合datasource  配置。

      當datasource配置是一個kendo.data.DataSource 實例。

    例子—指定Grid  Columns  通過 string array

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: ["name", "age"], // two columns bound to the "name" and "age" fields
  dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]
});
</script>

 例子-指定grid列配置通過Object array

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [{
    field: "name",// create a column bound to the "name" field
    title: "Name" // set its title to "Name"
  }, {
    field: "age",// create a column bound to the "age" field
    title: "Age" // set its title to "Age"
  }],
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>

 columnMenu   Boolean | Object(default:false)

 當設置成true，通過點擊列投的圖標Grid將顯示列菜單。列菜單允許用戶控制顯示或者關閉列，過濾和排序（當過濾和排序被允許）。默認情況列菜單不被允許。

 通過設置一個Javascript 對象來設置column menu的配置。

 例子—啟用Column Menu

 

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu的配置#Start-------------------------------------------------------------------------------------------------------------------------------------

columnMenu.columns  Boolean(default:true)

當設置成true，column menu 允許用戶選擇列顯示隱藏。默認column menu 允許列選擇。

例子—不允許列選擇

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

columnMenu.filterable  Boolean(default:true)

當它設置成true，列菜單允許用戶過濾grid。當grid的配置filterable。

columnMenu.filterable的屬性一定要再grid的filterable為true的前提才有用。

 例子—使得列過濾器無效

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

columnMenu.sortable  

當設置為true，允許用戶通過grid列進行排序。默認情況下當grid的sortable為true時就可以設置。

例子—讓column menu 排序不可用。

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

columnMenu.message  -Object

這個text message 顯示在列菜單。使用自定義或本地，列菜單消息。

這個主要自定義列菜單的提示文字。

message是一個對象，里面包括columns,filter,sortAscending,sortDescending

例子—自定義列菜單消息

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      columns: "Choose columns",
      filter: "Apply filter",
      sortAscending: "Sort (asc)",
      sortDescending: "Sort (desc)"
    }
  },
  sortable: true,
  filterable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 columnMenu.messages.columns String（默認：“Columns”） 默認值是根據語言包，如果是中文是"列"

這個代表列菜單中列控制的菜單顯示文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      columns: "Choose columns"
    }
  },
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 

columnMenu.message.filter  String（default:"Filter"）   使用中文語言包后為“過濾”

這個代表列菜單中過濾菜單項的菜單文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      filter: "Apply filter",
    }
  },
  filterable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 

columnMenu.messages.sortAscending  String（默認：“Sort Ascending”） 使用中文語言包后為“升序”

這個代表列菜單中升序菜單項的菜單文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      sortAscending: "Sort (asc)",
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 

columnMenu.message.sortDescending  String（默認：“Sort Descending”） 使用中文語言包后為“降序”

列菜單的降序菜單的顯示文字。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      sortDescending: "Sort (desc)",
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 

columnMenu.message.settings  String（默認：“Column Setting”）

這個是菜單頭部的顯示文字（僅在移動模式下可用）。

mobile:'phone'模式下可用。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      settings: "Column Options",
    }
  },
  mobile: "phone",
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 

columnMenu.message.done   String(default:“Done”)

菜單頭部文字顯示（僅在移動模式可用）

mobile:'phone'模式下可用。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      done: "Ok",
    }
  },
  mobile: "phone",
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 columnMenu.messages.lock   String（default：“Lock”）

 列菜單鎖定列菜單的顯示文字。

存在問題：等把column配置中的locked和lockable兩個配置完成以后，再回頭來確定

columnMenu.messages.unlock  String（默認：“Unlock”）

存在問題：等把column配置中的locked和lockable兩個配置完成以后，再回頭來確定

columnMenu的配置#End---------------------------------------------------------------------------------------------------------------------------------------

dataSource   Object|Array|kendo.data.DataSource

數據源部件用於顯示table rows。Javascript對象表示一個有效的數據源的配置，也可以是一個Javascript數組或者一個kendo.data.DataSource實例。

當dataSource配置是一個javascript 對象或者array 對象，這些都會被隱式的初始化成kendo.data.DataSource 實例。

當dataSource配置本身就是kendo.data.DataSource實例就直接使用，不會被初始化。

例子—javascript object的數據源

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
});
</script>

 

例子—javascript array的數據源

作者備注：給的例子與javascript object的數據源沒有區別

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

 例子—已存在的kendo.data.DataSource對象

作者備注：

1、DataSource支持jsonp跨域

2、grid如果不配置column，會默認根據dataSource自動生成column配置。

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  },
  pageSize: 10
});
$("#grid").kendoGrid({
  dataSource: dataSource,
  pageable: true
});
</script>

 detailTemplate   String|Funtion

模板展示詳情行。檢查詳情模板通過在線demo。

作者備注：

1、detailTemplate相當於可以將列展開展示詳情。

注：deatilTemplate內容不能比主列寬，除非詳細模板支持滾動。

例子—Function Template

<script id="detail-template" type="text/x-kendo-template">
  <div>
    Name: #: name #
  </div>
  <div>
    Age: #: age #
  </div>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: kendo.template($("#detail-template").html())
});
</script>

 例子—指定string 詳情模板

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
</script>

editable   Boolean|Object（default:false）

當設置成true，用戶可以編輯綁定的數據。默認是不允許編輯。

可以設置一個字符串（“inline”,"incell"或者“popup”）用於指定編輯模式。默認編輯模式“incell”。

incell：列單獨編輯。

inline：行編輯，columns必須有"command:'edit'"

popup：彈出編輯框，columns必須有"command:'edit'"

可以設置一個javascript object 代表編輯配置。

“inline”和“popup”編輯模式由“edit”列命令觸發。因此columns必須含有“edit”命令。

例子—可以編輯

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: true
});
</script>

例子—彈出編輯

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: "popup"
});
</script>

 #editable 配置     start-----------------------------------------------------------------------------------------------------

editable.confirmation  Boolean|String|Function（default：true）

當設置成true，用戶點擊“destroy”命令按鈕的時候，彈出確認對話框。

String—能設置確定對話框的確認文字，比如“你確定刪除嗎？”。

Function—方法被調用，return "你確定刪除嗎？"，作為確認框的文字內容。

例子—確認對話框不可用

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: false
   }
});
</script>

 

例子—設置刪除按鈕的確認框文字

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }
});
</script>

 

例子—通過方法返回確認框文字

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   editable: {
     confirmation: function(e) {
         return  "Are you sure that you want to delete record for " + e.name + "?";
     }
   }
});
</script>

 

editable.cancelDelete   String（默認：“Cancel”），如果引用了中文語言包 為“取消” 

當confirmation被啟用當用戶點擊“刪除”，取消按鈕的文字，當grid的mode:'phone'才有效。

例子—修改取消按鈕，手機模式

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   mobile: "phone",
   editable: {
     confirmation: true,
     cancelDelete: "No"
   }
});
</script>

 

editable.confirmDelete   String（default：‘Delete’）

當confirmation被啟用當用戶點擊“刪除”，確認刪除按鈕的文字，當grid的mode:'phone'才有效。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   mobile: "phone",
   editable: {
     confirmation: true,
     confirmDelete: "Yes"
   }
});
</script>

 

editable.createAt String（default:'top'）

新增一條數據插入的位置。top第一行；bottom最后一行。默認是在第一行。

例子—Grid最后插入一條數據。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  editable: {
    createAt: "bottom"
  },
  toolbar: ["create"]
});
</script>

 editable.mode  String(default:‘incell’)

編輯模式。支持編輯模式"incell","inline"和“popup”。

incell:單元格內編輯。

inline:行內編輯。

popup:彈窗

 “inline”和“popup”編輯模式通過column 命令 “edit”，因此一定需要 “edit” column.

例子——"inline"編輯模式

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "inline"
  }
});
</script>

 

editable.template   String|Function

彈出編輯的展示模板

#editable 配置     end-----------------------------------------------------------------------------------------------------