kendoGrid 数据源 html table

kendoGrid dataSource html table

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

大多数示例都使用数组,但我想使用这个自定义 html table.

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
                        },
                    });

没有关于您的 table 结构的详细信息,但是这里有一个简单的例子,只有一行和一列 headers,可以将数据源设置为 HTML table 你需要使用某种 kendo 自定义模板,或者有一个函数遍历 table 中的所有节点,然后将其设置为一个数组并在数据源字段。

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