页面加载时保持剑道树视图展开状态

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
}

Сheck 处理扩展事件时树项状态更改的原因。如果树项从您的 restoreTreeItemsState 函数扩展，则无需更改历史记录

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

在旧浏览器中您可以使用window.location.hash。 我不使用它们，但它具有类似的功能，并且比 html5 历史执行更难