jquery ztree实现下拉树形框使用到了json数据,JavaScript教程,JavaScript案例,JavaScript实例
本站中文域名：、　
　　　　　　　　
　　　　　
　|　　|　　|　　|　　
　　　　　|　　　　　|　　　　　|　　　
您的位置： &&
&& jquery ztree实现下拉树形框使用到了json数据
jquery ztree实现下拉树形框使用到了json数据
　　本文标签：ztree,下拉树形框,json
公司最近的项目需要用到树形下拉框，在网上找了挺多源码，最后还是采用了zTree来实现，因为代码的移植性比较高，而且数据的获取比较容易&。废话不多说，直接上代码&。 index.jsp 复制代码 代码如下: &%@ 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("只能选择城市...");
} 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); }
Google搜索中
搜狗搜索中
在线教程导航
数据库开发
热点软件下载
车友晒价详情
浦株路上的，优惠大概在2万出头！
<font color="#FF万
华兴深蓝，送导航，倒车影像等，第一次去谈，目前价格27万
<font color="#FF万
苏舜无赠送
<font color="#FF万
原厂贴膜，脚垫
<font color="#FF万
南京朗驰集团报价，有赠送，具体未谈
<font color="#FF
南京市大明路那边
<font color="#FF
赠送贴膜！
<font color="#FF
您的心理价位,特别购车要求！
<font color="#FF万
大厂这边，没有自动挡的
团购车型：
加入微信号，了解汽车///活动
| 站长工具：
加入官方微信号
渠道报价/招聘
任你发任你查
All Rights Reserved.
珠江路在线版权所有
苏ICP备号 中文域名：
　|　　|　当前位置:&&
本页文章导读:
&&&&?JQuery操作tr和td内容的方法实例&&&&&&
代码如下:&PRE code"&&html xmlns="http://www.w3.org/1999/xhtml"&&head id="Head1" runat="server"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&link href="../esstec_css/style.css" ty......&&&&?node在两个div之间移动,用ztree实现&&&&&&
实现思路：
1、ztree中节点是通过一个json的Array作为数据源、，所以直接操作json字符串，然后转为json对象数组。
2、然后用新构成的json数组对象重新初始化ztree对象。
代码如下:&link rel="sty......&&&&?js实现一个省市区三级联动选择框代码分享&&&&&&
运行效果：
================================================= 部分代码： ================================================= 当然首先你数据库中要有这个table，不然你没有数据.....^_^
代码如下: &tr& &td & ......
&&&&&&最新IT科技资讯推荐:
[1]JQuery操作tr和td内容的方法实例
&&&&来源:&互联网& 发布时间:&
代码如下:&PRE code"&&html xmlns="http://www.w3.org/1999/xhtml"&&head id="Head1" runat="server"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" /&
&link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" /&
&script src="../js/jquery-1.7.2.min.js" type="text/javascript"&&/script&
&link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" /&
&link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript"&
$(document).ready(function () {
$("#selEmployee").click(function () {
var $table = $("#tbProEmployee tr");
var len = $table.
var trid = "tbProEmployee" +
var strDeviceTr = "&tr id=" + trid + "&";
strDeviceTr += "&td &&input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /&&input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" /&";
strDeviceTr += "&label id=\"txtEmployeeName\"&" + "姓名" + "&/label&&/td&";
strDeviceTr += "&td&&input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" /&&/td&";
strDeviceTr += "&td &&a href=\"javascript:;SaveProEmployee('" + trid + "')\"&保存&/a& | &a href=\"javascript:;DelProEmployee('" + trid + "')\"&删除&/a&&/td&";
strDeviceTr += " &/tr&";
$("#tbProEmployee").append(strDeviceTr);
function SaveProEmployee(index) {
//ajax保存
var tr = $("tr[id=" + index + "]");
var employee = tr.find("#txtEmployeeName").text();
var remark = tr.find("#txtRemark").val();
var strtd = "&td&&input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /&&input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" /&";
strtd += "&label id=\"txtEmployeeName\"&" + employee + "&/label&&/td&";
strtd += "&td &&label id=\"txtRemark\"&" + remark + "&/label&&/td&";
strtd += "&td &&a href=\"javascript:;UpdateProEmployee('" + index + "')\"&修改&/a& | &a href=\"javascript:;DelProEmployee('" + index + "')\"&删除&/a&&/td&";
tr.html(strtd);
function UpdateProEmployee(index) {
//ajax保存
var tr = $("tr[id=" + index + "]");
var employee = tr.find("#txtEmployeeName").text();
var remark = tr.find("#txtRemark").text();
var strtd = "&td&&input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /&&input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" /&";
strtd += "&label id=\"txtEmployeeName\"&" + employee + "&/label&&/td&";
strtd += "&td&&input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" value=\"" + remark + "\" /&&/td&";
strtd += "&td &&a href=\"javascript:;SaveProEmployee('" + index + "')\"&保存&/a& | &a href=\"javascript:;DelProEmployee('" + index + "')\"&删除&/a&&/td&";
tr.html(strtd);
function DelProEmployee(index) {
if (confirm("Are you sure？")) {
$("tr[id=" + index + "]").remove();
&/script&&/head&&body&
&form id="form1" runat="server"&
id="tbProEmployee"&
&th colspan="3"&
[&a id="selEmployee" href="javascript:void(0)"&执行人员&/a&]
&/form&&/body&&/html&&/PRE&&BR&&BR&&PRE&&/PRE&&PRE&&/PRE&
[2]node在两个div之间移动,用ztree实现
&&&&来源:&互联网& 发布时间:&
实现思路：
1、ztree中节点是通过一个json的Array作为数据源、，所以直接操作json字符串，然后转为json对象数组。
2、然后用新构成的json数组对象重新初始化ztree对象。
代码如下:&link rel="stylesheet" href="demo.css" type="text/css"&&link rel="stylesheet" href="zTreeStyle.css" type="text/css"&&script type="text/javascript" src="jquery-1.4.4.min.js"&&/script&&script type="text/javascript" src="jquery.ztree.core-3.5(1).js"&&/script&&script type="text/javascript"&
var zTreeObj1;
var zTreeObj2;
var leftDivStr = "[";
var rightDivStr = "[";
var setting = {
enable: false,
showRemoveBtn: false,
showRenameBtn: false
simpleData: {
enable: true
callback: {
//onClick : menuOnClick
function menuOnClick(event, treeId, treeNode, clickFlag) {
//注册toSource函数，解决ie不支持Array的toSource()方法的问题
Array.prototype.toSource = function (){
var str = "[";
for(var i = 0 ;i&this.i++){
str+="{id:\""+this[i].id+
"\",pId:\""+this[i].pId
+"\",name:\""+this[i].name
+"\",isParent:\""+this[i].isParent
+"\",file:\""+this[i].file
+"\",icon:\""+this[i].icon
+"\",open:\""+this[i].open
if(this.length != 0){
str = str.substring(0, str.length-1);
str +="]";
//注册unique函数，去掉array中重复的对象（id相同即为同一对象）
Array.prototype.unique = function (){
var r = new Array();
label:for(var i = 0, n = this. i & i++) {
for(var x = 0, y = r. x & x++) {
if(r[x].id == this[i].id) {
r[r.length] = this[i];
//初始数据
var zNodes =[
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1",open:true},
{ id:111, pId:11, name:"叶子节点 11-1"},
{ id:112, pId:11, name:"叶子节点 11-2"},
{ id:12, pId:1, name:"叶子节点 1-2",open:true},
{ id:121, pId:12, name:"叶子节点 12-1"},
{ id:122, pId:12, name:"叶子节点 12-2"},
{ id:13, pId:1, name:"叶子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:true},
{ id:21, pId:2, name:"叶子节点 2-1"},
{ id:22, pId:2, name:"叶子节点 2-2"},
{ id:23, pId:2, name:"叶子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:true},
{ id:31, pId:3, name:"叶子节点 3-1"},
{ id:32, pId:3, name:"叶子节点 3-2"},
{ id:33, pId:3, name:"叶子节点 3-3"}
for(var i=0;i&zNodes.i++){
leftDivStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},";
leftDivStr = leftDivStr.substring(0,leftDivStr.length-1);
leftDivStr+="]";
rightDivStr += "]";
//查找被移动节点的所有父节点
function findParentNodes(treeNode, parentNodes){
parentNodes += "{id:"+treeNode.id+",pId:"+treeNode.pId+
",name:\""+treeNode.name+"\",open:"+treeNode.open+"},";
if(treeNode != null && treeNode.getParentNode()!= null){
parentNodes =findParentNodes(treeNode.getParentNode(),parentNodes);
return parentN
//移动节点
function moveNodes(zTreeFrom,treeNode,zTreeTo,divStrFrom,divStrTo){
/////////////////////////////////treeNode的所有父节点
var parentNodes ="[";
if(treeNode.pId != null){
parentNodes = findParentNodes(treeNode,parentNodes);
parentNodes = parentNodes.substring(0,parentNodes.length-1);
parentNodes +="]";
//alert(parentNodes);
var parentNodesArray = eval(parentNodes);
///////////////////////////////
var nodes = "[";
nodes+= "{id:"+treeNode.id+",pId:"+treeNode.pId+",name:\""+treeNode.name+"\",open:"+treeNode.open+"},";
nodes = operChildrenNodes(treeNode,nodes);
nodes = nodes.substring(0,nodes.length-1);
nodes+="]";
var nodesArray = eval(nodes);
var divFromArray = eval(divStrFrom);
var divToArray = eval(divStrTo);
for(var i = 0;i&nodesArray.i++){//删除节点
for(var j = 0;j&divFromArray.j++){
if(divFromArray[j].id == nodesArray[i].id){
divFromArray.splice(j,1);
divToArray = divToArray.concat(nodesArray);//增加节点
divToArray = divToArray.concat(parentNodesArray);
///////////////////////////////////////////////////////////////////////////////////////去重复
divFromArray = divFromArray.unique();
divToArray = divToArray.unique();
///////////////////////////////////////////////////////////////////////////////////////////去重复
if(zTreeFrom.setting.treeId == "treeDemo"){
leftDivStr = divFromArray.toSource();
rightDivStr =divToArray.toSource();
$.fn.zTree.init($("#treeDemo"), setting, divFromArray);
$.fn.zTree.init($("#treeDemo2"), setting,divToArray);
leftDivStr = divToArray.toSource();
rightDivStr =divFromArray.toSource();
$.fn.zTree.init($("#treeDemo2"), setting, divFromArray);
$.fn.zTree.init($("#treeDemo"), setting,divToArray);
//查找指定节点下的所有子节点
function operChildrenNodes(treeNode,nodes){
if(treeNode.children!= undefined){//是父节点，有子节点
for(var j = 0;j&treeNode.children.j++){
var childNode = treeNode.children[j];
nodes+="{id:"+childNode.id+",pId:"+childNode.pId+",name:\""+childNode.name+"\",open:"+childNode.open+"},";
nodes = operChildrenNodes(childNode,nodes);
}else{//没子节点
$(document).ready(function(){
zTreeObj1 = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting);
$(function() {
$("#toRight").click(function() {
moveNodes(zTreeObj1,zTreeObj1.getSelectedNodes()[0],zTreeObj2,leftDivStr,rightDivStr);
$("#toLeft").click(function(){
moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr);
$("#show").click(function(){
var leftDiv = new Array();
var leftDivStrArray = eval(leftDivStr);
for(var i = 0;i&leftDivStrArray.i++){
leftDiv[i] = leftDivStrArray[i].
var rightDivStrArray = eval(rightDivStr);
var rightDiv = new Array();
for(var i = 0;i&rightDivStrArray.i++){
rightDiv[i] = rightDivStrArray[i].
alert(leftDiv);
alert(rightDiv);
html代码：
代码如下:&body &&div &
&ul id="treeDemo" &&/ul&
&button id="toRight"&&&&/button&
&button id="toLeft"&&&&/button&
&button id="show"&show&/button&
&ul id="treeDemo2" &&/ul&
&/div&&/div&
[3]js实现一个省市区三级联动选择框代码分享
&&&&来源:&互联网& 发布时间:&
运行效果：
================================================= 部分代码： ================================================= 当然首先你数据库中要有这个table，不然你没有数据.....^_^
代码如下: &tr& &td & 所在地: &/td& &td & &input type="hidden" id="myProvince" value="${user.provinceId}"/& &input type="hidden" id="myCity" value="${user.cityId}"/& &input type="hidden" id="myRegion" value="${user.regionId}"/& &select id="provinceSelect" name="user.provinceId"& &c:forEach items="${xzqhs}" var="xzqh"& &option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}&${xzqh.province}&/option& &/c:forEach& &/select& &select id="citySelect" name="user.cityId"& &/select& &select id="regionSelect" name="user.regionId"& &/select& &/td& &td &&/td& &/tr&
代码如下: /** * 加载市 * */ function loadCity() { var provinceId = $("#provinceSelect option:selected").val(); if(provinceId == null || provinceId == ""){ //alert("找不到省"); }else{ $.post(rootPath+"/loadCity", { "q" : provinceId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该省的市"); }else{ data = eval("{" + data + "}"); var citySelect = $("#citySelect"); var myCity = $("#myCity").val(); citySelect.html(""); for ( var i = 0; i & data. i++) { if(myCity != null && myCity != "" && myCity & 0 && myCity == data[i].id){ citySelect.append("&option selected='selected' value='" + data[i].id + "'&" + data[i].name + "&/option&"); }else{ citySelect.append("&option value='" + data[i].id + "'&" + data[i].name + "&/option&"); } } loadRegion(); } }); } }; /** * 加载区 * */ function loadRegion() { var cityId = $("#citySelect option:selected").val(); if(cityId == null || cityId == "" || cityId & 1){ alert("找不到市"); }else{ $.post(rootPath+"/loadRegion", { "q" : cityId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该市的区"); }else{ data = eval("{" + data + "}"); var regionSelect = $("#regionSelect"); var myRegion = $("#myRegion").val(); regionSelect.html(""); for ( var i = 0; i & data. i++) { if(myRegion != null && myRegion != "" && myRegion & 0 && myRegion == data[i].id){ regionSelect.append("&option selected='selected' value='" + data[i].id + "'&" + data[i].name + "&/option&"); }else{ regionSelect.append("&option value='" + data[i].id + "'&" + data[i].name + "&/option&"); } } } }); } }; /** * 省改变事件 * */ $("#provinceSelect").change(loadCity); /** * 市改变事件 * */ $("#citySelect").change(loadRegion); $(function() { loadCity(); });
后台方法：
代码如下: /** * 加载城市数据 * */ public void loadCity() { if (q == null || q.trim().equals("")) { write("noId"); } else { List&Xzqh& citys = xzqhService.queryCitys(q.trim()); if (citys == null || citys.size() & 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh city : citys) { builder.append("{'id':'"); builder.append(city.getCityId()); builder.append("','name':'"); builder.append(city.getCity()); builder.append("'},"); } if (builder.length() & 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } } /** * 加载区数据 * */ public void loadRegion() { if (q == null || q.trim().equals("")) { write("noId"); } else { List&Xzqh& citys = xzqhService.queryDistricts(q.trim()); if (citys == null || citys.size() & 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh district : citys) { builder.append("{'id':'"); builder.append(district.getRegionId()); builder.append("','name':'"); builder.append(district.getRegion()); builder.append("'},"); } if (builder.length() & 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } }
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,站长邮箱:www_169it_(请将#改为@)js树插件zTree获取所有选中节点数据的方法-javascript编程
&&&&【提要】本篇《js树插件zTree获取所有选中节点数据的方法-javascript编程》特别为需要方法编程学习的朋友收集整理的，仅供参考。内容如下：
&&&&本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下：&&&&由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用zTree在项目中。这个获取所有选中节点数据很简单。看一下API就能看懂了。所以我就直接上代码了。&&&&复制代码 代码如下:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&希望本文所述对大家的javascript程序设计有所帮助。&&&&……
特别声明：网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
ztree获取当前选中节点子节点id集合的方法教程
本文实例讲述了ztree获取当前选中节点子节点id集合的方法。分享给大家供大家参考。具体分析如下：
要求：获取当前选中节点的子节点id集合。
1.获取当前节点
2.用ztree的方法transformToArray()获取当前选中节点（含选中节点）的子节点对象集合。
3.遍历集合，取出需要的值。
treeNode：当前选中节点对象
function getChildNodes(treeNode) {
var childNodes = ztree.transformToArray(treeNode);
var nodes = new Array();
for(i = 0; i & childNodes. i++) {
nodes[i] = childNodes[i].
return nodes.join(",");
希望本文所述对大家的javascript程序设计有所帮助。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]