很牛逼的一个树形菜单，树形下拉框插件。一年前用过，很好用。今天又有机会拿过来用，温故一下基本点，nice！！
官方文档说明的非常详细，按照API慢慢看，耐心解读，自然就可以解惑了。
核心代码展示:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>selectmenu.html</title>
5
6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 <meta http-equiv="description" content="this is my page">
8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9 <link rel="stylesheet" href="../../frameworks/css/demo.css" type="text/css">//ztree的样式
10 <link rel="stylesheet" href="../../frameworks/css/zTreeStyle.css" type="text/css">//ztree的样式
11 <script type="text/javascript" src="../../frameworks/jquery-1.4.4.min.js"></script>//ztree必须的JS
12 <script type="text/javascript" src="../../frameworks/jquery.ztree.core-3.5.min.js"></script>//ztree必须的JS
13
14 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
15 <SCRIPT type="text/javascript">
16 <!--
17 var setting = {
18 view: {
19 dblClickExpand: false
20 },
21 data: {
22 simpleData: {
23 enable: true,
24 idKey: "id",
25 pIdKey: "pid",
26 rootPId: 0
27 }
28 },
29 callback: {
30 beforeClick: beforeClick,
31 onClick: onClick
32 }
33 };
34
35 function beforeClick(treeId, treeNode) {
36 var check = (treeNode && !treeNode.isParent);
37 if (!check) alert("只能选择城市...");
38 return check;
39 }
40
41 function onClick(e, treeId, treeNode) {
42 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
43 nodes = zTree.getSelectedNodes(),
44 v = "";
45 nodes.sort(function compare(a,b){return a.id-b.id;});
46 for (var i=0, l=nodes.length; i<l; i++) {
47 v += nodes[i].name + ",";
48 $("#mydepId").val(nodes[i].id);
49 }
50 if (v.length > 0 ) v = v.substring(0, v.length-1);
51 var cityObj = $("#citySel");
52 cityObj.attr("value", v);
53 var selectValue=$("#mycompId").val();
54 alert("从ztree中选择的值是："+selectValue);
55
56 }
57
58 function showMenu() {
59 var cityObj = $("#citySel");
60 var cityOffset = $("#citySel").offset();
61 console.log(cityOffset);
62 $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
63
64 $("body").bind("mousedown", onBodyDown);
65 }
66 function hideMenu() {
67 $("#menuContent").fadeOut("fast");
68 $("body").unbind("mousedown", onBodyDown);
69 }
70 function onBodyDown(event) {
71 if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
72 hideMenu();
73 }
74 }
75
76 function createTree () {
77 var zNodes;
78 $.ajax({
79 url: ‘/omss/ztreeDepInfo‘, //url action是方法的名称
80 type: ‘POST‘,
81 data:{ compId: "46" },
82 dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
83 ContentType: "application/json; charset=utf-8",
84 success: function(data) {
85 zNodes = data;
86 console.log("ztreedata="+JSON.stringify(data));
87 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
88 },
89 error: function(msg) {
90 alert("失败");
91 }
92 });
93 }
94
95 $(document).ready(function() {
96 createTree();
97 });
98 //-->
99 </SCRIPT>
100 </head>
101
102 <body>
103
104 <input class="input-medium " id="citySel" type="text" readonly value="" style="width:200px;"/>
105 <div id="mydepId" class="hide"></div>
106 <button data-toggle="dropdown" id="menuBtn" onclick="showMenu(); return false;">
107 <span class="ace-icon fa fa-caret-down icon-only"></span>
108 </button >
109 <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
110 <ul id="treeDemo" class="ztree" style="margin-top:0; width:240px;"></ul>
111 </div>
112 </body>
113 </html>
展示的效果如下：
时间： 2024-10-17 17:11:56