jQuery树插件zTree使用方法详解
最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔
页面的基本结构是这样的
这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先需要下载ztree插件，直接百度即可，下载完成后由对应的api和一些例子，这里使用的是复选框模板
jQuery zTree树的下载链接
页面jsp如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> ZTREE DEMO - checkbox</title>
<link rel="stylesheet" href="/css/demo.css" rel="external nofollow" >
<link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" >
<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback:{
onCheck:onCheck
}
};
// var zNodes =[
// { id:1, pId:0, name:"随意勾选 1", open:true},
// { id:11, pId:1, name:"随意勾选 1-1", open:false},
// { id:111, pId:11, name:"随意勾选 1-1-1"},
// { id:112, pId:11, name:"随意勾选 1-1-2"},
// { id:12, pId:1, name:"随意勾选 1-2", open:false},
// { id:121, pId:12, name:"随意勾选 1-2-1"},
// { id:122, pId:12, name:"随意勾选 1-2-2"},
// { id:2, pId:0, name:"随意勾选 2", checked:false, open:false},
// { id:21, pId:2, name:"随意勾选 2-1"},
// { id:22, pId:2, name:"随意勾选 2-2", open:false},
// { id:221, pId:22, name:"随意勾选 2-2-1", checked:false},
// { id:222, pId:22, name:"随意勾选 2-2-2"},
// { id:23, pId:2, name:"随意勾选 2-3"},
// { id:3, pId:0, name:"随意勾选 3", checked:false, open:false},
// { id:231, pId:3, name:"随意勾选 3-1"},
// { id:232, pId:3, name:"随意勾选 3-2", open:false},
// { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false},
// { id:2322, pId:232, name:"随意勾选 3-2-2"},
// { id:233, pId:3, name:"随意勾选 3-3"}
// ];
var code;
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
zTree.setting.check.chkboxType = type;
// showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
// showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };');
showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };');
// setting.check.chkboxType = { "Y" : "", "N" : "" };
}
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}
var zNodes =[];
$(document).ready(function(){
var t = $("#treeDemo");
$.ajax({
type: "POST",
url: "/Units/ListTree",
dataType: 'json',
success: function(result) {
console.log(result);
$.extend( true, zNodes, result );
console.log(zNodes);
t = $.fn.zTree.init(t, setting, zNodes);
// demoIframe = $("#testIframe");
}
});
});
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#py").bind("change", setCheck);
$("#sy").bind("change", setCheck);
$("#pn").bind("change", setCheck);
$("#sn").bind("change", setCheck);
});
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}
</script>
</head>
<body>
<div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;">
<ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul>
</div>
<input type="checkbox" id="py" class="checkbox first" checked style="display:none;" />
<input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/>
<input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/>
<input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/>
</body>
</html>
上面的死数据替换为后台赋予的值，用的是ajax方式，当然后台需要用json方式进行交互
java代码控制器代码如下：
@Controller
@RequestMapping("/Units")
public class UnitsController{
@Autowired
private UnitsService unitsService;
@RequestMapping("/ListTree")
@ResponseBody
public List<JSONObject> ListTree(){
List<JSONObject> jsonList = new ArrayList<JSONObject>();
List<Units> zTreeAll = unitsService.zTreeAll();
for (Units units : zTreeAll) {
JSONObject json = new JSONObject();
// { id:1, pId:0, name:"随意勾选 1", open:false}
if(units.getUnitsId() == units.getNodeData()){
JSONObject json1 = new JSONObject();
json1.put("id", units.getUnitsId());
json1.put("pId", 0);
json1.put("name", units.getUnitsName());
json1.put("open", false);
jsonList.add(json1);
json.put("id", -1);
json.put("pId", units.getNodeData());
json.put("name", units.getSectorName());
json.put("open", false);
}else{
json.put("id", units.getUnitsId());
json.put("pId", units.getNodeData());
json.put("name", units.getSectorName());
json.put("open", false);
}
jsonList.add(json);
}
// for (JSONObject units : jsonList) {
// System.out.println(jsonList.toString());
// }
return jsonList;
}
}
这样就可以实现所需要的树结构，ztree树是可以无限扩展的，就按照个人所需，来选择模板就可以了
jsp中的这段代码是获得当前选择值得id
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}
以上就是使用ztree的基本方法，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Jquery树插件zTree实现菜单树
本文实例为大家分享了zTree插件实现菜单树的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Title</title> <
-
zTree jQuery 树插件的使用(实例讲解)
分享说明: 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果. 外部引入资源 <link rel=&qu
-
Jquery树插件zTree用法入门教程
本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css 复制代码 代码如下: <script type="text/javascript" src=&
-
jQuery插件zTree实现的基本树与节点获取操作示例
本文实例讲述了jQuery插件zTree实现的基本树与节点获取操作.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel=&qu
-
jQuery zTree树插件简单使用教程
前言 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示. 下载地址:zTree 静态zTree开发流程 引入资源 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/c
-
jQuery树插件zTree使用方法详解
最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te
-
jquery树形插件zTree高级使用详解
使用高级zTree进行对属性结构进行操作的时候,做好的方式是参考官网的API文档. 本文简单介绍下如何通过后台传递过来一个树形结构的树,并且通过页面进行加载. [与后台交互步骤]1.编写页面,引入zTree相关插件:2.编写js脚本,设定树形结构的基本属性:3.编写zTree的PO对象:4.编写返回属性结构的方法(json格式返回):5.页面请求树. 1.引入zTree相关的插件: <script type="text/javascript" src="<%=re
-
jQuery验证插件validate使用方法详解
1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页
-
jQuery擦除插件eraser使用方法详解
eraser插件简介: 1.jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片. 2.jQuery.eraser 的原理其实是有灰色.彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上.当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的
-
jquery 键盘事件的使用方法详解
jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); 2. keyup(); 3. keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按
-
jquery ajax局部加载方法详解(实现代码)
在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&
-
jQuery ajax的功能实现方法详解
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //
-
jQuery树控件zTree使用方法详解（一）
一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: js: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data: { simpleData: { enable: true, idKey:
-
JQuery ZTree使用方法详解
JQuery ZTree简单使用 @(JavaScript)[jQuery, ztree, 入门] 基本概述 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. zTree 是开源免费的软件(MIT 许可证).在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更