ZTree plug-in Multi-choice drop-down menu instance code

ZTree plug-in Multi-choice drop-down menu instance code
Css and js
Copy codeThe Code is as follows:
<! -- Ztree Tree Structure -->
<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
Copy codeThe Code is as follows:
<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.1, 0,); background-color: # FAFAFA; background-image:-webkit-linear-gradient (top, # FFF, # F2F2F2); background-repeat: repeat-x; ">
<Div align = "center"> <a href = "javascript: void (0)" onclick = "enter (); hideMenu (); "id =" enter "class =" btn-mini btn-inverse "style =" margin-top: 3px; "> OK </a> </div>
</Div>
</Div>

Custom js Code
Copy codeThe Code is as follows:
<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: "Beijing "},
{Id: 2, pId: 0, name: "Tianjin "},
{Id: 3, pId: 0, name: "Shanghai "},
{Id: 6, pId: 0, name: "Chongqing "},
{Id: 4, pId: 0, name: "Hebei Province", open: false },
{Id: 41, pId: 4, name: "Shijiazhuang "},
{Id: 42, pId: 4, name: "Baoding "},
{Id: 43, pId: 4, name: "Handan "},
{Id: 44, pId: 4, name: "Chengde "},
{Id: 5, pId: 0, name: "Guangdong Province", open: false },
{Id: 51, pId: 5, name: "Guangzhou "},
{Id: 52, pId: 5, name: "Shenzhen "},
{Id: 53, pId: 5, name: "Dongguan "},
{Id: 54, pId: 5, name: "Foshan "},
{Id: 6, pId: 0, name: "Fujian Province", open: false },
{Id: 61, pId: 6, name: "Fuzhou "},
{Id: 62, pId: 6, name: "Xiamen "},
{Id: 63, pId: 6, name: "Quanzhou "},
{Id: 64, pId: 6, name: "Sanming "}
];

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.tar get. id = "DropdownMenuBackground" | parameters (event.tar get). parents ("# DropdownMenuBackground"). length> 0 )){
HideMenu ();
}
});
});
</Script>