zTree插件的使用以及Jquery动态生成的元素绑定事件

zTree的使用

---

zTree的简介

最近在公司开始做场景开发了，在项目开发中，遇到了树形结构，自己上网找找竟有这种控件，即为zTree。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。

zTree的使用

• 引入资源 ：向页面中引入jQuery的js文件，zTree的js文件和CSS文件
• 页面添加zTree的容器，class属性为ztree

<ul id="treeRole" class="ztree"></ul>

当我们使用ztree控件时，我们可以分为三个部分：

• 第一部分：setting也就是树形结构的配置

var setting = {
        data : {
            simpleData : {
                enable : true,//输入的Nodes数据是否采用简单数据模式(Array)
                idKey : "id",
                pIdKey : "pId",
                rootPId : 0  //用于修正根节点父节点数据
            }
        },
        check : {// 表示tree的节点在点击时的相关设置
            enable : true,// 是否显示radio/checkbox
            chkStyle : "checkbox", // 值为checkbox或者radio表示
            chkboxType : { //勾选 checkbox 对于父子节点的关联关系
                "Y" : "p",
                "N" : "ps"
            },// 表示父子节点的联动效果
            radioType : "level"// 设置tree的分组
        }
    };

• 第二部分：是zNodes节点(可以是json格式，也可以是array格式)
  节点特点：有独一无二的id；有父节点id（pId）；有名字（name）
  到时候你自己的程序后台就可以返回一系列带有该结构的json

    var nodes = [];//先定义一个存放节点的数组
        $.each(zNodes, function(i, n) {//将后台查出的数据进行组装成节点数组
            var node = {};
            node.name = n.name;
            node.id = n.id;
            node.pId = n.porgid;
            nodes.push(node);
        });

⚠️注意： zTree的每一个节点都是一个treeNode对象，treeNode对象经常用到的属性和方法如下：

treeNode: {
  name, //节点显示的文本
  checked, //节点是否勾选，ztree配置启用复选框时有效
  open, //节点是否展开
  icon, //节点的图标
  iconOpen, //节点展开式的图标
  iconClose, //节点折叠时的图标
  id,  //节点的标识属性，对应的是启用简单数据格式时idKey对应的属性名，并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
  pId, //节点parentId属性，命名规则同id
  children, //得到该节点所有孩子节点，直接下级，若要得到所有下属层级节点，需要自己写递归得到
  isParent, //判断该节点是否是父节点，一般应用中通常需要判断只有叶子节点才能进行相关操作，或者删除时判断下面是有子节点时经常用到。
  getPath() //得到该节点的路径，即所有父节点，包括自己，此方法返回的是一个数组，通常用于创建类似面包屑导航的东西A-->B-->C 
  }

zTree的数据源一般有标准数据格式、简单数据格式两种，标准数据格式通过指定节点的chidren属性构建层级关系，而简单数据格式根据根据id，pid属性构建层级关系，我们在应用开发中使用关系型数据库，一般采用的都是简单数据格式。

标准数据格式：

var nodes = [
 {name: "父节点1", children: [
 {name: "子节点1"},
 {name: "子节点2"}
 ]}
]; 

简单数据格式：

var nodes = [
 {id:1, pId:0, name: "父节点1"},
 {id:11, pId:1, name: "子节点1"},
 {id:12, pId:1, name: "子节点2"}
]; 

• 第三部分：初始化 $.fn.zTree.init

ztree = $.fn.zTree.init($("#treeRole"), setting, nodes);

这个控件最主要的可能用起来最麻烦的就是取构造那个treeNode的json
慢慢拼，还是可以拼出来的！！！！

下面先来段小例子（配置鼠标右键事件，显示右键菜单）：

//显示右键菜单  
    function showRMenu(type, x, y) {  
        $("#rMenu ul").show();  
        if (type=="root") {  
            $("#m_del").hide();  
            $("#m_check").hide();  
            $("#m_unCheck").hide();  
        }  
        $("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});  
    }  
    //隐藏右键菜单  
    function hideRMenu() {  
        $("#rMenu").hide();  
    }  

    //鼠标右键事件-创建右键菜单  
    function zTreeOnRightClick(event, treeId, treeNode) {  
        if (!treeNode) {  
            zTree.cancelSelectedNode();  
            showRMenu("root", event.clientX, event.clientY);  
        } else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单  
            if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {  
                zTree.cancelSelectedNode();  
                showRMenu("root", event.clientX, event.clientY);  
            } else {  
                zTree.selectNode(treeNode);  
                showRMenu("node", event.clientX, event.clientY);  
            }  
        }  
    }  

<p><span style="background-color: #fafafa;"><!-- 右键菜单div -->  
 <div id="rMenu" style="position:absolute; display:none;">  
 <li>  
 <ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul>  
 <ul id="m_del" onclick="delPrivilege();"><li>删除</li></ul>  
 <ul id="m_del" onclick="editPrivilege();"><li>编辑</li></ul>  
 <ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul>  
 </li>  
 </div></span></p>  

function reloadTree() {  
        hideRMenu();  
        zTree = $("#tree").zTree(setting, treeNodes);  
    }     

    var zTree;  
    var treeNodes = [];  


$(function() {  
        reloadTree();  

        $("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单  
                "mousedown",  
                function(event) {  
                    if (!(event.target.id == "rMenu" || $(event.target)  
                            .parents("#rMenu").length > 0)) {  
                        $("#rMenu").hide();  
                    }  
                });  
    });  

public void doGetPrivilegeTree() throws IOException{  
        String sId = request.getParameter("id");  
        int treeId = 0;  
        if(sId!=null&&!"".equals(sId)){  
            treeId = Integer.parseInt(sId);  
        }  
        List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);  
        response.setCharacterEncoding("UTF-8");  
        response.getWriter().print(JSONArray.fromObject(lstPriv).toString());  
    }  

/** 
     * 根据节点id，查询其下级节点的数据 
     */  
    @SuppressWarnings("unchecked")  
    @Override  
    public List<Privilege> findPrivilegeTreeById(int treeId) {  
        StringBuffer sbTree= new StringBuffer();  
        sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");  
        sbTree.append("WHERE p.parentId=:treeId ");  
        sbTree.append("AND p.status!=:del ");  

        Map<String,Object> mapTree = new HashMap<String, Object>();  
        mapTree.put("treeId", treeId);  
        mapTree.put("del", Privilege.PRIV_STATUS_DELETE);  

        return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);  
    } 

jquery动态元素绑定事件

---

利用on（）事件绑定 ($(ParentEle).on(“click”,”.thisEle”,function(){})方法。

例：

//class为spread的元素是动态生成的
$("#TBody").on("click",".spread",function(){
            //进行的操作
}