ztree | 易学教程

Uncaught TypeError: Cannot read property 'init' of undefined on zTree_v3 library

阅读更多关于 Uncaught TypeError: Cannot read property 'init' of undefined on zTree_v3 library

I got problem with using zTree library. this is my code <script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery.ztree.core-3.5.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"Custom Icon 01", open:true, iconOpen:"<?php echo base_url()?>asset/img/diy/1_open.png", iconClose:"<?php echo base_url()?>asset/img/diy/1_close.png"}, { id:11, pId:1, name:"leaf node 01", icon:"<?php echo base

Ztree + bootstarp-table 使用

阅读更多关于 Ztree + bootstarp-table 使用

Ztree + bootstarp-table 使用一. Ztree 　　1.引入js/css文件　　 Ztree官网  <link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/default/zTreeStyle.css}"> <link th:href="@{/common/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/> <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.core-3.5.js}"></script>  <script th:src="@{/js/jquery.js}"></script> 　　2.页面定义/html <div > <ul id="tree" class="ztree"></ul> </div> 　　3.页面初始化js $(function () { var setting = { view: { // fontCss : {"font-size":"26px","color":"red"} }, check: { //开启jquery.ztree.excheck-3.5.js /

Java构造树形结构数据

阅读更多关于 Java构造树形结构数据

