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里边加上就可以了!
更多推荐
多表联查加载zTree树结构
发布评论