jquery——zTree, 树插件

PHP基础学习 2014-12-29

转自:http://blog.csdn.net/yenange/article/details/7262682

Demo

这绝对是我见过最完美的tree了,虽然是国产货,但一点不输国外产品,国外的还没有见过这么强的。

__________________________________________________________________________________

下面是简单的使用demo:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ZTREE DEMO - Standard Data </title>  
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  6.     <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />  
  7.     <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>  
  8.     <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.         var setting = {  
  11.             view: {  
  12.                 selectedMulti: false        //禁止多点选中  
  13.             },  
  14.             data: {  
  15.                 simpleData: {  
  16.                     enable:true,  
  17.                     idKey: "id",  
  18.                     pIdKey: "pId",  
  19.                     rootPId: ""  
  20.                 }  
  21.             },  
  22.             callback: {  
  23.                 onClick: function(treeId, treeNode) {  
  24.                     var treeObj = $.fn.zTree.getZTreeObj(treeNode);  
  25.                     var selectedNode = treeObj.getSelectedNodes()[0];  
  26.                     $("#txtId").val(selectedNode.id);  
  27.                     $("#txtAddress").val(selectedNode.name);  
  28.                 }  
  29.             }  
  30.         };  
  31.         var zNodes =[  
  32.             {id:1, pId:0, name:"广东", open:true},  
  33.             {id:101, pId:1, name:"广州", file:"core/standardData"},  
  34.             {id:102, pId:1, name:"深圳", file:"core/simpleData"},  
  35.             {id:103, pId:1, name:"东莞", file:"core/noline"}  
  36.         ];  
  37.   
  38.         $(document).ready(function(){  
  39.             $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
  40.         });  
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <div style="float:left;" >  
  45.         <ul id="treeDemo" class="ztree">  
  46.         </ul>  
  47.     </div>  
  48.     <div style="float:left;" >  
  49.         id: <input id="txtId" type="text" value="" /><br />  
  50.         地名:<input id="txtAddress" type="text" value="" />  
  51.     </div>  
  52. </body>  
  53. </html> 

相关推荐