jquery——zTree, 树插件
转自：http://blog.csdn.net/yenange/article/details/7262682
这绝对是我见过最完美的tree了，虽然是国产货，但一点不输国外产品，国外的还没有见过这么强的。
__________________________________________________________________________________
下面是简单的使用demo:
- <!DOCTYPE html>
- <html>
- <head>
- <title>ZTREE DEMO - Standard Data </title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
- <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
- <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
- <script type="text/javascript">
- var setting = {
- view: {
- selectedMulti: false //禁止多点选中
- },
- data: {
- simpleData: {
- enable:true,
- idKey: "id",
- pIdKey: "pId",
- rootPId: ""
- }
- },
- callback: {
- onClick: function(treeId, treeNode) {
- var treeObj = $.fn.zTree.getZTreeObj(treeNode);
- var selectedNode = treeObj.getSelectedNodes()[0];
- $("#txtId").val(selectedNode.id);
- $("#txtAddress").val(selectedNode.name);
- }
- }
- };
- var zNodes =[
- {id:1, pId:0, name:"广东", open:true},
- {id:101, pId:1, name:"广州", file:"core/standardData"},
- {id:102, pId:1, name:"深圳", file:"core/simpleData"},
- {id:103, pId:1, name:"东莞", file:"core/noline"}
- ];
- $(document).ready(function(){
- $.fn.zTree.init($("#treeDemo"), setting, zNodes);
- });
- </script>
- </head>
- <body>
- <div style="float:left;" >
- <ul id="treeDemo" class="ztree">
- </ul>
- </div>
- <div style="float:left;" >
- id: <input id="txtId" type="text" value="" /><br />
- 地名：<input id="txtAddress" type="text" value="" />
- </div>
- </body>
- </html>
相关推荐
83493467 2014-01-13
小源丶同学 2015-03-04
83443560 2018-12-05
xchrist 2016-03-03
LingPF 2019-06-30
shanhuijava 2015-12-11
火星的你 2015-07-10
88463368 2015-03-04
Chydar 2019-06-27
CrazyDogWang 2014-08-20
罗惠东 2014-03-09
asdjkl 2014-01-13
kbkiss 2019-06-26
愚盦 2013-10-21
zgwyfz 2013-09-14
momode 2013-06-28
84483368 2013-06-02
JeWangZhe 2013-03-11