kendo treeview结构如何实现延迟加载？

Question

 var jsonDataParent = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataBrand);
 var jsonDataChild =  @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataModel);
 var kendoTreeData = new kendo.data.HierarchicalDataSource({
 data: [
     jsonDataParent 
 ],
 schema: {
     model: {
         children: "subCategories",
         hasChildren: "hasChildren"
     }
 }
});
function treeDataBound() {
 var selectedValues = '@Model.SearchFilterViewModel.SelectedItems';
 if (selectedValues != "")
 {
     var selectedNodes = selectedValues.split(",");
     if (selectedNodes.length > 0) {
         $("#treeview input[type=checkbox]").each(function (e) {
             var checkboxId = $(this).attr("value");

             if (selectedNodes.indexOf(checkboxId.toString()) > -1) {
                 if ($(this).is(":checked") == false) {
                     $(this).click();
                     setTimeout(function () {
                         onCheck();
                     }, 1);
                 }
             }
         });
     }
 }
}
var fillSubItems = function (dataItem) {
 var items = [];
 var subCat = jsonDataChild.subCategories;
 for (i = 0; i < subCat.length; i++)
 {
     if (dataItem.id.split('-')[0] == subCat[i][0].treeNodeId) {
             items.push(subCat[i])
     }
 }
 return items
}
 $("#treeview").kendoTreeView({
 checkboxes: {
     template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='#= 
 item.id #' aria-label='#= item.id #'/>",
     checkChildren: true
 },
 dataBound:treeDataBound,
 dataSource: kendoTreeData,
 loadOnDemand: true,
 dataTextField: ["categoryName", "subCategoryName"],
 expand: function (e)
 {
     var item = treeview.dataItem(e.node);
     setTimeout(function () {
     var subitems = fillSubItems(item);
     treeview.children.data(subitems);
     }, 500);
   }
});
var treeview = $("#treeview").data("kendoTreeView");
$($("#treeview input[type=checkbox]").first()[0]).hide();
setTimeout(function () {
 $('#treeview').data('kendoTreeView').collapse("ul li :not(:eq(0))");
}, 1);
treeview.dataSource.bind("change", function (event) {
 runAlready = false;
 if (event.field == "checked")
     onCheck();
 });

由于数据量较大，需要在Kendo TreeView中实现延迟加载。父节点和子节点分别存储在两个不同的 JSON 对象中。但是，目前仅显示父节点复选框，并且子节点的展开图标不可见。有人可以帮助识别这段代码中的任何问题吗？

JSON format:-
{
"categoryName": "Brand Model",
"treeNodeId": "0-0",
"subCategories": [
  {
    "subCategoryName": "Brand1",
    "treeNodeId": "",
    "id": "1996-0",
    "subCategories": [
      {
        "subCategoryName": "UNKNOWN",
        "treeNodeId": "1996",
        "id": "2812-1996",
        "subCategories": "",
        "expanded": true,
        "checked": false,
        "HasChildren": false 
      }
    ],
     "expanded": true,
     "checked": false,
     "HasChildren": true
   },
   {
     "subCategoryName": "Brand2",
     "treeNodeId": "",
     "id": "1208-0",
     "subCategories": [
      {
        "subCategoryName": "UNKNOWN",
        "treeNodeId": "1208",
        "id": "2232-1208",
        "subCategories": "",
        "expanded": true,
        "checked": false,
        "HasChildren": false
      }
    ],
    "expanded": true,
    "checked": false,
    "HasChildren": true
   }
 ]
}

Json Model:-
jsonModel.Add(new
{
   subCategoryName = Model.Brand,
   treeNodeId = string.Empty,
   id = Model.MakeSK + "-0",
   subCategories = subCat,
   expanded = true,
   @checked = isChecked,
   HasChildren = true
 });

subCategories（子节点数据）对于父 Json 对象为空。

Answer 1

我看到您通过模型传递父级和子级数据，所以我建议考虑一种稍微不同的方法 - 在服务器上构建父级/子级数据关系，将数据结构传递给树视图并让它处理其余的部分的操作。

loadOnDemand

选项就可以做到这一点 - 仅渲染当前级别的项目，而不是所有项目。如果您取消注释此

示例

中的 loadOnDemand 并检查标记，您将注意到 Brand1 的叶子在您展开 Brand1 节点之前不会呈现。

如果未显示展开/折叠图标，请注意字段映射 - 在数据源定义中，您有

hasChildren: "hasChildren"

，而 JSON 格式共享的字段采用 PascalCase：“HasChildren”。还可以考虑为

id

使用不同的字段名称 - 似乎

id

是由树视图内部使用的，因此 JSON 格式中的字段将不会被映射，因此在示例中更新为

nid

。