kendoGrid 数据源 html 表答案

【问题标题】：kendoGrid dataSource html tablekendoGrid 数据源 html 表
【发布时间】：2019-06-26 05:17:39
【问题描述】：

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

【问题讨论】：

标签： javascript kendo-grid

【解决方案1】：

没有关于表格结构的详细信息，但是这里有一个带有一行和一列标题的简单示例，为了能够将 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>

【讨论】：