ztree

Posted 2020-10-15 努力奋斗的喵喵

1、ztree　API网址 ：http://www.treejs.cn/v3/api.php

2、ztree的基本介绍

　　zTree 是一个依靠 jQuery 实现的多功能插件树。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等

3、应用小实例

　　使用前jsp页面应引用zTree的js文件：

　　　　<link rel="stylesheet" href="${basePath}/css/zTreeStyle.css">
　　　　<script src="${basePath}/js/jquery.ztree.all-3.5.min.js"></script>   

　　实现目标 —— 树展开，所有节点的文本均显示为黑色，发生修改的节点（取消原来勾选的或者是勾选原来未勾选的）的文本变红色：

<div style="height:245px;overflow:auto;">
　　<ul id="tree" class="ztree"></ul>
</div>

var setting = {
    check : {
        enable : true,
        chkboxType:{Y: ‘s‘, N: ‘s‘}
    },
    data : {
        simpleData : {
            enable : true
        }
    },
    callback: {
        onCheck: zTreeonCheck
    }
};
var zNodes = ${TreeBeans};
var zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
function zTreeonCheck(event, treeId, treeNode){
    var nodes=zTree.getCheckedNodes(true);
    var  v="";
    for(var i=0;i<nodes.length;i++){
        v+=nodes[i].id + ",";
    }
    var vArray= v.split(",");
    var id = treeNode.id;
    if((vArray.indexOf(id + "") != -1 && !treeNode.checked) || (vArray.indexOf(id + "") == -1 && treeNode.checked)){
        zTree.setting.view.fontCss["color"] = "red";
    }else{
        zTree.setting.view.fontCss["color"] = "black";
    }
    zTree.updateNode(treeNode);
    if (treeNode.isParent){
        for(var obj in treeNode.children){
            getNode(treeNode.children[obj]);
        }
    }
} 

自定义model：

public class TreeBean {
    private Long id = 1l;
    private Long parentId = 1L;
    private String name = "";
    private boolean isParent;
    private boolean checked = false;private boolean open = false;
    private boolean leaf = false; 
　　private Collection<TreeBean> children = null;
}        

控制层代码：

List<TreeBean> TreeBeans
model.addAttribute("TreeBeans", JSONArray.fromObject(TreeBeans).toString());

生成树代码：

private List<TreeBean> getBean(List<Node> nodes) {
　　Map<Long, TreeBean>hashMaps = new LinkedHashMap<Long, TreeBean>();
   for (Node node : nodes) {
   　　TreeBean treeBean = new TreeBean();
      treeBean.setId(node.getId());
      treeBean.setName(node.getName());
      treeBean.setParentId(node.getParentId());
      ....
      hashMaps.put(node.getId(), treeBean);
   }
   Set<Entry<Long, TreeBean>> entrySet = hashMaps.entrySet();
   Set<Long> removeIds = new LinkedHashSet<Long>();
　 for (Entry<Long, TreeBean> entry : entrySet) {
　　　　判断是否有父节点，如果没有continue，如果有就找到父节点，将当前节点添加到父节点的children属性中，在removeIds中添加当前节点id
       ......
   }
   for (Long id : removeIds) {
       hashMaps.remove(id);
   }
   return new LinkedList<TreeBean>(hashMaps.values());
}