zTree插件之多选下拉菜单代码
css和js
<!--ztree树结构--> <link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css"> <link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css"> <script src="assets/js/jquery.js"></script> <!--ztree树--> <script src="assets/ztree/js/jquery.ztree-2.6.js"></script>
html
<div class="input-append"> <input class="input-medium" id="citySel" readonly type="text" value=""> <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a> </div> <div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:250px; min-width:163px; background-color:white;border:1px solid;"> <div style="height:220px; min-width:163px; background-color:white;border:1px solid;border-bottom:0px;overflow-y:auto;overflow-x:auto;"> <ul id="dropdownMenu" class="tree"></ul> </div> <div style="height:26px;border:1px #D4D4D4 solid;box-shadow:0 -1px 10px rgba(0,0,0,0.1);background-color:#FAFAFA;background-image:-webkit-linear-gradient(top,#FFF,#F2F2F2);background-repeat: repeat-x;"> <div align="center"><a href="javascript:void(0)" οnclick="enter();hideMenu();" id="enter" class="btn btn-mini btn-inverse" style="margin-top:3px;">确定</a></div> </div> </div>
自定义的js代码
<script type="text/javascript"> var zTree1; var setting = { checkable:true, checkType : { "Y": "s", "N": "s" }, isSimpleData: true, treeNodeKey: "id", treeNodeParentKey: "pId", fontCss: setFont, callback: { beforeClick: zTreeOnBeforeClick, } }; var zNodes = [ {id:1, pId:0, name:"北京"}, {id:2, pId:0, name:"天津"}, {id:3, pId:0, name:"上海"}, {id:6, pId:0, name:"重庆"}, {id:4, pId:0, name:"河北省", open:false}, {id:41, pId:4, name:"石家庄"}, {id:42, pId:4, name:"保定"}, {id:43, pId:4, name:"邯郸"}, {id:44, pId:4, name:"承德"}, {id:5, pId:0, name:"广东省", open:false}, {id:51, pId:5, name:"广州"}, {id:52, pId:5, name:"深圳"}, {id:53, pId:5, name:"东莞"}, {id:54, pId:5, name:"佛山"}, {id:6, pId:0, name:"福建省", open:false}, {id:61, pId:6, name:"福州"}, {id:62, pId:6, name:"厦门"}, {id:63, pId:6, name:"泉州"}, {id:64, pId:6, name:"三明"} ]; function setFont(treeId, treeNode) { if (treeNode && treeNode.isParent) { return {color: "blue"}; } else { return null; } } function showMenu(){ var cityObj = $("#citySel"); var cityOffset = $("#citySel").offset(); $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast"); } function reloadTree(){ hideMenu(); zTree1 = $("#dropdownMenu").zTree(setting, zNodes); } function hideMenu() { $("#DropdownMenuBackground").slideUp("fast"); } function zTreeOnBeforeClick(treeId, treeNode) { return false; } function enter(){ var str = ""; var nodes = zTree1.getCheckedNodes(); var i = 0; do{ str = str+nodes[i].name+","; if(nodes[i].isParent&&nodes[i].checked){ i = i+nodes[i].nodes.length; } else{ i++; } }while(i<nodes.length) str = str.slice(0,-1); $("#citySel").val(str); } $(document).ready(function(e) { reloadTree(); $("#menuBtn").bind("click", function(){ if($("#DropdownMenuBackground").css("display") == "none"){ showMenu(); } else{ hideMenu(); } } ); $("body").bind("mousedown", function(event){ if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) { hideMenu(); } }); }); </script>
转载请注明:http://www.tea119.com