首页 > 其他 > 详细

ztree使用(二) 前端解析

时间:2021-05-08 00:43:18      阅读:17      评论:0      收藏:0      [点我收藏+]
  
  //解析树
  <div class="content_wrap" style="width: 20%;height:100%;border-right:1px #000000 solid;position:fixed;"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div>
  //右侧展示列表 <iframe id="dataframe" src="url?parentCode=0" style="height:800px;width:84%;margin-left:21%;padding: 10px;border:0;scrolling : no;"></iframe>//加载树
    var setting = {
        view: {
            showIcon: false
        },
        async : {
            enable : true,
            type : "post",
            url : "url",//获取数据
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pidKey : "pId",
                rootPId : 0
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    }; 
    $.fn.zTree.init($("#treeDemo"), setting);
    
    function zTreeOnClick() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        var childCode = nodes[0].id;//节点code  父节点id nodes[0].pId
     //点击节点请求后台获取该节点下的子节点数据并在右侧列表中展示
     document.getElementById("dataframe").src="url?parentCode="+childCode; };

页面的效果

技术分享图片

 

需要引用的js

技术分享图片

 

 技术分享图片

 

ztree使用(二) 前端解析

原文:https://www.cnblogs.com/ch94/p/14741466.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!