zTree与Layer的结合使用

一、无复选框 & 弹出框内容为本页面中的内容

1、引入zTree的css、js文件

<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
<%-- 引入layer --%>
<script type="text/javascript" src="${basePath }public/layer-v2.3/layer/layer.js"></script>

2、HTML部分代码

<input type="hidden" name="supervision.userids" id="userIds" value="${supervision.userids }"/>
<textarea name="userNames" id="userNames" rows="4"  class="required" onclick="doLoadZTreeNodes();">
    ${supervision.userNames}
</textarea>
<!-- Ztree -->
<div id="layer-zTree" style="display: none;">
    <div style="padding: 10px; height:90%;">
        <ul id="typeTree" class="ztree"></ul>
    </div>
</div>

3、弹出弹框并初始化树

<script type="text/javascript">
    var zTree;
    var setting = {
        data : {   
            simpleData : {
                enable : true, // 设置启用简单数据格式[{id, pId, name}, {id, pId, name}]   
                idKey : "id",  // 节点数据中保存唯一标识的属性名称
                pIdKey : "pId",  // 节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  // 根节点id
            }
        }
    };

    $(document).ready(function(){
        //发送异步请求加载分类信息,更新Ztree节点内容
        var url = "supervision/getZtreeData";
        $.getJSON(url,function(result){
            if(result.state=='1'){
                //访问zTree方法通过数据初始化节点信息
                zTree=$.fn.zTree.init($("#typeTree"),setting,result.data);
            }else{
                alert("初始化失败！");
            }
        });
    });

    /** 显示Ztree以及树上的节点信息 */
    function doLoadZTreeNodes(){
        //页面层
        layer.open({
            type: 1,
            area:['320px', '410px'],
            title: ['请人员', 'background-color:#dae7f5'],
            skin: 'layui-layer-demo', //加上边框
            shadeClose: true,
            btn: ['确定', '取消'],
            content: $('#layer-zTree'),
            yes: function(index, layero){
                doSetSelectedNode(index);
            },
            btn2: function(index){
                layer.close(index);
            }
        });
    }

    /*设置选中的节点*/
    function doSetSelectedNode(index){
        var userIds = "";
        var userNames = "";
        // 1.获得选中的的节点对象
        // getSelectedNodes是zTree中的一个函数,返回值是一个数组        
        var selectedNodes = zTree.getSelectedNodes();
        // 2.获得具体的节点(node)对象
        var node=selectedNodes[0];
        // 3.通过node节点数据更新页面内容
        $("#userNames").val(node.name));
        $("#userIds").val(node.id);
        // 4.关闭弹框
        layer.close(index);    
    }
</script>

4、Java代码

/**
 * 获取部门+人员数据
 * JFinal框架下
 */
public void getZtreeData(){
    JSONArray Ztree = new JSONArray();
    JSONObject node = null;
    // 0.构造根节点
    node = new JSONObject();
    node.put("id", "0");
    node.put("pId", null);
    node.put("name", "所有用户");
    node.put("type", "root");
    Ztree.add(node);
    // 1.遍历部门
    List<Dept> list4Dept = Dept.dao.getAll();
    for (Dept dept : list4Dept) {
        node = new JSONObject();
        node.put("id", dept.getStr("id"));
        node.put("pId", dept.getStr("parent_id"));
        node.put("name", dept.getStr("shortname"));
        Ztree.add(node);
    }
    // 2.遍历用户
    List<User> list4User = User.dao.getAll();
    for (User user : list4User) {
        node = new JSONObject();
        node.put("id", user.getStr("id"));
        node.put("pId", user.getStr("deptid"));
        node.put("name", user.getStr("name"));
        Ztree.add(node);
    }
    JSONObject result = new JSONObject();
    result.put("state", "1");
    result.put("data", Ztree);
    renderJson(result);
}

一、复选框 & 弹出框内容为iframe层

1、引入zTree的css、js文件

<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
<%-- 引入layer --%>
<script type="text/javascript" src="${basePath }public/layer-v2.3/layer/layer.js"></script>

2、HTML部分代码

<input name="userIds" type="hidden" id="userIds" value="${users.ids }"/>
<textarea name="userNames" id="userNames" cols="" rows="6" style="height:170px;" onclick="openTree();">
    ${users.names }
</textarea>

