Question

我认为我处境艰难，我读过你可以轻松地将html表转换为kendo网格。所以我在MVC应用程序中开发了整个引导程序表，并用如下数据填充它。

<div class="col-md-12 table-responsive" id="mapsDiv">
    @Html.Partial("~/Views/Maps/_MapDetailsList.cshtml", Model.saVM)

</div>

_MapDetailsList.cshtml具有表格元素

<table class="table table-bordered table-striped table-bordered" id="MapDetails">

<thead>
      <tr> ... </tr>
</thead>
<tbody>
         <tr> ... </tr>
           @{
               var rowIndex = 3;
            foreach (ShortStudent geStudent in Model.students)
            {
               <tr> ... </tr>
             rowIndex++;
            }
        }
    </tbody>
</table>

使用剃须刀中的Model.students数据填充“tr”标签内的表格单元格的复杂逻辑。

在此之后我将其转换为kendoGrid我的脚本如下：

$(function () {

    $("#MapDetails")
        .kendoGrid(
    {

       sortable: true,
       dataSource: {
           pageSize: 5
       },
       pageable: true,
           resizable: true,
           columnMenu: true,
           scrollable:true,
           navigatable: true,
           editable: "incell"

    });

 });

（每次重新加载时，我的列数及其内容（标题）都会发生变化。）

现在这可以正常工作，直到我重新加载网格，因此较新的标题和数据行显示为数据行。原始/第一次标题固定在顶部。换句话说，较新的html表嵌套在原始表中。

现在Telerik向我提出以下建议，我不确定如何实施。

创建包装器 - 将HTML元素添加到要加载新表的页面。
最初在此包装器中加载表并抬起网格。
重新创建网格时，请删除网格的包装并销毁网格实例。这样，第1点的包装将保持空白。
使用load在包装器中添加新表并重新创建网格。

我只需要知道如何在我的代码中实现这个建议。

我无法理解的是如何在表格元素中重新创建所有剃刀逻辑？

Answer 1

正如剑道支持团队所说，这种实施方式有局限性。当涉及到自定义列锁定和设置宽度等时。但是，这里是如何创建一个包装器然后在网格内重新加载表。

 var kendoGrid = $("#MapDetails").getKendoGrid();
    if (kendoGrid) {
        kendoGrid.wrapper.remove();
        kendoGrid.destroy();
    }

    $('#mapsDiv').load(url, {...},
       function (data) {
           $("#MapDetails").kendoGrid({
               sortable: true,
               dataSource: {
                   pageSize: 2
               },
               pageable: true,
                   resizable: true,
                   columnMenu: true,
                   scrollable:true,
                   navigatable: true,
                   editable: "incell"});

Bootstrap表（已填充）转换为kendo

1 个答案: