Question

我正在使用剑道树视图。在导航到树视图链接后，我需要保持树视图扩展状态。

@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section",@style="height:700px;" })
    .DataTextField("Name").DataUrlField("Name").DataUrlField("URL").ExpandAll(true)
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetUserMenue", "UserManagement")
        )

    )

)


public ActionResult GetUserMenue(int? id)
        {
            repUser = new UserManagementRepository();

            List<UserMenue> model = repUser.getMenue(WebSecurity.GetUserId(User.Identity.Name));

            if (!id.HasValue)
            {
                var emp = from e in model
                          select new
                          {
                              id = e.PermissionID,
                              Name = e.Name,
                              URL=e.URL,
                              hasChildren = e.hasChildren
                          };

                return Json(emp, JsonRequestBehavior.AllowGet);
            }
            if (id.HasValue)
            {
                List<UserMenue> modelChild1 = repUser.getMenuLevel2(id);

                var emp = from e in modelChild1
                          select new
                          {
                              id = e.PermissionID,
                              Name = e.Name,
                              URL = e.URL

                          };

                return Json(emp, JsonRequestBehavior.AllowGet);
            }


            return Json(model, JsonRequestBehavior.AllowGet);
        }

Answer 1

这里你去Doc

主要有两个功能：

function saveExpanded() {
  var treeview = $("#treeview").data("kendoTreeView");
  var expandedItemsIds = {};
  treeview.element.find(".k-item").each(function () {
    var item = treeview.dataItem(this);
    if (item.expanded) {
        expandedItemsIds[item.id] = true;
    }
  });
  Cookies.set('expanded', kendo.stringify(expandedItemsIds));
}

function setExpanded(data, expanded) {
  for (var i = 0; i < data.length; i++) {
    if (expanded[data[i].id]) {
      data[i].expanded = true;
    }
    if (data[i].items && data[i].items.length) {
      setExpanded(data[i].items, expanded);
    }
  }
}

请确保您已引用此jquery plugin以使用$ .cookie函数

Answer 2

在HTML5中当树项目展开或折叠时，您可以使用history.pushState()或history.replaceState()方法在历史状态中保存树项状态：

history.pushState({
    expanded: [...]
}, 'sometitle', '?expanded=' + ...);

对于还原树项目状态您必须处理window.onpopstate事件

window.onpopstate = function(event) {
    restoreTreeItemsState(event.expanded); // your function that restores tree items states
}

在处理扩展事件时，检查树项状态变化的原因。如果树项目从restoreTreeItemsState函数扩展，则无需更改历史记录

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

在旧版浏览器中，您可以使用window.location.hash。我不使用它们，但它具有与html5历史记录相似的功能和更多的功能

在页面加载时保持kendo treeview扩展状态

2 个答案: