zTree插件之多選下拉式選單實例程式碼_javascript技巧

zTree插件之多選下拉菜單實例代碼 css和js

複製代碼 程式碼如下:

html 複製程式碼 程式碼如下: <div class="put-

確定 自訂的js程式碼 複製程式碼 程式碼如下: 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; str = str nodes [i] .name "、 "; if(nodes[i].isParent&&nodes[i].checked){ i = i nodes[i].nodes.length; } else{ 私 ; } }while(i 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 == "ドロップダウンメニューの背景" || $(event.target).parents("#DropdownMenuBackground").length>0)) { hideMenu(); } }); });