jquery ztree实现下拉树形框使用到了json数据


Posted in Javascript onMay 14, 2014

公司最近的项目需要用到树形下拉框,在网上找了挺多源码,最后还是采用了zTree来实现,因为代码的移植性比较高,而且数据的获取比较容易。废话不多说,直接上代码。

index.jsp

<%@ page language="java" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<html> 
<head> 
<link rel="stylesheet" href="<c:url value='/js/ztree/css/demo.css'/>" type="text/css"></link> 
<link rel="stylesheet" href="<c:url value='/js/ztree/css/zTreeStyle/zTreeStyle.css'/>" type="text/css"></link> 
<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery-1.4.4.min.js'/>"></script> 
<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery.ztree.core-3.5.js'/>"></script> 
<SCRIPT type="text/javascript"> 
<!-- 
var setting = { 
view: { 
dblClickExpand: false 
}, 
data: { 
simpleData: { 
enable: true 
} 
}, 
callback: { 
beforeClick: beforeClick, 
onClick: onClick 
} 
}; //json数据源,也可以从后台读取json字符串,并转换成json对象,如下所示 
//var strNodes = '${jsonList}'; 
//var zNodes = eval("("+strNodes+")"); //将json字符串转换成json对象数组,strNode一定要加"()",不然转不成功 
var zNodes =[ 
{id:1, pId:0, name:"北京"}, 
{id:2, pId:0, name:"天津"}, 
{id:3, pId:0, name:"上海"}, 
{id:6, pId:0, name:"重庆"}, 
{id:4, pId:0, name:"河北省", open:true}, 
{id:41, pId:4, name:"石家庄"}, 
{id:42, pId:4, name:"保定"}, 
{id:43, pId:4, name:"邯郸"}, 
{id:44, pId:4, name:"承德"}, 
{id:5, pId:0, name:"广东省", open:true}, 
{id:51, pId:5, name:"广州"}, 
{id:52, pId:5, name:"深圳"}, 
{id:53, pId:5, name:"东莞"}, 
{id:54, pId:5, name:"佛山"}, 
{id:6, pId:0, name:"福建省", open:true}, 
{id:61, pId:6, name:"福州"}, 
{id:62, pId:6, name:"厦门"}, 
{id:63, pId:6, name:"泉州"}, 
{id:64, pId:6, name:"三明"} 
]; 
function beforeClick(treeId, treeNode) { 
var check = (treeNode && !treeNode.isParent); 
if (!check) alert("只能选择城市..."); 
return check; 
} 
function onClick(e, treeId, treeNode) { 
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
nodes = zTree.getSelectedNodes(), 
v = ""; 
nodes.sort(function compare(a,b){return a.id-b.id;}); 
for (var i=0, l=nodes.length; i<l; i++) { 
v += nodes[i].name + ","; 
} 
if (v.length > 0 ) v = v.substring(0, v.length-1); 
var cityObj = $("#citySel"); 
cityObj.attr("value", v); 
} 
function showMenu() { 
var cityObj = $("#citySel"); 
var cityOffset = $("#citySel").offset(); 
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast"); 
$("body").bind("mousedown", onBodyDown); 
} 
function hideMenu() { 
$("#menuContent").fadeOut("fast"); 
$("body").unbind("mousedown", onBodyDown); 
} 
function onBodyDown(event) { 
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { 
hideMenu(); 
} 
} 
$(document).ready(function(){ 
$.fn.zTree.init($("#treeDemo"), setting, zNodes); 
}); 
//--> 
</SCRIPT> 
</head> 
<body> 
<div class="zTreeDemoBackground left"> 
<ul class="list"> 
<li class="title"> <span class="highlight_red">选择城市时,按下 Ctrl 或 Cmd 键可以进行多选</span></li> 
<li class="title"> 城市:<input id="citySel" type="text" readonly value="" style="width:120px;"/> 
<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li> 
</ul> 
</div> 
<div id="menuContent" class="menuContent" style="display:none; position: absolute;"> 
<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul> 
</div> 
</body> 
</html>

spring后台

json数据类

public class EquipTypeJson { 
private String id; 
private String pId; 
private String name; public String getId() { 
return id; 
} 
public void setId(String id) { 
this.id = id; 
} 
public String getPId() { 
return pId; 
} 
public void setPId(String pId) { 
this.pId = pId; 
} 
public String getName() { 
return name; 
} 
public void setName(String name) { 
this.name = name; 
} 

}

controller页面
public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception { 
Map map=new HashMap(); 
List<EquipTypeJson> list = testService.getAllEquipType();//数据库中获取源数据 
JSONArray jsonArray = JSONArray.fromObject(list); //将list数据转为json对象 
String json = jsonArray.toString(); //将json对象转为字符串 
map.put("jsonList", json); 
return new ModelAndView("equip/List").addAllObjects(map); 
}
Javascript 相关文章推荐
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
JQuery性能优化的几点建议
May 14 #Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 #Javascript
JQuery教学之性能优化
May 14 #Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
javascript 中that的含义示例介绍
May 14 #Javascript
table insertRow、deleteRow定义和用法总结
May 14 #Javascript
jQuery 中国省市两级联动选择附图
May 14 #Javascript
You might like
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
微信小程序实现吸顶特效
2020/01/08 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python调试神器PySnooper的使用
2019/07/03 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python中Selenium库使用教程详解
2020/07/23 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
铭万公司.net面试题笔试题
2014/07/20 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
超市创业计划书
2014/04/24 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python