zTree的展示

一、

后台获取数据

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);

效果图：