zTree的操作。封装好

最新推荐文章于 2021-02-26 08:04:34 发布

望千军

最新推荐文章于 2021-02-26 08:04:34 发布

阅读量1k

点赞数

分类专栏：碎片化文章标签： zTree-前端

本文链接：https://blog.csdn.net/wang460079968/article/details/49383873

版权

碎片化专栏收录该内容

8 篇文章 0 订阅

订阅专栏

zTree通用操作。。
var ProblemClue = function() {
    var t = {
           //响应选择zTree事件
            selectZtree : function(param) {
                $("#"+param+"Content" ).slideDown("fast");
                $("body").bind("mousedown" ,param, t.onBodyDown);
                $( "#allLower").attr("disabled" , "disabled");
            },
            //组织树鼠标失去焦点
            onBodyDown : function(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == event.data+"Content" || $(event.target).parents("#" +event.data+"Content").length > 0)) {
                    $("#"+event.data+"Content" ).fadeOut("fast");
                    $("body").unbind("mousedown" ,event.data, t.onBodyDown);
                    $("#allLower").attr("disabled" , false);
                }
            },
            //初始化树
            initZTree : function(id,url) {
                ComTree.initTree({
                    divContainer : id,
                    url : url,
                    p : {
                    },
                    enable : false,
                    async : false, // false同步 true异步
                    onClick : t.zOnClick
                });
            },
            //回调点击
            zOnClick : function(event, treeId, treeNode) {
                var regx=/\w+/ ;
                var id=regx.exec(treeId);
                var names = treeNode.name;
                var ids = treeNode.id;
                var targets = $("#" +id[0]);
                targets.val( names);
                targets.attr( "ids", ids);
            },
          //初始化树。param1：页面上ul的id  param2：后台访问的路径，注意返回的json格式当符合
          t.initZTree("#level-tree " ,'inc/getCodeTreeByParentId')
 }
    return t;
}();

调用：
我这是闭包
t.initZTree("#dealMethod2-tree" ,'inc/getCodeTreeByParentId', "Z001202");

页面：id按格式来即可。input的id  xx  div的id  xxContent  ul的id  xx-tree  选择事件中加上参数xx即可。。如ProblemClue.selectZtree('level')
<input type= "text"  id ="level" ids="{{targets}}" value="{{targets}}" class="party-form-control" onclick="ProblemClue.selectZtree('level')" />
<div id="levelContent" style=" display: none; width : 220px; position : absolute; background-color: white; overflow : auto; border: 1px solid #D3D3D3; z-index: 11000;" >
 <ul id="level-tree" class="ztree" style=" margin-top: 0; height : 400px;">
 </ul>
 </div>


精髓之处---后台js是封好的。不必每生成一棵树再写一次js事件。。这个js是我封好的。通过正则和点击事件来获取id。。只要引入zTree的包。按这个格式来应该没问题。后台注意封装好返回的json格式