ZTree 擷取節點資訊

標籤：ztree   js   html   javascript   jqueryztree   

效果如下：

我們就來說說如何讓擷取的：其實在官方的平台上都有很多好的例子的 這裡是網址你們看看  http://www.ztree.me/v3/demo.php#_511

就是Ztree的點擊前事件的監聽beforeClick事件

下面我們把代碼貼出來  供你們直接調試 測試

<!DOCTYPE html><HTML><HEAD><TITLE> </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><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.5.js"></script><SCRIPT type="text/javascript"><!--var curMenu = null, zTree_Menu = null;var setting = {view: {showLine: false,showIcon: false,selectedMulti: false,dblClickExpand: false,addDiyDom: addDiyDom},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick}};var zNodes =[{ id:1, pId:0, name:"組織機構1", open:true},{ id:11, pId:1, name:"組織機構11"},{ id:111, pId:11, name:"組織機構111"},{ id:112, pId:111, name:"組織機構112"},{ id:113, pId:112, name:"組織機構113"},{ id:114, pId:113, name:"組織機構114"},{ id:12, pId:1, name:"組織機構12"},{ id:13, pId:1, name:"組織機構13"},{ id:14, pId:1, name:"組織機構14"},{ id:15, pId:1, name:"組織機構15"},{ id:3, pId:0, name:"組織機構3"},{ id:31, pId:3, name:"組織機構31"},{ id:32, pId:3, name:"組織機構31"},{ id:2, pId:0, name:"組織機構2"},{ id:21, pId:2, name:"組織機構21"},{ id:211, pId:21, name:"組織機構211"}];function addDiyDom(treeId, treeNode) {var spaceWidth = 5;var switchObj = $("#" + treeNode.tId + "_switch"),icoObj = $("#" + treeNode.tId + "_ico");switchObj.remove();icoObj.before(switchObj);if (treeNode.level > 1) {var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'>  </span>";switchObj.before(spaceStr);}}function beforeClick(treeId, treeNode) {            document.getElementById("fid").value=treeNode.pId;document.getElementById("zid").value=treeNode.id;document.getElementById("zname").value=treeNode.name;if (treeNode.level == 0 ) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.expandNode(treeNode);return false;}return true;}$(document).ready(function(){var treeObj = $("#treeDemo");$.fn.zTree.init(treeObj, setting, zNodes);zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");curMenu = zTree_Menu.getNodes()[0].children[0].children[0];zTree_Menu.selectNode(curMenu);treeObj.hover(function () {if (!treeObj.hasClass("showIcon")) {treeObj.addClass("showIcon");}}, function() {treeObj.removeClass("showIcon");});});//--></SCRIPT><style type="text/css">.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}.ztree li ul{ margin:0; padding:0}.ztree li {line-height:30px;}.ztree li a {width:200px;height:30px;padding-top: 0px;}.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}.ztree li a span.button.switch {visibility:hidden}.ztree.showIcon li a span.button.switch {visibility:visible}.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}.ztree li span {line-height:30px;}.ztree li span.button {margin-top: -7px;}.ztree li span.button.switch {width: 16px;height: 16px;}.ztree li a.level0 span {font-size: 150%;font-weight: bold;}.ztree li span.button {background-image:url("./left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}.ztree li span.button.switch.level0 {width: 20px; height:20px}.ztree li span.button.switch.level1 {width: 20px; height:20px}.ztree li span.button.noline_open {background-position: 0 0;}.ztree li span.button.noline_close {background-position: -18px 0;}.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}</style> </HEAD><BODY><div class="content_wrap"><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul><table><tr><td>父類ID：</td><td><input type="text" id="fid" name=""></td></tr><tr><td>ID：</td><td><input type="text" id="zid" name=""></td></tr><tr><td>名稱：</td><td><input type="text" id="zname" name=""></td></tr></table></div></div></BODY></HTML>

ZTree 擷取節點資訊