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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
javascript canvas API内容整理
Feb 16 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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多用户计数器代码
2007/03/11 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php简单分页类实现方法
2015/02/26 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
设备售后服务承诺书
2014/05/30 职场文书
条幅标语大全
2014/06/20 职场文书
乱世佳人观后感
2015/06/08 职场文书
城南旧事观后感
2015/06/11 职场文书
班主任培训研修日志
2015/11/13 职场文书
九年级历史教学反思
2016/02/19 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang