8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何在kendo treeview结构中实现延迟加载?

chevydog 2月前

16 0

var jsonDataParent = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataBrand); var jsonDataChild = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataModel); var kendoTreeData = new kendo...

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

对于父 Json 对象,subCategories(子节点数据)为空。

帖子版权声明 1、本帖标题:如何在kendo treeview结构中实现延迟加载?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由chevydog在本站《json》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: