ドロップダウン枠内にツリーが表示されます.
2926 ワード
https://codepen.io/jx915/pen/yjwMdJ
HTML
HTML
CSS.trg{
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 6px solid black;;
position: absolute;
left:181px;
top:8px;
}
.org-select{
cursor: default;
z-index: -1;
width:200px;
}
JS
function showTree(){
if($('.ztree').css('display') == 'none'){
$('.ztree').css('display','block');
} else{
$('.ztree').css('display','none');
}
$("body").bind("mousedown", onBodyDownByActionType);
}
function onBodyDownByActionType(event) {
if (event.target.id.indexOf('treeDemo') == -1){
if(event.target.id != 'orgName'){
hideTree();
}
}
}
function hideTree() {
$('.ztree').css('display','none');
$("body").unbind("mousedown", onBodyDownByActionType);
return false;
}
function zTreeOnClick(event, treeId, treeNode) {
$('#orgName').val(treeNode.name);
$('#orgCode').val(treeNode.Id)
hideTree();
};
var orgList =[
{ id:1, pId:0, name:" 1 - ", open:true},
{ id:11, pId:1, name:" 11 - "},
{ id:111, pId:11, name:" 111"},
{ id:112, pId:11, name:" 112"},
{ id:113, pId:11, name:" 113"},
{ id:114, pId:11, name:" 114"},
{ id:12, pId:1, name:" 12 - "},
{ id:121, pId:12, name:" 121"},
{ id:122, pId:12, name:" 122"},
{ id:123, pId:12, name:" 123"},
{ id:124, pId:12, name:" 124"},
];
var setting = {
data: {
simpleData: {
enable: true
}
},
//
callback: {
onClick: zTreeOnClick
},
view: {
fontCss: { fontSize: "14px" }
}
};
//
$(document).ready(function () {
//
$.fn.zTree.init($("#treeDemo"), setting, orgList);
});