建树的原则 : 父类的id 是子类的pid
Ztree 需要的字段: name :树节点的名字 , isParent : 是否为父类 ,设置成 true , id , pid
同步加载:就是将要展示的数据整理成一个list,直接传过去,这些数据已经有父子关系,即上面的建树原则
name id pid
山东省 3700 0
青岛市 3702 3700
崂山区 370212 3702
数据量大的时候用 sql语句 去执行,切记使用循环,容易造成服务器奔溃
XML文件
<select id="findProvinceList" resultType="com.zhiguangyun.modules.datavalid.entity.Region">
SELECT
AREA_NAME AS "areaName",
REGION_CODE AS "regionCode",
PARENTCODE AS "pid",
AREA_NAME AS "name"
FROM
TB_ADMINDIVISION start with REGION_CODE in (
SELECT DISTINCT a.REGION_CODE
FROM
TB_ORGANIZATION b inner join
TB_ADMINDIVISION a
on
(b.area_code=a.REGION_CODE)
)
connect by prior PARENTCODE=REGION_CODE
order by REGION_CODE
</select>
这是为了找到 有医院 的地区,就是为了只显示 地区下有医院的地区
<select id="findOrgList" resultType="com.zhiguangyun.modules.datavalid.entity.Region">
SELECT
ORG_NAME as "orgName",
ORG_CODE as "orgCode",
AREA_CODE as "pid",
ORG_NAME as "name"
FROM
TB_ORGANIZATION where
AREA_CODE = #{id}
order by AREA_CODE
</select>
通过最低一级的地区找到对应的医院(机构)
entity 类
private String areaName; //地区名
private String regionCode; //地区表(tb_admindivision)地区编码
private String orgName; //机构名称
private String orgCode; //机构编码
private String name;
private boolean isParent;
private String id;
private String pid;
注意:
public boolean getIsParent() {
return isParent;
}
public void setIsParent(boolean isParent) {
this.isParent = isParent;
}
默认生成不是这个,要改成这个效果
controller
/**
* 地区机构表数据
*/
@RequestMapping(value = "provinceData")
@ResponseBody /** 使得数据以json 形式 传过去 */
public List<Region> provinceData() {
List<Region> list = new ArrayList<Region>();
List<Region> provinceList = dataSourceService.findProvinceList();
provinceList.get(0).setPid("0");
provinceList.get(0).setIsParent(true);
for (int i = 0; i < provinceList.size(); i++) {
provinceList.get(i).setId(provinceList.get(i).getRegionCode());
provinceList.get(i).setIsParent(true);
list.add(provinceList.get(i));
}
list.addAll(dataSourceService.findOrgList(provinceList.get(provinceList.size()-1)));
return list;
}
jsp页面
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/webpage/framework/include/taglib.jsp"%>
<html>
<head>
<title>地区机构绑定</title>
<meta name="decorator" content="default" />
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/metro.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pid",
}
},
callback : {
onClick : zTreeOnclick
}
};
$(document).ready(function() {
initZTree();
});
function initZTree() {
$.ajax({
url : "${ctx}/datavalid/dataSource/provinceData",
type : "post",
dataType : "json",
success : function(data) {
$.fn.zTree.init($("#ztree"), setting, data);
},
error : function() {
}
});
}
function zTreeOnclick(event, treeId, treeNode) {
if (treeNode.orgName != null) {
window.parent.document.getElementById("orgName").value = ""
+ treeNode.orgName;
window.parent.document.getElementById("orgCode").value = ""
+ treeNode.orgCode;
//关闭此页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
};
</script>
</head>
<body>
<ul id="ztree" class="ztree"></ul>
</body>
</html>
效果: