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插件之定时查询待处理任务数量
May 01 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
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脚本的10个技巧(7)
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
图文详解WinPE下安装Python
2016/05/17 Python
Python标准库之collections包的使用教程
2017/04/27 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
养殖项目策划书范文
2014/01/13 职场文书
校园公益广告语
2014/03/13 职场文书
商务英语广告词大全
2014/03/18 职场文书
房屋转让协议书
2014/04/11 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android