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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vue-cli设置publicPath小记
Apr 14 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
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
python调用fortran模块
2016/04/08 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python实现图书借阅系统
2019/02/20 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
如何使用python代码操作git代码
2020/02/29 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
元旦促销方案
2014/03/15 职场文书
黄金搭档广告词
2014/03/21 职场文书
质量保证书范本
2014/04/29 职场文书
导师工作推荐信范文
2014/05/17 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Python学习之迭代器详解
2022/04/01 Python