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> str = str nodes [i] .name "、 ";<br> if(nodes[i].isParent&&nodes[i].checked){<br> i = i nodes[i].nodes.length;<br> }<br> else{<br>私 ;<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 == "ドロップダウンメニューの背景" || $(event.target).parents("#DropdownMenuBackground").length>0)) {<br> hideMenu();<br> }<br> });<br> });<br></スクリプト><br></p> </div>
