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实现轮显新闻标题链接
Aug 13 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
探索node之事件循环的实现
Oct 30 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输入流php://input介绍
2012/09/18 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
基于python实现简单日历
2018/07/28 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
Ejb技术面试题
2015/04/29 面试题
团员个人的自我评价
2013/12/02 职场文书
家长给老师的道歉信
2014/01/13 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
山楂树之恋观后感
2015/06/11 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python