Question

我一直在玩Kendo UI Grid，我喜欢它可以很容易地使用HTML标记表。

是否可以使用HTML标记表并制作成Kendo可编辑网格。

http://demos.kendoui.com/web/grid/from-table.html

Answer 1

如果其他人需要这方面的帮助，这是解决方案。假设我创建了一个包含以下格式的表：

<table id="data">
    <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
            <th>Field 3</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Field 1 data</td>
            <td>Field 2 data</td>
            <td>Field 3 data</td>
            <td></td>
        </tr>
    </tbody>
</table>

请注意，标题和数据列都是空的。这是KendoUI在网格初始化时添加命令按钮的地方。

要将其初始化为可编辑的KendoUI Grid，您可以使用以下javascript：

$("#data").kendoGrid({
        editable: "popup", //or "inline"
        columns: [
            { field: "field1", title: "Field 1" },
            { field: "field2", title: "Field 2" },
            { field: "field3", title: "Field 3" },
            { command: "edit" }
        ]
    });

然后，您可以自定义编辑器模板，就像从远程或本地JSON数据创建网格时一样。

另外请注意，在我的KendoUI版本中，弹出编辑器窗口中存在一个错误。您需要添加此样式覆盖才能使弹出窗口正确显示（如果不是这样）（即，您看到的只是屏幕中间的一个小白色方块）：

.k-window
    {
        transform: none !important;
    }

Kendo UI Grid从html表初始化编辑

1 个答案: