zTree插件之多选下拉菜单实例代码css和js 复制代码 代码如下: html 复制代码 代码如下: 确定 自定义的js代码 复制代码 代码如下: <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>
