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