首页 > 代码库 > 中文版kendoUI API — Grid(一)
中文版kendoUI API — Grid(一)
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.未完,待续......
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。