ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)

引入对应的js和css，没有这些文件的小伙伴可以点击
http://www.treejs.cn/v3/api.php 下载

<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css"/>
    <script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script>
    <script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.core-3.5.js"></script>

核心代码:

<body>
            <div style="width:15%;">
                <ul id="demotree" class="ztree"></ul>
            </div>
</body>

<script type="text/javascript">
    var setting = {
                isSimpleData : true, //数据是否采用简单 Array 格式，默认false
                treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
                treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
                showLine : true, //是否显示节点间的连线
<%--                async:{--  zTree官方文档说明  异步加载必须写上这个参数  但是我这里没写T-T 一样的可以 不知道我是不是假的异步加载 本人在这里也有疑问 %>  
<%--                    enable: true,--%>
<%--                    url: "<%=basePath%>department/testYbTree2.do",--%>
<%--                    autoParam: ["id"]--%>
<%--                },--%>
                callback :{
                    onClick : function(event, treeId, treeNode, clickFlag) {  
                        // 判断是否父节点  
                        if(!treeNode.isParent){  
                            //alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);  
                            $.ajax({
                                url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
                                data:{"pid":treeNode.id},
                                error: function () {//请求失败处理函数
                                    alert('请求失败');
                                },
                                success:function(data)
                                    { //添加子节点到指定的父节点
                                        var jsondata= eval(data);
                                        if(jsondata == null || jsondata == ""){
                                            //末节点的数据为空   所以不再添加节点  这里可以根据业务需求自己写
                                            //$("#treeFrame").attr("src",treeNode.url);
                                            }
                                        else{
                                                var treeObj = $.fn.zTree.getZTreeObj("demotree");
                                                //treeNode.halfCheck = false;
                                                var parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
                                                newNode = treeObj.addNodes(parentZNode,jsondata, false);
                                            }
                                    }
                                });
                        } 
                    }
                },
                //checkable : true //每个节点上是否显示 CheckBox
                };

        var zTree;
        var treeNodes;

        $(function(){
                $.ajax({
                    async : false,
                    cache:false,
                    type: 'POST',
                    dataType : "json",
                    url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
                    error: function () {//请求失败处理函数
                        alert('请求失败');
                    },
                    success:function(data){ //请求成功后处理函数。
                    treeNodes = eval(data); //把后台封装好的简单Json格式赋给treeNodes
                }
                });
            });


        //初始化节点
        $(document).ready(function(){
            $.fn.zTree.init($("#demotree"), setting, treeNodes);
        });
</script>

ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)

Guess you like