中文版kendoUI API — Grid(一)

时间:2021-04-21 16:47:50

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.未完,待续......