KendoUi 学习笔记 Grid

Posted 2020-09-30 菜鸟的故事

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了KendoUi 学习笔记 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>

autoBind Boolean（default：true）

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

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

columnResizeHandleWidth Number（default：3）

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

存在疑问：未启用

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 实例。