zTree的使用教程
1、首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo
2、之后引入:
<script src="js/jquery.ztree.all-3.5.js"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
3、写js:
<!--树形结构 JS-->
<script type="text/javascript">var setting= {data: {simpleData: {enable: true}},check: {enable: true,chkStyle: "radio",radioType: "all"},view: {showLine: true},callback: {onClick: onClick,onCheck: onCheck,}};var zNodes =[<#if selectNewsTypeAll?size gt 0><#list selectNewsTypeAll as sNewsTypeAll>{id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${sNewsTypeAll.name}"},</#list></#if>];$(document).ready(function() {$.fn.zTree.init($("#treeConfig"), setting, zNodes);});function onClick(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false;}function onCheck(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig"),nodes = zTree.getCheckedNodes(true);var name = "", id = "";for (var i = 0, l = nodes.length; i < l; i++) {name = nodes[i].name;newsTypeId = nodes[i].id;}$("#treeName").val(name);$("#treeId").val(id);}function showMenu() {var dropdownObj = $("#treeName");var dropdownOffset = $("#treeName").offset();$("#treeContainer").css({left: dropdownOffset.left + "px",top: dropdownOffset.top + dropdownObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown);var w = $("#treeName").width();var p = $("#treeName").css("padding-left");$("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}function hideMenu() {$("#treeContainer").fadeOut("fast");$("body").unbind("mousedown", onBodyDown);}function onBodyDown(event) {if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) {hideMenu();//以下代码暂时没用到 startvar height = top.$("#mainFrame").contents().find("body").height();if (height < 850) {height = 850;}top.$("#mainFrame").height(height);//以下代码暂时没用到 end}}
</script>
文本框的代码:
<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()"><input type="hidden" name="newsTypeId" id="treeId"/>
树状图显示的地方:
<div id="treeContainer" class="treeContainer"><ul id="treeConfig" class="ztree"></ul>
</div>
必要的样式:
.treeContainer{display:none; position: absolute;
}
以下是详解:
数据填充
重点就在于zNodes的配置。就是要配置好id、pId、name;这三个属性。
var zNodes =[<#if selectNewsTypeAll?size gt 0><#list selectNewsTypeAll as sNewsTypeAll>{id:${sNewsTypeAll.id},pId:${sNewsTypeAll.parentId},name:"${sNewsTypeAll.name}"},</#list></#if>];
setting 中callback是回调函数,我上面写了两个
callback: {//节点点击事件onClick: onClick, //节点选中事件onCheck: onCheck,}
setting中其他属性默认,就行。
由于一加载页面就要把树状图准备好,只不过没有显示出来而已!所以需要以下代码
$(document).ready(function() {//初始化$.fn.zTree.init($("#treeConfig"), setting, zNodes);});
节点点击事件,没什么说的,这样配置就可以了:
function onClick(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false;}
节点选择事件:
function onCheck(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig"),nodes = zTree.getCheckedNodes(true);var name = "", id = "";for (var i = 0, l = nodes.length; i < l; i++) {name = nodes[i].name;newsTypeId = nodes[i].id;}$("#treeName").val(name);$("#treeId").val(id);}
其中:
$("#treeName").val(name);$("#treeId").val(id);
是根据自己的业务来的,我是因为在选择节点之后,要把,你选择的名字显示出来,并且id要写入隐藏字段,以便保存到数据库。
树状图是在什么时候显示出来呢?我设置的是当点击文本框的时候显示出来
function showMenu() {var dropdownObj = $("#treeName");var dropdownOffset = $("#treeName").offset();$("#treeContainer").css({left: dropdownOffset.left + "px",top: dropdownOffset.top + dropdownObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown);//获取文本框的宽度var w = $("#treeName").width();//获取文本框的内填充var p = $("#treeName").css("padding-left");//设置树状图的宽度$("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}
其中:
$("body").bind("mousedown", onBodyDown);
是绑定了一个鼠标点击事件,当点击其他区域,会触发onBodyDown事件。
function onBodyDown(event) {if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) {hideMenu();//以下代码暂时没用到 startvar height = top.$("#mainFrame").contents().find("body").height();if (height < 850) {height = 850;}top.$("#mainFrame").height(height);//以下代码暂时没用到 end}}
这里面又调用hideMenu()把树状图隐藏掉。
需要用到的文本框代码:
<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>
而用于显示树状图的代码是: 这段代码不一定要和上面那段文本框代码放在一起。
<div id="treeContainer" class="treeContainer"><ul id="treeConfig" class="ztree"></ul>
</div>
因为,这里面做了位置的偏移。
function showMenu() {var dropdownObj = $("#treeName");//获取偏移量var dropdownOffset = $("#treeName").offset();$("#treeContainer").css({left: dropdownOffset.left + "px",top: dropdownOffset.top + dropdownObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown);var w = $("#treeName").width();var p = $("#treeName").css("padding-left");$("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}
由于zTree自带的样式不好看,我进行了细微的跳转,只是让显示稍微好看些
/*一定要的*/
.treeContainer{display:none; position: absolute;
}
/*根据自己情况而定*/
.treeContainer .ztree{background-color:#FFF;
}
zTree的使用教程相关推荐
- Angular16 Angular整合zTree、异步加载节点数据
1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 点击前往01 ...
- SSM框架Spring+SpringMVC+MyBatis——详细整合教程
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 包括SQL Maps和Data Access Objects(DAO)MyBatis 消除了几乎所有的JDBC代码和参 ...
- zTree的简单用法
[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 ...
- 众筹网站项目第七天之zTree树形结构实现(2)
打开原教程视频 注:本人是渣渣,有错请谅解. 许可维护页面的zTree树形结构实现 实现效果: 实现过程 1.数据准备 在数据库中插入相应的数据 insert into `t_permission` ...
- 视频教程-大型ERP实战项目教程-Java
大型ERP实战项目教程 十年项目经验,曾经任职中国移动架构师,丰富的教学经验让无数人获得高薪 任亮 ¥1300.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
- 大型ERP实战项目教程-任亮-专题视频课程
大型ERP实战项目教程-11719人已学习 课程介绍 通过本ERP项目的学习,可以使学生形成开发的思想,产生真正的动手开发的能力,本项目是原公司的真实项目,如果你没有经验,那么学习这个 ...
- ztree的使用demo
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JS ...
- zTree实现删除树节点
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! zTre ...
- jquery 树形控件 Ztree
官网: http://www.ztree.me/v3/main.php 使用 json 数据格式 简单实例:http://tieba.baidu.com/f?kz=1432280689 项目中使用zt ...
最新文章
- MFC中利用CFileDialog选择文件并读取文件所遇到的问题和解决方法
- 关于协作机器人10个观点的讨论
- c语言调用python3_linux下c语言调用python方法问题
- laravel的一个简单文件博客项目katana的使用
- ubuntu导入python的包_在ubuntu环境下怎么利用python将数据批量导入数据hbase
- Windows手工使用CMD命令写入系统服务方法
- 女学霸考 692 分想当“程序媛”,网友:快劝劝孩子
- vivo X50系列外观公布:两个版本的区别在这儿
- 测试管理工具QC第一篇-QC安装步骤(史上最详细的图解过程)-第一篇
- android悬浮窗语音识别demo
- 数据结构上机实践第八周项目9-广义表算法库及应用
- poj-2393 Yogurt factory (贪心)
- Eclipse及Android环境配置
- 一张图快速了解23种设计模式
- 道德经和译文_道德经全文和译文
- 计算机集成牌照,车牌识别+证件识别嵌入式识别系统集成
- 适合小规模培训、带货的群直播是怎样的呢?
- 进程间通信有哪几种方式?进程间通信的方法详解
- AGM FPGA使用答疑
- 四边形坐标顺时针排序