一、
后台获取数据
public List<Map<String, Object>> treeData(HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
TbSyUser user = UserUtils.getUser();
TbSyDepartment depart = new TbSyDepartment();
depart.setId(user.getDepart().getId());
List<TbSyDepartment> list = tbSyDepartmentService.findDepartList(depart);
for (int i=0; i<list.size(); i++){
TbSyDepartment e = list.get(i);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
String pids = "";
if(e.getId().equals(user.getDepart().getId())){
map.put("pId", '0');
pids = e.getDepartPids();
} else {
map.put("pId", e.getParent().getId());
pids = "0,";
}
map.put("pIds", e.getDepartPids().replaceAll(pids, "0,"));
map.put("name", e.getDepartName());
map.put("code", e.getDepartCode());
String[] rank = e.getDepartPids().replaceAll(pids, "0,").split(",");
if(rank.length<2){
map.put("open", true);
}else{
map.put("open", false);
}
mapList.add(map);
}
return mapList;
}
页面:
<script type="text/javascript" src="${ctxStatic }/js/jquery-1.8.3.min.js"></script>
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${ctxStatic }/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: onClick,
onDblClick:onDblClick
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
$(function($) {
$.ajax({
type : 'POST',
url : '${ctx}/yywh/tbSyDepartment/treeData', // 请求的action路径
error : function() {// 请求失败处理函数
},
success : function(data) {
//console.log(data);
//var d = eval($.parseJSON(data));
//console.log(d);
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
}
});
});
function onCheck(){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
nodes=treeObj.getSelectedNodes();
for(var i=0;i<nodes.length;i++){
if(nodes[i].isParent != true){
$("#id").attr("value",nodes[i].id);
$("#name").attr("value",nodes[i].name);
$("#pId").attr("value",nodes[i].pId);
$("#code").attr("value",nodes[i].code);
}
}
}
function onClick(event, treeId, treeNode) {
$("#id").attr("value",treeNode.id);
$("#name").attr("value",treeNode.name);
$("#pId").attr("value",treeNode.pId);
$("#code").attr("value",treeNode.code);
<%-- top.Dialog.close();--%>
};
function onDblClick(event, treeId, treeNode) {
$("#id").attr("value",treeNode.id);
$("#value").attr("value",treeNode.name);
$("#pId").attr("value",treeNode.pId);
$("#code").attr("value",treeNode.code);
parent.$("#${name}Id").val($("#id").val());
parent.$("#${name}Name").val($("#name").val());
parent.$("#${name}code").val($("#code").val());
parent.$("#${name}pId").val($("#pId").val());
parent.$.jBox.close(true);
}
</script>
<div>
<ul id="treeDemo" class="ztree"></ul>
<input type="hidden" id="id">
<input type="hidden" id="name">
<input type="hidden" id="pId">
<input type="hidden" id="code">
</div>
效果图:
二、点击节点跳转页面
$(".st_treenav a").click(function(){
$(".st_treenav a").css({background:'none'});
$(this).css({background:"#f35844",color:"#fff"});
});
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
callback:{onClick:function(event, treeId, treeNode){
var id = treeNode.id;
$("#officelist",window.parent.document).attr("src","${ctx}/yywh/tbSyDepartment/list?parent.id="+id+"&parent.departName="+treeNode.name);
}
}
};
//刷新
refreshTree();
function refreshTree(){
$.getJSON("${ctx}/yywh/tbSyDepartment/treeData",function(data){
zTreeObj=$.fn.zTree.init($("#ztree"), setting, data);
});
}
效果图:
三、带复选框的
var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
tree.checkNode(node, !node.checked, true, true);
return false;
}}};
<%--角色-菜单--%>
var zNodes=[
<c:forEach items="${menuList}" var="menu">{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.menuName:'权限列表'}"},
</c:forEach>];
<%--初始化树结构--%>
var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
<%--不选择父节点--%>
tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
<%--默认选择节点--%>
var ids = "${mList}".split(",");
for(var i=0; i<ids.length; i++) {
var node = tree.getNodeByParam("id", ids[i]);
try{tree.checkNode(node, true, false);}catch(e){}
}
<%--默认展开全部节点--%>
tree.expandAll(true);
效果图: