效果展示:
HTML代码:
<div class="oraTree">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">组织机构</h4>
</div>
<div class="modal-body clearfix pt20 pb20">
<div id="provinceListDivList" class="ztree"></div>
</div>
</div>
</div>
</div>
js:
$(function () {
//树加载 start
var setting = {
check: {
//是否要加个多选单选之类的
enable: false
},
data: {
key: {
//树节点要展示的名称key
name: "orgFullName"
},
simpleData: {
//这里设置要自定义的参数名称,详细详细请参考zTree 的 API
enable: true, idKey: "orgCode", pIdKey: "parentCode", rootPId: ''
}
},
callback: {
//点击后绑定事件:筛选出需要的组织机构
onClick: zTreeOnClick
}
};
var showData = [];
var organization = {};
$.ajax({
url: WEB_ROOT + "/organization/listDataZTree",
data: organization,
async: true,
type: "POST",
dataType: "json",
success: function (data) {
if (data.success) {
showData = data.treeViewVOList;
$.fn.zTree.init($("#provinceListDivList"), setting, showData).expandAll(true);
} else {
WEB.msg.info("提示", "系统错误,请稍后再试!")
}
}
});
//树加载 end
})
//下面这个是我这边功能需要的,可以不要
function zTreeOnClick(event, treeId, treeNode) {
queryStaffTabByNode(1, treeNode);
}
function queryStaffTabByNode(pageNo, node) {
//如果存在子节点,全部查出来
var qryUrl = WEB_ROOT + "/organization/getListByNode";
//根据节点ID以及父节点ID筛选
var nodeId = node.id;
//机构名称
var params = {
orgCode: nodeId,
"search_.page": pageNo,
"search_.pageCount": 10
};
$.gridLoading({message: "正在查询数据"});
$.ajax({
url: qryUrl,
data: params,
async: true,
dataType: "html",
success: function (data) {
$.gridUnLoading({message: "正在查询数据"});
$("#organizationTabDiv").empty();
$("#organizationTabDiv").html(data);
}
});
}
后端代码:
@ResponseBody
@RequestMapping(value = "/organization/listDataZTree")
public Map<String, Object> getOrganizationZTree(TdSysOrganization organizationDTO)
{
Map <String,Object> retMap =new HashMap<String, Object>();
PageResponse response= organizationApi.selectOrganizationList(organizationDTO);
List<TreeViewVO> organizationList=response.getResult();
retMap.put("success",true);
retMap.put("treeViewVOList",organizationList);
return retMap;
}
详细的可以参考ztree API:http://www.treejs.cn/v3/api.php
下面写一下关于zTree选中树节点的获取方法:
CheckBox形式的选中网上有很多,这里就不写了,这里主要介绍一种
check: {
enable: false
},
的情况
/**
* 选定上级组织结构信息
*/
function selectOrgConfirm(event, treeId, treeNode) {
//双击进入的时候
$("#select_province_modal").modal('hide');
var parentCodes = treeNode.parentCodes;
var id = treeNode.orgWord;
var text = treeNode.orgFullName;
$("#parentCode").val(id);
$("#parentCodes").val(parentCodes);
$("#parentName").val(text);
}
function onCheckOrgConfirm() {
//选中然后点击确定进入的时候
$("#select_province_modal").modal('hide');
var treeObj = $.fn.zTree.getZTreeObj("provinceListDiv"),
nodes = treeObj.getSelectedNodes();
//选中了就可以用
if (nodes.length > 0) {
$("#parentCode").val(nodes[0].orgCode);
$("#parentCodes").val(nodes[0].parentCodes);
$("#parentName").val(nodes[0].orgFullName);
}
}
下面的我的是给组件赋值,可以根据实际场景修改