表单中显示ztree树结构
效果图
制作步骤
页面的HTML
<div class="col-md-6 col-sm-6" >
<div class="form-group ">
<label class="col-sm-3 control-label" for="">
所属组织
<span id="label_orgname"><font
color="RED" style="font-size: 12px">*</font></span>
</label>
<div class="col-sm-9" style="text-align:left;">
<div style=" border-collapse: separate;display: table;" id="dept_div">
<input type="text" id="textorg" placeholder="请选择所属部门" name="orgname" readonly="readonly"
style=" border-bottom-right-radius: 0px;border-top-right-radius: 0px;"
class="form-control" data-bv-field="contacts_id" />
<i style="display: none;" class="form-control-feedback" data-bv-icon-for="contacts_id"></i>
<div onclick="showMenu('dept_div'); return false;" style="cursor:pointer;" class="input-group-addon">
<!-- <span class="glyphicon-user glyphicon"></span> -->选择
</div>
</div>
</div>
</div>
</div>
<!-- 一般讲该段代码放在form标签的外层,这样就会显示在最上方-->
<div id="menuContent" class="menuContent"
style="background: #fff; display: none; position: absolute; border: 1px solid #ddd; border-radius: 5px;">
<ul id="dept_tree" class="ztree"
style="margin-top: 0; width: 296px;">
</ul>
</div>
页面的js-----初始化ztree
jQuery(document).ready(function() {
$.ajax({
url:baseURL+'/umuser/getTreeData.action',
dataType: 'json',
type:'post',
async: false,
success: function(data){
zNodes=data;
}
});
$.fn.zTree.init($("#dept_tree"), setting, zNodes);
});
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick:function zTreeOnClick(event, treeId, treeNode){
//获得父节点的name 和 id
var ids=[];
var parentsids = getParentids(ids,treeNode);//获得当前节点的父节点id
parentsids.push(treeNode.id);
var names=[];
var parentsnames = getParentnames(names,treeNode);//获得当前节点的父节点name
parentsnames.push(treeNode.name);
//alert(parentsids+' '+parentsnames);
//var id = treeNode.id;
$('#parentids').val(parentsids+'');//设置parentsids的值
$('#parentnames').val(parentsnames+'');//设置parentsnames的值
$('#textorg').val(treeNode.name);//设置节点所属部门的值
$('#orgid').val(treeNode.id);//设置orgid
//$('#frm_umuser').bootstrapValidator('revalidateField', 'dept_name');
$("#usersForm").data('bootstrapValidator').updateStatus('orgname', 'VALIDATED', null).validateField('orgname');
hideMenu();
}
},
view:{
fontCss:{font:{'background-color':'black', 'color':'white'}}
}
};
写"显示/隐藏"的js方法
//隐藏zTree外围div容器
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
//点击“选择”后显示zTree树
function showMenu(id) {
CurInput = 1; //标记第一个文本框
var cityObj = $("#"+id);
var cityOffset = $("#"+id).offset();
var w=$("#"+id).css('width');
var sw=w.substr(0,w.length-2)-12+'px';
$("#dept_tree").width(sw);
//定位zTree外围div容器位置
//alert(cityOffset.left+":"+cityOffset.top);
$("#menuContent").css({
// left: cityOffset.left-mod_left + "px",
// top: cityOffset.top-mod_top-24 + "px"
left:cityOffset.left + "px",
top: cityOffset.top+30 + "px"
}).slideDown("fast");
//绑定页面的鼠标按下事件
$("body").bind("mousedown", onBodyDown);
}
//判断当前事件来源
function onBodyDown(event) {
if (! (event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu();
}
}