搜尋條件帶樹形下拉框（ztree實現）
阿新 • • 發佈：2019-02-08
查詢條件中帶有樹形下拉框，使用ztree實現。（有人關注，極大的激發了我的記錄激情）。
1.準備ztree相關的js，css等。（可以去我的資源中下載）
2.編寫程式碼
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="tree/themes/default/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" href="bootstrap.css" type="text/css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="tree/vendor/jquery.ztree.all.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的引數配置，深入使用請參考 API 文件（setting 配置詳解） var setting = {//樹 check: { enable: true, chkDisabledInherit: false, chkboxType: {"Y":"s", "N":"s"} }, view : { dblClickExpand : false }, data : { simpleData : { enable : true, idKey: "ID", pIdKey: "PID", rootPId: "-1" } }, callback: { //onClick: onClick, onCheck: onCheck }, view : { selectedMulti : false, showIcon : false } }; // zTree 的資料屬性，深入使用請參考 API 文件（zTreeNode 節點資料詳解） // 樹的資料 var treeNodes = [ { ID : 1, PID : "-1", name : "1級業務節點", open : true }, { ID : 323, PID : "1", name : "2級業務葉子節點 ", open : true }, { ID : 324, PID : "323", name : "3級業務葉子節點" } ]; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, treeNodes); $("#menuBtn").click(function(event){ // event.stopPropagation(); $("#ztreeDiv").toggle(); }); }); function onCheck(e, treeId, treeNode){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), v = ""; ids=""; for (var i=0, l=nodes.length; i<l; i++) { if(nodes[i].name!="全部"){ v += nodes[i].name + ","; ids+=nodes[i].id+"," } } if (v.length > 0 ) v = v.substring(0, v.length-1); if (ids.length > 0 ) ids = ids.substring(0, ids.length-1); var cityObj = $("#select2totree2"); cityObj.attr("value", v); cityObj.attr("name", ids); } </SCRIPT> </HEAD> <BODY> <div> </div> <div class="col-md-4"> <input class="form-control" id="select2totree2" type="text" readonly value="" style="width: 80%;display:initial;" /> <a id="menuBtn" href="#">選擇</a> <div id='ztreeDiv' class="col-md-2" style="width:78%;position: absolute;z-index: 10000;border:1px solid rgb(198, 198, 224)"> <ul id="treeDemo" class="ztree" style="padding-top: 10px;"> </ul> </div> </div> </BODY> </HTML>