码迷,mamicode.com
首页 > 其他好文 > 详细

ztree

时间:2017-11-22 15:12:42      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:权限   array   等等   组合   目标   ret   entryset   cti   基本   

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

 

ztree

标签:权限   array   等等   组合   目标   ret   entryset   cti   基本   

原文地址:http://www.cnblogs.com/llfddmm/p/7879125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!