zTree第二次

需要注意的是：动态生成的树节点数据不是在后面拼接的，而是直接在done里面

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
  <!-- 分别导入jquery，zTree的两个js文件，其中excheck是显示复选框一定要有的 -->
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
 </head>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
   <input id="btn1" value="获取选中节点id" type="button"/>
</div>
<script>
    var treeNodes = [];
    $(function(){
        $.ajax({
            url: "http://127.0.0.1:8081/uris",
            type: "GET",
            dataType: "json"
        }).done(function(result){
        
            var da = result.data;
            for (var i = 0; i < da.length;i ++) {
                var node = {};
                node.id=da[i].id;
                node.superiorsId=da[i].superiorsId;
                node.uriName=da[i].uriName;
                if (da[i].id===112) {
                    node.checked="true";
                }
                treeNodes.push(node);
            }
            // 树是在done里面生成,而不是在后面,这个ready写在此处
            $(document).ready(function(){
                zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)
            });
            console.log(treeNodes);
        })
    })
    var zTreeObj;
    // function ajaxDataFilter(treeId,parentNode,responseData) {
    //     return responseData.data;
    // }
    var setting = {
        // 开启复选框,其他不写就都是默认
        check: {
            enable: true
        },
        // name:"uriName"和取别名差不多
        data: {
            key:{
                name:"uriName"
            },
            // 开启简单数据,其他默认
            // idKey:"id",pIdKey:"superiorsId"也差不多是取别名
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "superiorsId",
                rootPId: 0
            }
        }
    }
    
    // 点击按钮后获取选中的数据
    $("#btn1").on("click", function(){
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo");  
        var nodes=treeObj.getCheckedNodes(true);      
        for(var i=0;i<nodes.length;i++){             
            console.log(nodes[i].id);
        }
    })
</script>
</BODY>
</HTML>

如果不是要一开始默认选中，而只是显示树节点，可以用更简单的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery-3.4.1.js"></script>
        <script type="text/javascript" src="jquery.ztree.core.js"></script>
        <script type="text/javascript" src="jquery.ztree.excheck.js"></script>
    </head>
    <body>
        <div>
           <ul id="treeDemo" class="ztree"></ul>
           <input id="btn1" value="获取选中节点id" type="button"/>
        </div>
        
        <script>
            var treeNodes = "";
            $(function(){
                $.ajax({
                    url: "http://127.0.0.1:8081/uris",
                    type: "get",
                    dataType: "json"
                }).done(function(result){
                    console.log(result.data);
                    treeNodes = result.data;
                    $(document).ready(function(){
                        zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,treeNodes)
                    });
                    
                })
            })
            
            var zTreeObj;
            var setting = {
                // 开启复选框,其他不写就都是默认
                check: {
                    enable: true
                },
                // name:"uriName"和取别名差不多
                data: {
                    key:{
                        name:"uriName"
                    },
                    // 开启简单数据,其他默认
                    // idKey:"id",pIdKey:"superiorsId"也差不多是取别名
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "superiorsId",
                        rootPId: 0
                    }
                }
            }
            
            $("#btn1").on("click", function(){
                var treeObj=$.fn.zTree.getZTreeObj("treeDemo");  
                var nodes=treeObj.getCheckedNodes(true);      
                for(var i=0;i<nodes.length;i++){             
                    console.log(nodes[i].haveSuperiors);
                }
            })
        </script>
    </body>
</html>

posted on 2019-12-30 11:27  我欲皆真  阅读(182)  评论(0)  编辑  收藏  举报

导航