ztree初始化时默认展开第一层节点

1.要实现的效果如下图所示:

实现效果

2.参考ztree官网:API Document [zTree -- jQuery tree plug-ins.]

ztree官网

 3.显现代如下:

function getDeptNode() {
    var zNodes = [];
    $.ajax({
         url: "",
         data: {},
         async: false,
         success: function (res) {
             console.log('res',res);
             if (res.data.length > 0) {
                 zNodes = res.data;
                 zNodes[0].open = true;//默认展开根节点
                }
             }
      });
      return zNodes;
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
zTree 可以通过记忆上次展开节点来实现默认展开上次打开的节点的功能。具体实现方法如下: 1. 设置 zTree 的 cookie 开关为 true: ```javascript var setting = { view: { ... // 其他配置项 }, data: { ... // 其他配置项 }, callback: { ... // 其他回调函数 }, // 开启 cookie 记忆功能 view: { addDiyDom: null, autoCancelSelected: true, dblClickExpand: true, expandSpeed: "fast", fontCss: {}, nameIsHTML: false, selectedMulti: true, showIcon: true, showLine: true, showTitle: true, txtSelectedEnable: false, // 开启 cookie 记忆功能 rememberSelected: true, // 设置 cookie 记忆的名称 cookieName: "ztree_cookie" } }; ``` 2. 在页面加载初始化 zTree 并获取上次记忆的节点: ```javascript $(document).ready(function(){ // 初始化 zTree $.fn.zTree.init($("#treeDemo"), setting, zNodes); // 获取上次记忆的节点 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var cookieValue = $.fn.zTree._getCookie(setting.cookieName); if (cookieValue) { var expandNodes = cookieValue.split(","); // 展开上次记忆的节点 zTree.expandAll(false); for (var i = 0; i < expandNodes.length; i++) { var node = zTree.getNodeByParam("id", expandNodes[i]); if (node != null) { zTree.expandNode(node, true, false, true); } } } }); ``` 3. 在节点展开或关闭,更新 cookie 中保存的节点: ```javascript var setting = { view: { ... // 其他配置项 }, data: { ... // 其他配置项 }, callback: { onExpand: onExpand, // 节点展开的回调函数 onCollapse: onCollapse // 节点关闭的回调函数 }, // 开启 cookie 记忆功能 view: { addDiyDom: null, autoCancelSelected: true, dblClickExpand: true, expandSpeed: "fast", fontCss: {}, nameIsHTML: false, selectedMulti: true, showIcon: true, showLine: true, showTitle: true, txtSelectedEnable: false, // 开启 cookie 记忆功能 rememberSelected: true, // 设置 cookie 记忆的名称 cookieName: "ztree_cookie" } }; function onExpand(event, treeId, treeNode) { // 更新 cookie 中保存的节点 var zTree = $.fn.zTree.getZTreeObj(treeId); var expandNodes = zTree.getNodesByFilter(function(node) { return node.level > 0 && node.open; }); var expandNodesId = []; for (var i = 0; i < expandNodes.length; i++) { expandNodesId.push(expandNodes[i].id); } $.fn.zTree._saveCookie(setting.cookieName, expandNodesId.join(",")); } function onCollapse(event, treeId, treeNode) { // 更新 cookie 中保存的节点 var zTree = $.fn.zTree.getZTreeObj(treeId); var expandNodes = zTree.getNodesByFilter(function(node) { return node.level > 0 && node.open; }); var expandNodesId = []; for (var i = 0; i < expandNodes.length; i++) { expandNodesId.push(expandNodes[i].id); } $.fn.zTree._saveCookie(setting.cookieName, expandNodesId.join(",")); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值