首页 > 代码库 > 中文版kendoUI API — Grid（一）

中文版kendoUI API — Grid（一）

2024-07-17 20:05:34   223人阅读

1.altRowTemplate

类型：Function | String

说明：提供表格行的交替模板，默认grid表格为每一个数据元素提供一个tr

注意：模板中最外层的html元素必须是<tr>,这个<tr>必须有一个uid属性，并设置为#= uid #,grid使用uid属性判定绑定行的元素。

Example:

通过Function方式提供模板

 1 <div id="grid"></div> 2 <script id="alt-template" type="text/x-kendo-template"> 3     <tr data-uid="#= uid #"> 4         <td colspan="2"> 5             <strong>#: name #</strong> 6             <strong>#: age #</strong> 7         </td> 8     </tr> 9 </script>10 <script>11 $("#grid").kendoGrid({12   dataSource: [13     { name: "Jane Doe", age: 30 },14     { name: "John Doe", age: 33 }15   ],16   altRowTemplate: kendo.template($("#alt-template").html())17 });18 </script>

通过String方式提供模板

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

2. autoBind       Boolean(default:true)

说明：如果值设为false，控件在初始化期间将不绑定数据源，默认情况数据源是绑定在指定属性中的。

1 $("#grid").kendoGrid({2   autoBind: false,3   dataSource: dataSource4 });5 dataSource.read();6 </script>

3. columnResizeHandleWidth Number(default:3);

说明：定义column重新处理的尺寸宽度。(不常用)

4. columns      Array

Grid表格列属性，一个对象数组或字符数组，一个JS对象作为列配置被解读，一个字符数组作为绑定列的域被解读，grid将为每一个数组元素创建一列

Example:

指定列为一个字符数组：

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

指定列为一个对象数组：

 1 <div id="grid"></div> 2 <script> 3 $("#grid").kendoGrid({ 4   columns: [{ 5     field: "name",// create a column bound to the "name" field 6     title: "Name" // set its title to "Name" 7   }, { 8     field: "age",// create a column bound to the "age" field 9     title: "Age" // set its title to "Age"10   }],11   dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]12 });13 </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.未完，待续......


联系
我们