jquery ztree实现下拉树形框使用到了json数据
我的图书馆
jquery ztree实现下拉树形框使用到了json数据
树形下拉框，在网上找了挺多源码，最后还是采用了zTree来实现，因为代码的移植性比较高，而且数据的获取比较容易。废话不多说，直接上代码。
复制代码 代码如下:
&%@ page language="java"
pageEncoding="UTF-8"%& &%@ taglib
uri="/jsp/jstl/core" prefix="c"%& &%@ taglib
uri="/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
} 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.}); for (var
i=0, l=nodes. 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:120"/& &a id="menuBtn" href="#"
onclick="showMenu();"&选择&/a&&/li& &/ul&
&/div& &div id="menuContent" class="menuContent"
style="display: position:"& &ul id="treeDemo"
class="ztree" style="margin-top:0; width:160"&&/ul& &/div&
&/body& &/html& spring后台 json数据类
复制代码 代码如下:
public class EquipTypeJson { private
S private String pId; private S public
String getId() {
} public void setId(String id) {
this.id = } public String getPId() { return pId; }
public void setPId(String pId) { this.pId = pId; } public String
getName() {
} public void setName(String name) {
this.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); }&
TA的最新馆藏 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
S2SH+JQuery ztree生成三级级联树形列表菜单
下载积分：2000
内容提示：S2SH+JQuery ztree生成三级级联树形列表菜单
文档格式：DOC|
浏览次数：101|
上传日期： 14:18:56|
文档星级：
全文阅读已结束，如果下载本文需要使用
 2000 积分
下载此文档
该用户还上传了这些文档
S2SH+JQuery ztree生成三级级联树形列表菜单
官方公共微信Java zTree 的异步加载demo示例
63.demoTest.getJSONData();64.}65.}（4）创建加载zTee树的html或jsp页面asyncLoad.html查看文本copytoclipoad打印?1.!DOCTYPEhtml2.HTML3.HEAD4.TITLEzTeeDemoTITLE5.metahttp-equiv="content-type"content="textchaset=UTF-8"6.linkel="stylesheet"hef="..cssdemo.css"type="textcss"7.!--必须文件zTeeStyle.css、jquey.ztee.coe-x.js、jquey-x.min.js--8.linkel="stylesheet"hef="..csszTeeStylezTeeStyle.css"type="textcss"9.scipttype="textjavascipt"sc="..jsjquey-1.4.4.min.js"scipt10.scipttype="textjavascipt"sc="..jsjquey.ztee.coe-3.5.js"scipt11.sciptlanguage="JavaScipt"12.vasetting={13.async:{14.enale:tue,设置zTee是否开启stong异步stong加载模式15.ul:"asyncDataloadData2.jsp",Ajax获取数据的URL地址16.autoPaam:["id"]stong异步stong加载时自动提交父节点属性的参数,假设父节点node={id:1,name:"test"}，stong异步stong加载时，提交参数zId=117.},18.data:{必须使用data19.simpleData:{20.enale:tue,21.idKey:"id",id编号命名默认22.pIdKey:"pId",父id编号命名默认23.ootPId:0用于修正根节点父节点数据，即pIdKey指定的属性值24.}25.},26.回调函数27.callack:{28.onClick:function(event,teeId,teeNode,clickFlag){29.判断是否父节点30.if(!teeNode.isPaent){
& 果果文库所有资源均来源于互联网，仅供网友学习交流，若侵犯了您的权益，请联系我们予以删除。
5610&&人浏览
5037&&人浏览
7938&&人浏览
17523&&人浏览
6345&&人浏览
1132&&人浏览
6570&&人浏览
14965&&人浏览
6277&&人浏览
5641&&人浏览
12357&&人浏览
6578&&人浏览
14228&&人浏览
13838&&人浏览
10724&&人浏览
本文标题：Java zTree 的异步加载demo示例 链接地址：
copyright@ 2013- Inc. All Rights Reserved 果果文库 版权所有 联系站长: ; 经营许可证编号:浙ICP备号