Kendo UI:Grid

最新推荐文章于 2021-01-13 16:27:34 发布

菜鸟界的菜鸟

最新推荐文章于 2021-01-13 16:27:34 发布

阅读量509

点赞数

分类专栏： Kendo UI 文章标签： jquery

本文链接：https://blog.csdn.net/baiduwenku112/article/details/110110464

版权

本文详细介绍了Kendo UI Grid的构造和配置选项，包括allowCopy、altRowTemplate、autoBind、columnResizeHandleWidth、columns、dataSource、columnMenu及其详细配置、editable等参数的用法。此外，还讨论了数据源、编辑模式以及列菜单中的列选择、过滤和排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章