jQuery的zTree树插件
来源:互联网 发布:版权如何查询知乎 编辑:程序博客网 时间:2024/05/02 06:46
最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔
页面的基本结构是这样的
这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板
jQuery zTree树的下载链接
页面jsp如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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"><link rel="stylesheet" href="/css/metroStyle.css"><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{@Autowiredprivate UnitsService unitsService;@RequestMapping("/ListTree")@ResponseBodypublic 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的基本方法
1 0
- jQuery的zTree树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree-jQuery树插件
- jQuery ztree 树插件的使用
- jquery插件ztree的总结
- (推荐)zTree -- jQuery 树插件
- Jquery树插件zTree入门教程
- Jquery树插件zTree入门教程
- jquery——zTree, 完美好用的树插件
- zTree 一个依靠 jQuery 实现的多功能 “树插件”
- jquery——zTree, 完美好用的树插件
- jquery——zTree, 完美好用的树插件
- jquery——zTree, 完美好用的树插件
- Ztree-JQuery树插件的学习(未完)
- 错误处理:com.google.gson.stream.MalformedJsonException: Unexpected value at line 1 column 15
- 对一个数组(每项都是数值)求和,有哪些方法?
- 易聚之虚拟实体
- TCP新手误区--心跳的意义
- 1419 最小公倍数挑战
- jQuery的zTree树插件
- 选中全选框
- java 多线程基础之一:多线程创建,执行,状态管理
- leetcode
- Android Things:外设I/O接口-SPI
- win10 64位下Python中NLTK,pip,numpy等安装方法
- 二叉树创建,遍历,销毁,深度.....
- 易聚之诱导
- 易聚之反馈与修正