最近遇到一个需要构造树形结构的需求，就是提供给类似zTree组件的后端接口，在网上找到一种实现方式，但是博主的实现方式(https://blog.csdn.net/aeaiesb/article/details/40783361)，实体类都是Node，我们真实需求中实体类的属性不一定都和博主的相同，那么能不能改造一下呢？下面是改造后的结果。所有要实现树形结构的实体类继承NodeHelper类 /** * @Author: gu * @Date: 2019-09-24 20:54 * @Desc: 树形结构基类 */ @Data public class NodeHelper { public Integer id; public Integer parentId; public List<? extends NodeHelper> child; } import com.alibaba.fastjson.JSON; import com.alibaba.model.base.NodeHelper; import com.alibaba.test.model.NodeTestVo; import java.util.ArrayList; import java.util.List; /** * @Author: gu * @Date: 2019-09-24 19:42 *

ztree 树状图——例

阅读更多关于 ztree 树状图——例

效果： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>树状图</title> <link rel="stylesheet" href="css/amazeui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/amazeui.min.js"></script> <script src="js/app.js"></script> <script src="js/jquery.ztree.core-3.5.js"></script> <script src="js/jquery.ztree.excheck-3.5.js"></script> <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css"> </head> <body> <div class="am-modal-no-btn" tabindex="-1"

ztree实现拖拽移动和复制

阅读更多关于 ztree实现拖拽移动和复制

1、官网下载ztree： http://www.treejs.cn/v3/api.php 2、引入jquery.ztree.all.min.js 注意，这是基于jQuery的插件，请引入相关js 3、设置setting var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "parentId", rootPId: -1 }, key: { url: "nourl", name: "fieldName" } }, check: { nocheckInherit: true }, callback: { // 树的点击事件 onClick: zTreeOnClick, // 拖拽结束事件 onDrop: zTreeOnDrop }, // 开启拖拽 edit: { drag: { // 打开复制功能，Ctrl+鼠标左键点击后拖拽 isCopy: true, // 打开移动功能，鼠标左键点击后拖拽 isMove: true }, // 打开编辑 enable: true, // 关闭删除 showRemoveBtn: false, // 关闭修改名称 showRenameBtn: false } }; 4、拖拽后函数 function zTreeOnDrop (event, treeId,

zTree树状结构

阅读更多关于 zTree树状结构

1.定义zTree的结构 var setting = { data : { simpleData : { enable : true, idKey : "id", //节点数据中保存唯一标识的属性名称 pIdKey : "parentId", //节点数据中保存其父节点唯一标识的属性名称 rootPId : null //根节点id }//json 格式javascript对象 } }//json 格式的javascript对象 2.将后台返回的数据展示在页面 //修改ZTree的CSS样式 function doOpenZTree(){ $("#menuLayer").css("display","block"); //将后台取到的数据展示到ZTree中 var url="menu/doGetNodes.do"; $.getJSON(url,function(result){ if(result.state==1){ zTree = $.fn.zTree.init( $("#menuTree"), setting,result.data); }else{ alert(result.message); } }); 3.注：（1）后台返回的数据的封装类，封装数据需要Object data; 这个变量名一定是data, （2）从2 中可以看出，前台需要的数据起码有 id

vue对vue-giant-tree进行节点操作

阅读更多关于 vue对vue-giant-tree进行节点操作

vue 项目中使用到了vue-giant-tree这个使用ztree封装的树形插件，在对其节点进行操作时遇到了无法向传统的jquery那样获取到ztreeObj；而导致了无法控制节点dom；浪费了许多时间，so特此记录一哈 Vue-Giant-Tree Vue-Giant-Tree是最ztree的一个封装；用于vue 项目中，该ztree的好处就是不需要自己将数据拼装为树形结构。只需要给他一个带有子父级关系的数组即可；这就大大减少了拼装数据的麻烦（直接从数据库查询出来就可以使用）如： nodes : [ { id : 1 , pid : 0 , name : "随意勾选 1" , open : true } , { id : 11 , pid : 1 , name : "随意勾选 1-1" , open : true } , { id : 111 , pid : 11 , name : "随意勾选 1-1-1" } , { id : 112 , pid : 11 , name : "随意勾选 1-1-2" } , { id : 12 , pid : 1 , name : "随意勾选 1-2" , open : true } , { id : 121 , pid : 12 , name : "随意勾选 1-2-1" } , { id : 122 , pid : 12 , name

Spring MVC使用@ResponseBody返回JSON数据406以及乱码问题解决方案

阅读更多关于 Spring MVC使用@ResponseBody返回JSON数据406以及乱码问题解决方案

其实前面一篇关于zTree返回JSON数据的文章已经有一种解决方案了，但是当我今天在新公司搭建新环境的时候，发现又不行了，所以觉得之前那个应该不是最优的解决方案。今天主要提供另一个解决@ResponseBody返回JSON数据，页面抛出406错误的解决方案。第一步，引入包： <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.2.3</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.2.3</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.2.3</version> </dependency> 第二步，修改Spring MVC的配置文件（高能预警：切记需要使用3

基于JFinal实现的权限管理系统 JFinalUIB

阅读更多关于基于JFinal实现的权限管理系统 JFinalUIB

项目用到了众多的开源组件，还有一些是网络分享的学习示例代码片段，感谢他们!!! JFinal高级学习交流QQ群： 309647612 代码库地址： http://git.oschina.net/dongcb678/JfinalUIB.git 项目背景： 14年5月份学习JFinal的时候出于练手的目的开发，分享给大家学习和使用受益人群：对于初学JFinal的朋友来说是很全面的示例项目对于初学权限设计的人来说，是基于RBAC模型的简单实现你也可以基于它来做项目，它只是做了绝大部分项目都应该实现的基础功能能学习到哪些东西：比较全面的基于URL权限控制和实现，细化到每一个功能URL授权，每一个按钮的显示和隐藏如何整合JFinal 和 beetl模板，beetl的基本使用、函数注册调用如何自己实现分页、动态条件的查询，结合JFinal分页方法进行分页对象的扩展 JFinal的Handler和Interceptor使用全局异常拦截和错误处理机制三个版本三套UI的使用和扩展、改造，支持基于JQuery Form的Ajax交互，表单数据校验 zTree的详细使用方法，简单的树形展示，单选多选的使用，默认选中效果的实现，复杂的树操作有有部门+人员组合，模块+功能组合基于bcprov的用户登录标示的加密和解密数据库连接池druid的使用和配置

zTree获取所有选中节点数据

阅读更多关于 zTree获取所有选中节点数据

<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" href="css/demo.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>  <SCRIPT type=

订阅 ztree