时间戳

首页 > 解决方案 > kendoGrid 数据源 html 表

javascript - kendoGrid 数据源 html 表

问题描述

我在 java 脚本中构建了一个 HTML 表，并想将其设置为 kendoGrid 的数据源，但它不工作

大多数示例都使用数组，但我想使用这个自定义 html 表。

Code ASPX
<div id="grid"></div>

JS
 table += tr + "</table>";

                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: table
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                    });

标签： javascriptkendo-grid

解决方案

没有关于表格结构的详细信息，但是这里是一个带有一行和一列标题的简单示例，为了能够将 dataSource 设置为 HTML 表格，您需要使用某种 kendo 自定义模板，或者有一个函数遍历表中的所有节点，然后将其设置为数组并在 dataSource 字段中使用它。

<table id="grid">
    <thead>
        <tr>
            <th data-field="make">Car Make</th>
            <th data-field="model">Car Model</th>
            <th data-field="year">Year</th>
            <th data-field="category">Category</th>
            <th data-field="airconditioner">Air Conditioner</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Volvo</td>
            <td>S60</td>
            <td>2010</td>
            <td>Saloon</td>
            <td>Yes</td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            height: 550,
            sortable: true
        });
    });
</script>

推荐阅读