zTree插件之多選下拉菜單實例代碼
zTree插件之多選下拉菜單實例代碼
css和js
<!--ztree樹結構-->
<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
<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,0,0,0.1);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 btn-mini btn-inverse" style="margin-top:3px;">確定</a></div>
</div>
</div>
自定義的js代碼
<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:"北京"},
{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;
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.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {
hideMenu();
}
});
});
</script>
相關文章
擴展js對象數組的OrderByAsc和OrderByDesc方法實現思路
js的擴展方法是基于原型的,如Array.prototype.XXXX就是給Array擴展XXX方法,然后數組都能使用這個方法了,在對象數組里面經常有根據屬性來進行排序的,升序,降序的,下面與大家分享自己寫的一個2013-05-05javascript循環(huán)變量注冊dom事件 之強大的閉包
是在循環(huán)過程過this被改變,注冊過的事件也被隨之改變,找到了一種解決方法2010-09-09分享XmlHttpRequest調用Webservice的一點心得
因為項目需要,以后前端、手機客戶端調用ASP.NET的Webservice來獲取信息.所以這段時間開始看Webservice,試著通過XmlHttpRequest調用Webservice,過程中碰到不少問題,也有不少的收獲2012-07-07