Kendo UI:Grid

Kendo.ui.Grid

Kendo Ui Grid控件，继承至Widget。

一、构造

      allowCopy    Boolen|Object  (默认：false)

     当他设置true，用户就可以选中行点击复制，可以复制进入excel和记事本。

    设置Object可以设置高级Copy，比如复制后通过分隔符隔开。    

<div id="grid"></div>
 <script> 
$("#grid").kendoGrid({ 
    selectable: "multiple cell", 
    allowCopy: true, 
    columns: [ 
                { field: "productName" }, 
                { field: "category" } 
             ], 
    dataSource: [ 
                { productName: "Tea", category: "Beverages" }, 
                { productName: "Coffee", category: "Beverages" },
                 { productName: "Ham", category: "Food" },        
                 { productName: "Bread", category: "Food" } 
] 
}); 
</script>

 allowCopy.delimeter  String|Object(默认："\t")

  delimeter是同一行，项与项之间的分隔符。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: {
        delimeter: ",",
    },
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});
</script>

 

    altRowTemplate   String|Function

    呈现行的模板。默认不同行之间通过<tr>

    通过这个属性，可以自定义展示模板。支持kendo.template(html)和纯html。

    例子：指定交互行模板通过Funtion    

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

    autoBind  Boolean（default：true）

    当他设置成false，Grid在初始化的时候将不绑定，必须调用read()方法才能被绑定。

    个人理解：这样就完全将数据和展示分离开。

<div id="grid"></div> <script> var dataSource = new kendo.data.DataSource({ data: [ { name: "Jane Doe" }, { name: "John Doe" }] }); $("#grid").kendoGrid({ autoBind: false, dataSource: dataSource }); dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound </script>

 

     columnResizeHandleWidth  Number（default：3）

     定义每次句柄处理的宽度。让人更容易调整宽度。

      存在疑问：未启用

<div id="grid"></div> <script> $("#grid").kendoGrid({ columnResizeHandleWidth: 6 }); </script>

      columns  Array

      列配置模型。一个array对象或者string。javascript对象解释一个列配置。String指定绑定列名绑定的列。grid会根据列配置创建列。

      dataSource    Object|Array|kendo.data.DataSource

      dataSource是用于展示table rows。一个javascript对象要符合source config配置的对象，也可以是一个javascript array或者一个已经存在的kendo,data.DataSource 实例。

      当datasource 配置是一个javascript 对象或者一个kendo.data.DataSourece实例，使用它的value配合datasource  配置。

      当datasource配置是一个kendo.data.DataSource 实例。

    例子—指定Grid  Columns  通过 string array

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: ["name", "age"], // two columns bound to the "name" and "age" fields dataSource: [ { name: "Jane", age: 31 }, {