中文版kendoUI API — Grid（一）

1.altRowTemplate

類型：Function | String

說明：提供表格行的交替模板，默認grid表格為每一個數據元素提供一個tr

注意：模板中最外層的html元素必須是<tr>,這個<tr>必須有一個uid屬性，並設置為#= uid #,grid使用uid屬性判定綁定行的元素。

Example:

通過Function方式提供模板

<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>

2. autoBind       Boolean(default:true)

說明：如果值設為false，控件在初始化期間將不綁定數據源，默認情況數據源是綁定在指定屬性中的。

$("#grid").kendoGrid({
  autoBind: false,
  dataSource: dataSource
});
dataSource.read();
</script>

3. columnResizeHandleWidth Number(default:3);

說明：定義column重新處理的尺寸寬度。(不常用)

4. columns      Array

Grid表格列屬性，一個對象數組或字符數組，一個JS對象作為列配置被解讀，一個字符數組作為綁定列的域被解讀，grid將為每一個數組元素創建一列

Example:

指定列為一個字符數組：

<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>

指定列為一個對象數組：

<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>

5.columns.aggregate

說明：給某列或分組列做合計，支持”average”,”count”,”max”,”min”,”sum”

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "firstName", groupable: false },
    { field: "lastName" }, /* group by this column to see the footer template */
    { field: "age",
      groupable: false,
      aggregates: [ "count", "min", "max" ],
      groupFooterTemplate: "age total: #: count #, min: #: min #, max: #: max #"
    }
  ],
  groupable: true,
  dataSource: {
    data: [
      { firstName: "Jane", lastName: "Doe", age: 30 },
      { firstName: "John", lastName: "Doe", age: 33 }
    ]
  }
});
</script>

6.columns.attributes

說明：為<td>添加html屬性

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: {
      "class": "table-cell",
      style: "text-align: right; font-size: 14px"
    }
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
生成后的代碼為：<td class="table-cell" style="text-align: right; font-size: 14px">...</td>.

7.未完，待續......