• ztree


    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()); }
  • 相关阅读:
    数据库mysql中`的作用
    省,市,区三级下拉框联动以及localStorage当做缓存优化
    仿头条新闻app,实现下拉刷新,上拉加载分页
    js获取checkbox多选表单
    这两天的工作:webApp接口对接开发
    我做的一个考试资料app的控制器和后台
    我做的cms后台管理1,商业网站
    thinkphp简单后台cms的操作逻辑
    thinkphp后台登陆自动监测方法_initialize
    topthink有时间看看
  • 原文地址:https://www.cnblogs.com/llfddmm/p/7879125.html
Copyright © 2020-2023  润新知