3、弹出弹框并初始化树

<script>
    function openTree(){
        // 顶层
        parent.layer.open({
            type: 2, // 1-在content中写html代码， 2-在content中写src路径
            area: ['330px;', '70%'],
            title: "选择用户",
	    content: "${basePath}dept/openTree",  // iframe访问路径
	    btn:['确定', '取消'],
	    yes: function(index, layero){
	        var formWin = $(layero).find("iframe")[0].contentWindow; // 可用来调用弹出层的函数
	        formWin.doSetSelectedNode(index);
	    },
	    btn2: function(index){
                layer.close(index);
	    }
        });
        // layer.close(index);//关闭弹框
    }
</script>

4、iframe层

<html>
    <head>
        <title>用户部门树</title>
        <meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<%@include file="/base.jsp"%>
	<link href="${basePath }public/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
	<script src="${basePath }public/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
    </head>
    <body>
        <div id="tree">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="typeTree" class="ztree"></ul>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        var zTree;
        var setting = {
            data : {   
                simpleData : {
                    enable : true, //设置启用简单数据格式[{id, pId, name}, {id, pId, name}]   
		    idKey : "id",  //节点数据中保存唯一标识的属性名称
		    pIdKey : "pId",  //节点数据中保存其父节点唯一标识的属性名称
	            rootPId : null,  //根节点id
                    type: "type"
                }
            },
            check: {
                enable: true,   //true / false 分别表示 显示 / 不显示 复选框或单选框
		autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
		chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
		chkboxType: { "Y": "s", "N": "s" }   //勾选 checkbox 对于父子节点的关联关系
                /*
                    Y: 选择复选框时
                    N: 取消复选框选中
                    p: 父级
                    s: 子级
                */
            }
        };

    $(document).ready(function(){
        var url = "${basePath}dept/getTreeData?type=2";
            $.getJSON(url,function(result){
                // 访问zTree方法通过数据初始化节点信息
                zTree=$.fn.zTree.init($("#typeTree"),setting,result);
             });
    });

     /*设置选中的节点*/
    function doSetSelectedNode(index){
        var userIds = "";
        var userNames = "";
        // 1.获得选中的的节点对象
        var nodes = zTree.getCheckedNodes(true);    // 与无复选框函数名有区别
        for ( var i in nodes) {
            // 2.只获取用户数据
            if (!nodes[i].isParent && nodes[i].type == "user") {
                userIds += nodes[i].id + ",";
                userNames += nodes[i].name + "; ";
            }
        }
        // 3.通过node节点数据更新页面内容(若此iframe的parent页面只有一个则不需要[0])
        parent[0].$("#userNames").val(userNames.substring(0, userNames.length -1));
        parent[0].$("#userIds").val(userIds.substring(0, userIds.length -1));
        // 4.关闭弹框
        parent.layer.close(index);  
	</script>
</html>

5、Java代码

/**
  * 获取树形数据
  * type = 2 查询到用户级, 其他则查询到部门级
  * JFinal框架中
  */
public void getTreeData(){
    String type = getPara("type");
    JSONArray array = new JSONArray();
    // 构造根节点
    JSONObject base = new JSONObject();
    base.put("id", "0");
    base.put("pId", null);
    if (StringUtil.isNotBlank(type) && "2".equals(type)) {
        base.put("name", "所有用户");
    }else{
        base.put("name", "所有部门");
    }
    base.put("type", "root");
    array.add(base);
    // 获取部门数据
    List<Dept> list = Dept.dao.getAllDeptBy12();
    for (Dept dept : list) {
        JSONObject obj = new JSONObject();
        obj.put("id", dept.get("id"));
        obj.put("pId", dept.get("parent_Id"));
        obj.put("name", dept.get("shortName"));
	obj.put("type", "dept");
	array.add(obj);
        // 获取用户数据
        if (StringUtil.isNotBlank(type) && "2".equals(type)) {
            List<User> list2User = User.dao.getListByOffice(obj.getString("id"));
            for (User user : list2User) {
                JSONObject obj2User = new JSONObject();
                obj2User.put("id", user.get("id"));
                obj2User.put("pId", user.get("deptId"));
                obj2User.put("name", user.get("name"));
                obj2User.put("type", "user");
                array.add(obj2User);
            }
        }
    }
    renderJson(array);
}