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

ztree

1、ztree　API网址：http://www.treejs.cn/v3/api.php2、ztree的基本介绍　　zTree是一个依靠jQuery实现的多功能插件树。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、... 查看详情

004ztree入门-bos

使用标准json数据构造ztree 1.使用标准json构造ztree，children属性用于描述子节点，可以无限嵌套下去 2.name属性用于描述节点名称 3.缺点是结构很混乱，不易修改，代码阅读、维护困难 4.示例代码 <!--展示ztree效果:使用标准json数... 查看详情

ztree使用实例

一、获取点击选中的值：<linkrel="stylesheet"href="./static/libs/ztree/css/metroStyle/metroStyle.css"type="text/css"><!--ztree--><scriptsrc="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></ 查看详情

ztree插件动态加载节点

1、ztree官网首页下载所需zip,下载方式为GitHub 方式下载HTTPS: https://gitee.com/zTree/zTree_v3.gitSSH: [email protected]:zTree/zTree_v3.git2、在jsp页面中引入js、css文件<linkrel="stylesheet"href="zTreeStyle/z 查看详情

使用ztree插件构建树形菜单

zTree下载：https://github.com/zTree/zTree_v3目录：就我看来，zTree较为实用的有以下几点：zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。支持JSON数据支持静态和Ajax异步... 查看详情

ztree设置节点checked

1、根据id获取树的某个节点： varzTree=$.fn.zTree.getZTreeObj("mytree"); varnode=zTree.getNodeByParam("id",1);2、设置node节点选中状态：zTree.selectNode(node);3、设置node节点checked选中,有两种方法实现:（1）、zTree.checkNode(node,tru 查看详情

ztree根节点默认打开

1、在生成tree的json数据中，直接给出：open:true的属性;2、treeObj.expandAll(true);3、var zTree = $.fn.zTree.getZTreeObj("ztree");     var node=zTree.getNodeByParam("OrgID",&nbs 查看详情

ztree优秀的jquery树插件

zTree优秀的jquery树插件,文档详细，渲染快使用方法：1、引用zTree的js和css文件　　<linkhref="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"/><scriptsrc="~/Content/zTree_v3/js/jquery.ztree.core.min.js"> 查看详情

ztree第五章，ztree的nodes数据例子

varnodes1=[name:"小学",iconOpen:folderOpen,iconClose:folder,chkDisabled:true,children:[name:"语文",iconOpen:folderOpen,iconClose:folder,children:[name:"人教版",iconOpen:folderOpen,iconClose:folder,childre 查看详情

ztree

 首先在ztree官方网站上根据要求下载Ztree所需要的Dll。  <linkrel="stylesheet"href="../../../css/demo.css"type="text/css"> <linkrel="stylesheet"href="../../../css/zTreeStyle/zTreeStyle.css"type="tex 查看详情

ztreejquery-ztree的基本使用

1.zTree的下载地址　　https://gitee.com/zTree/zTree_v3　　API文档：http://www.treejs.cn/v3/api.php2.引入需要的文件　　<scripttype="text/javascript"src="../libs/ztree/jquery.ztree.core.js"></script>　　<scriptt 查看详情

vue-ztree

在vue中引入zTree，和引入其他组件类似，首先在main.js里将以下3个js引入： import"./js/jquery-3.3.1.min.js";import"../plugins/zTree/js/jquery.ztree.core.min.js";import"../plugins/zTree/js/jquery.ztree.excheck.min.js";这三个js分别是：jQuery，建议从官方网站下... 查看详情

制作一棵ztree

...在做web项目时，常会用到一些树形菜单。在此，我们利用ztree实现树形菜单的效果。zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree的最大优点。　　接下来，我演示一棵简单的ztr... 查看详情

ztree节点重叠或者遮挡

ztree官网：http://www.treejs.cn/v3/api.php问题：zTree节点重叠或者遮挡。分析：由于zTree和bootstrap插件样式冲突导致的树重叠问题。解决：设置zTreeStyle.css文件的.ztreeliul{}属性，在里面加入height:auto。  查看详情

ztree的重点

今天学习了zTree插件，记录一下使用步骤： 1下载，把下载好的目录整个放在项目中文件夹目录：js：一般引这jquery.ztree.all.js和jquery.ztree.core.jscss:：用zTreeStyle里面的zTreeStyle.cssdemo：示例：可以右键--查看框架信息，可以看到网... 查看详情

ztree使用过程(代码片段)

1、引入ZTree所需要的js和css<scriptsrc="<%=path%>/static/js/jquery.ztree.core.min.js"type="text/javascript"></script><scriptsrc="<%=path%>/static/js/jquery.ztree.excheck.min.js"type= 查看详情

requirejs整合ztree

{blockname=‘script‘}<script>require([‘jquery.ztree‘],function(){varzTreeObj;varsetting={view:{showIcon:true},data:{simpleData:{enable:true}},callback:{onClick:zTreeOnClick}};varzNodes=[{id:1,pId 查看详情

ztree

关于 zTree的addNodes()方法   只想说一句 parentNode  的  JSON   是JSON对象，  JSON 对象获取的方法  查看详情