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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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/07/22 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP模块memcached使用指南
2014/12/08 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
原生JS实现留言板
2020/03/26 Javascript
Python sys.path详细介绍
2013/10/17 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
pandas重新生成索引的方法
2018/11/06 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
易程科技软件测试笔试
2013/03/24 面试题
先进集体事迹材料
2014/02/17 职场文书
项目合作协议书
2014/04/16 职场文书
初中班主任评语
2014/04/24 职场文书
难忘的一课教学反思
2014/04/30 职场文书
安全生产演讲稿
2014/05/09 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
个人学习总结范文
2015/02/15 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书