用树展示上下级关系-jquery+ztree+json的运用之获取选中的信息
继之前的一篇 用树展示上下级关系-jquery+ztree+json的运用
这一篇主要是获取选中的内容。
选中内容后会在文本框进行显示。
具体实现代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'tree.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" href="css/demo.css" type="text/css"><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script><script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script><SCRIPT type="text/javascript"><!--var setting = {check: {enable: true,chkboxType: {"Y":"", "N":""}},view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick,onCheck: onCheck}};var zNodes ;function beforeClick(treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false;}function hideMenu() {$("#menuContent").fadeOut("fast");$("body").unbind("mousedown", onBodyDown);}function onBodyDown(event) {if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {hideMenu();}}function onCheck(e, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getCheckedNodes(true),v = "";for (var i=0, l=nodes.length; i<l; i++) {v += nodes[i].name + ",";alert(nodes[i].id)}if (v.length > 0 ) v = v.substring(0, v.length-1);var cityObj = $("#citySel");cityObj.attr("value", v);}var code;function setCheck() {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),py = $("#py").attr("checked")? "p":"",sy = $("#sy").attr("checked")? "s":"",pn = $("#pn").attr("checked")? "p":"",sn = $("#sn").attr("checked")? "s":"",type = { "Y":py + sy, "N":pn + sn};zTree.setting.check.chkboxType = type;showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');}function showCode(str) {if (!code) code = $("#code");code.empty();code.append("<li>"+str+"</li>");}function fuzhi(data){zNodes=eval("("+data+")");$.fn.zTree.init($("#treeDemo"), setting, zNodes);$.fn.zTree.init($("#treeDemo"), setting, zNodes);setCheck();$("#py").bind("change", setCheck);$("#sy").bind("change", setCheck);$("#pn").bind("change", setCheck);$("#sn").bind("change", setCheck);}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);}$(document).ready(function(){$.get("http://localhost:8090/Test/servlet/tree",function(data){$('#result').text(data);//直接展示JSON数据fuzhi(data);});});//--></SCRIPT> </head> <body > This is my JSP page. <br> <div id="result"></div> <div class="zTreeDemoBackground left"> <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" /></div><div class="right"><ul class="info"><li class="title"><h2>1、setting 配置信息说明</h2><ul class="list"><li class="highlight_red">使用 checkbox，必须设置 setting.check 中的各个属性，详细请参见 API 文档中的相关内容</li><li><p>父子关联关系：<br/>被勾选时：<input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span><input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>取消勾选时：<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span><input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/><ul id="code" class="log" style="height:20px;"></ul></p></li></ul></li><li class="title"><h2>2、treeNode 节点数据说明</h2><ul class="list"><li class="highlight_red">1)、如果需要初始化默认节点被勾选，请设置 treeNode.checked 属性，详细请参见 API 文档中的相关内容</li><li class="highlight_red">2)、如果某节点禁用 checkbox，请设置 treeNode.chkDisabled 属性，详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'</li><li class="highlight_red">3)、如果某节点不显示 checkbox，请设置 treeNode.nocheck 属性，详细请参见 API 文档中的相关内容 和 'nocheck 演示'</li><li class="highlight_red">4)、如果更换 checked 属性，请参考 API 文档中 setting.data.key.checked 的详细说明</li><li>5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明</li></ul></li></ul></div><div id="menuContent" class="menuContent" style="display:none; position: absolute;"><ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul></div> </body></html>