JS插件之——ztree
很牛逼的一个树形菜单，树形下拉框插件。一年前用过，很好用。今天又有机会拿过来用，温故一下基本点，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>
展示的效果如下：
