前段html页面`
<div style="position: relative;margin:90px;">
<input id="orgName" class="org-select" onclick="showTree()" readonly >
<!-- 模拟select点击框 以及option的text值显示-->
<i class="trg"style="position: absolute;"></i>
<!-- 模拟select右侧倒三角 -->
<input id="orgCode" type="hidden" name="orgCode" />
<!-- 存储 模拟select的value值 -->
<!-- zTree树状图 相对定位在其下方 -->
<div class="ztree" style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
<ul id="treeDemo"></ul>
</div>
</div>
后端方法,我这边是写死的几个数据,可以动态从数据库获取数据,替换掉我写死的。子节点的pId对应父节点的id
@PostMapping("/list/ztree")
@ResponseBody
public List toRoleListZtree(){
List list=new ArrayList();
ZTree zTree1=new ZTree(1,0,"父节点1");
ZTree zTree2=new ZTree(2,0,"父节点2");
ZTree zTree3=new ZTree(11,1,"子节点11");
ZTree zTree4=new ZTree(12,1,"子节点12");
ZTree zTree5=new ZTree(21,2,"子节点21");
ZTree zTree6=new ZTree(22,2,"子节点22");
list.add(zTree1);
list.add(zTree2);
list.add(zTree3);
list.add(zTree4);
list.add(zTree5);
list.add(zTree6);
return list;
}
js部分
//树状图展示
var setting = {
data: {
simpleData: {
enable: true
}
},
//回调
callback: {
onClick: zTreeOnClick
},
view: {
fontCss: { fontSize: "14px" }
}
};
//节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
$('#orgName').val(treeNode.name);
$('#orgCode').val(treeNode.Id)
hideTree();
};
$(document).ready(function () {
//初始组织树状图
ztreeFz()
});
//动态从后台获取值
function ztreeFz() {
//这边由于我的页面使用freemarker魔板所以ajax写法不一样,html页面职业写ajax就行,function就是ajax的success
$.post(
"/jwUser/list/ztree",
{},
function(result) {
$.fn.zTree.init($("#treeDemo"), setting, result);
},
"json");
}
//下拉框显示 隐藏
function showTree(){
if($('.ztree').css('display') == 'none'){
$('.ztree').css('display','block');
} else{
$('.ztree').css('display','none');
}
$("body").bind("mousedown", onBodyDownByActionType);
}
function hideTree() {
$('.ztree').css('display','none');
$("body").unbind("mousedown", onBodyDownByActionType);
return false;
}
//区域外点击事件
function onBodyDownByActionType(event) {
if (event.target.id.indexOf('treeDemo') == -1){
if(event.target.id != 'selectDevType'){
hideTree();
}
}
}
效果展示