多表联查加载zTree树结构

zTree简单的数据加载就是 查询数据的id和pId ，然后在setting里边设置idKey和pIdKey就可以了。

最近写多表查询的时候就懵了，因为表之间有关联关系 ，我用的是三张表， 有外键关系 也可以简历上下级关系。三个表有两个pId，而之前的那种方法显然是不适用的。

zTree复杂数据的json格式：

var zNodes =[
            { name:"父节点1 - 展开", open:true,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]}
        ];

复杂的结构可以拼接成这种格式的json数据，试过循环没成功，捣鼓了一天。

使用框架是SSM框架，用的数据库是MySQL，网上说用递归查询，然而MySQL是没有递归方法，只能写存储过程。

最后使用mybatis的映射关系，一对多、多对多等关系才实现。

树结构为 每个公司 对应多个部门 每个部门对应多个员工。 三表之间有外键关联

entity代码：

company：

public class Company {

    private int company_id;//公司id
    private String company_name;//公司名称
    private String remark;//备注信息
    private int user_id;
    private String name;
    private int dept_id;
    private String dept_name;

    private List<Dept> dept;

    getter/setter---省略--

    }

这里要写上多端的集合对象，因为公司是一端。

dept:

public class Dept {

    private int dept_id; //部门id
    private String dept_name;//部门名称
    private String name;//部门别名
    private int company_id;//所属公司id
    private String remark;//备注信息

    private String company_name;

    private List<User> user;

}

这里同上 用户也是多端。

用户的不需要加集合对象，写好字段就可以了，这里我就不贴了，字段太多了。

表外键关系为 用户关联部门id，部门关联公司id。

CompanyMapper：

    //公司
    @Select("select company_id,company_name as name from sys_company ")
    @Results({
        @Result(property="company_id",column="company_id"),
        @Result(property="dept",column="company_id",javaType=List.class,many=@Many(select="queryOneToManyDept"))
    })
    List<Company> queryOneToManyCompany();

    //部门
    @Select("select dept_id,dept_name as name from sys_dept where company_id=#{company_id}")
    @Results({
        @Result(property="dept_id",column="dept_id"),
        @Result(property="user",column="dept_id",javaType=List.class,many=@Many(select="queryOneToManyUser"))
    })
    List<Dept> queryOneToManyDept(int company_id);

    //用户
    @Select("select user_id,name from sys_user where dept_id=#{dept_id}")
    List<User> queryOneToManyUser(int dept_id);

不懂的地方 百度看看 我也自己琢磨的。

CompanyService:

    public List<Company> queryOneToManyCompany(){
        return mapper.queryOneToManyCompany();
    }

这里只写最顶端的company，其他的都不用写，它会关联执行的。

CompanyController：

/**
     * 一对多查询公司-部门-员工 实现树结构
     * @return
     */
    @RequestMapping(value="queryCompanyOneToMany",method=RequestMethod.POST)
    @ResponseBody
    public List<Company> queryOneToMany(){
        List<Company> cList=service.queryOneToManyCompany();
        return cList;
    }

这里的数据加载出来是：

[
        {
                "company_id": 1, 
                "company_name": "总公司", 
                "remark": null, 
                "user_id": 0, 
                "name": null, 
                "dept_id": 0, 
                "dept_name": null, 
                "dept": [
                        {
                                "dept_id": 1, 
                                "dept_name": "技术部", 
                                "company_id": 0, 
                                "remark": null, 
                                "company_name": null, 
                                "user": [ ]
                        }, 
                        {
                                "dept_id": 2, 
                                "dept_name": "运营部", 
                                "company_id": 0, 
                                "remark": null, 
                                "company_name": null, 
                                "user": [
                                        {
                                                "user_id": 4, 
                                                "username": null, 
                                                "name": "静静", 
                                                "dept"
                                        }
                                ]
                        }, 
                        {
                                "dept_id": 3, 
                                "dept_name": "商务部", 
                                "company_id": 0, 
。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。

数据太长删掉了无关的属性，数据结构上是正确的，但是不满足zTree的结构。

dept和user 都要换成children才可以加载树结构！

如下：

{ name:"父节点1 - 展开", open:true,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},

所以在页面上就要把json数据里的dept和user这两个对象变成children。

jsp页面：

<div class="zTreeDemoBackground left" id="ztree">
    <ul id="ztreeDemo" class="ztree"></ul>
</div>
</body>
<script type="text/javascript">
var zTreeObj;
//树属性的定义  
var setting = {  

};


var zNodes;

$.ajax({
    async:false,
    cache:false,
    type:'post',
    dataType:'json',
    url:'${ctx}/queryCompanyOneToMany',
    success:function(data){
        for(var i=0;i<data.length;i++){

            for(var j=0;j<data[i].dept.length;j++){
                var userChildren=data[i].dept[j].user;
                delete(data[i].dept[j].user);
                data[i].dept[j].children=userChildren;
            }
            var deptChildren=data[i].dept;
            delete(data[i].dept);
            data[i].children=deptChildren;
            console.log(data);
        }
        zNodes=data;
    }
});

$(function() {  
  $.fn.zTree.init($("#ztreeDemo"), setting, zNodes);  
});

</script>

改json属性名的时候要把属性值拿出来， 然后删掉属性名，再把拿出来的属性值放到新的属性名里！

这样就完成了，效果如下：

需要设置什么在setting里边加上就可以了！