ztree插件之多选下拉菜单实例代码
css和js
复制代码 代码如下:
<script src="assets/js/jquery.js"></script>
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>
html
复制代码 代码如下:
自定义的js代码
复制代码 代码如下:
<script type="text/javascript"><br> var zTree1;<br> var setting = {<br> checkable:true,<br> checkType : { "Y": "s", "N": "s" },<br> isSimpleData: true,<br> treeNodeKey: "id",<br> treeNodeParentKey: "pId",<br> fontCss: setFont,<br> callback: {<br> beforeClick: zTreeOnBeforeClick,<br> } <br> };<br> var zNodes = [<br> {id:1, pId:0, name:"北京"},<br> {id:2, pId:0, name:"天津"},<br> {id:3, pId:0, name:"上海"},<br> {id:6, pId:0, name:"重庆"},<br> {id:4, pId:0, name:"河北省", open:false},<br> {id:41, pId:4, name:"石家庄"},<br> {id:42, pId:4, name:"保定"},<br> {id:43, pId:4, name:"邯郸"},<br> {id:44, pId:4, name:"承德"},<br> {id:5, pId:0, name:"广东省", open:false},<br> {id:51, pId:5, name:"广州"},<br> {id:52, pId:5, name:"深圳"},<br> {id:53, pId:5, name:"东莞"},<br> {id:54, pId:5, name:"佛山"},<br> {id:6, pId:0, name:"福建省", open:false},<br> {id:61, pId:6, name:"福州"},<br> {id:62, pId:6, name:"厦门"},<br> {id:63, pId:6, name:"泉州"},<br> {id:64, pId:6, name:"三明"}<br> ];<br> <p> function setFont(treeId, treeNode) {<br> if (treeNode && treeNode.isParent) {<br> return {color: "blue"};<br> } else {<br> return null;<br> }<br> }<br> function showMenu(){<br> var cityObj = $("#citySel");<br> var cityOffset = $("#citySel").offset();<br> $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast"); <br> } <br> function reloadTree(){<br> hideMenu();<br> zTree1 = $("#dropdownMenu").zTree(setting, zNodes);<br> }<br> function hideMenu() {<br> $("#DropdownMenuBackground").slideUp("fast");<br> }<br> function zTreeOnBeforeClick(treeId, treeNode) {<br> return false;<br> }<br> function enter(){<br> var str = "";<br> var nodes = zTree1.getCheckedNodes();<br> var i = 0;<br> do{<br> str = str+nodes[i].name+",";<br> if(nodes[i].isParent&&nodes[i].checked){<br> i = i+nodes[i].nodes.length;<br> }<br> else{<br> i++;<br> }<br> }while(i<nodes.length)<br> str = str.slice(0,-1);<br> $("#citySel").val(str);<br> }<br><br> $(document).ready(function(e) {<br> reloadTree();<br> $("#menuBtn").bind("click",<br> function(){<br> if($("#DropdownMenuBackground").css("display") == "none"){<br> showMenu();<br> }<br> else{<br> hideMenu();<br> }<br> }<br> );<br> $("body").bind("mousedown", <br> function(event){<br> if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {<br> hideMenu();<br> }<br> });<br> });<br></script>
立即学习“Java免费学习笔记（深入）”；
