ztree根据ID自动展开到指定节点。

小乞丐 发布于 2013/06/06 16:17
阅读 16K+
收藏 0
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String type= request.getParameter("type");
    %>
<link rel="stylesheet" href="<%=path %>/wzb/portal/knowshare/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/wzb/portal/knowshare/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path %>/wzb/portal/knowshare/js/jquery.ztree.core-3.4.min.js"></script>

<SCRIPT type="text/javascript">
var zTree;
    var setting = {
        isSimpleData: true,
        treeNodeKey: "id",         //设置节点唯一标识属性名称
        treeNodeParentKey: "pid",  //设置节点的父节点唯一标识属性名称
        nameCol: "name",           //设置 zTree 显示节点名称的属性名称,此处默认为Name
        async: {
        enable: true,//启用异步加载
        url:"<%=path %>/wzb/portal/knowshare/action/folder_action.jsp", //异步请求地址
        autoParam:["id"], //需要传递的参数,为你在ztree中定义的参数名称
        otherParam:{"type":"<%=type%>","func":"children"}
     },
     view: {
         dblClickExpand: false,
          autoCancelSelected:false,
          showLine: true,
          selectedMulti: false,
          expandSpeed: (jQuery.browser.msie && parseInt(jQuery.browser.version)<=6)?"":"fast"
     },
     edit: {
        enable: true,
        editNameSelectAll: true
        },
     data: {
      simpleData: {
      enable: true
      }
     },
 callback: {
    onAsyncSuccess: onAsyncSuccess,
    beforeClick: function(treeId, treeNode){
      var zTree = jQuery.fn.zTree.getZTreeObj("ztree");
        zTree.expandNode(treeNode);
            //调用javascript加载页面文档列表
            parent.clickFolderSearch(treeNode.type,treeNode.id);
            
      }
     }
    };
    function onAsyncSuccess(event, treeId, treeNode, msg) {
         cancelHalf(treeNode);
    }
    function cancelHalf(treeNode) {
        var zTree = jQuery.fn.zTree.getZTreeObj("ztree");
        treeNode.halfCheck = false;
        zTree.updateNode(treeNode);   //异步加载成功后刷新树节点
    }
    function dblClickExpand(treeId, treeNode) {
        return treeNode.level > 0;
    }
 jQuery(document).ready(function(){
      //以下为第一次要加载的一级节点
        jQuery.ajax({
            url: "<%=path %>/wzb/portal/knowshare/action/folder_action.jsp?func=children&id=0&type="+<%=type%>,
            type: "post",
            success:function(data){
            parent.jQuery("#fType").val(<%=type%>);
            parent.jQuery("#fId").val(0);
            var json = eval("("+data+")");
            if(json.length > 0){
                jQuery.fn.zTree.init(jQuery("#ztree"), setting, json);
            }
        }
      });
    
    });
     
</SCRIPT>

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="ztree" class="ztree"></ul>
    </div>
</div>

以上是ztree异步树的实现。

现在有这么一个需求,就是我知道任意一个子节点的ID。

然后根据这个ID去展开目录到当前节点。

比如这样子,

我新建一个节点23.



然后确定之后,目录树自动展开节点到23这个目录.


请问该如何实现。。谢谢了~!

加载中
0
罪恶的花生
罪恶的花生
你要知道这个节点所有的parent,然后一个一个遍历加载~
0
loyal
loyal
我记得官方有例子吧?就在查找那一节.
0
Jason阿坚
Jason阿坚
例子里有 我确定
0
pantrick
pantrick
这个太简单了,ttree.expand(Node)
0
zTree
zTree

1. 利用 getNodeByParam 之类的方法可以快速找到你要展开的节点数据

2. 利用 expandNode 方法展开该节点...

Game Over....

歪头儿在帝都
歪头儿在帝都
他意思是展开此节点所有父节点,然后其余节点不展开。
小乞丐
小乞丐
能详细点吗?ztree 不是很熟。又比较急。谢谢了! 能有dome发下gw574813284@sina.com 就更好了!谢谢ztre
0
小乞丐
小乞丐

引用来自“zTree”的答案

1. 利用 getNodeByParam 之类的方法可以快速找到你要展开的节点数据

2. 利用 expandNode 方法展开该节点...

Game Over....

我不知道请求祸胎应该返回什么样的参数。

异步加载返回json。就OK。。

这个一次加载指定节点的json应该是什么样子的呢?

[{id:1,pid:0,isparent:ture},{id:2,pid:1,isparent:true},{id:3,pid:2,isparent:false}]

这样的数据过来能自动打开到3那个节点吗?并让3处于选中状态?

0
zTree
zTree
自动打开 和自动选中需要你在 onAsyncSuccess 触发后自行处理
0
小乞丐
小乞丐

问题已经解决了,我采用了一个比较笨的办法。。

var nodes = treeObj.transformToArray(treeObj.getNodes());
treeObj.reAsyncChildNodes(nodes[0], "refresh");

每次得到所有的node,之后再判断我点击的文件夹对应的node ID,去刷新他的子节点。

不知道那些好的方式怎么实现的。

0
zTree
zTree
用 getNodesByParam 之类的 搜索方法呀,那个方便很多
返回顶部
顶部