NOVOTS KMS 词汇表 Glossary    联系我们 Contact Us
查询 Search  
   
按类别浏览 Browse by Category
NOVOTS KMS .: 工作心得 .: Kendo UI Grid

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

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


这篇文章对你多有用?

相关文章

article 如何使用extjs构建grid
使你的Grid正常工作,您必须具备以下条件:1.- A...

(No rating)  3-31-2011    Views: 1489   
article Kendo UI Web扩展
GitHub https://github.com/jsExtensions/ken...

(No rating)  9-26-2014    Views: 972   
article kendoUI Grid dataSource重新加载
如果我们更新了DataSource的数据后,只需要重新加...

(No rating)  6-24-2014    Views: 946   

用户评语

添加评语
当前还没有评语.


.: .: .: .: .:
[ 登陆 ]
北京护航科技有限公司 2006

Novots Technologies Limited