问题：
机构维护时，前端框架用的是easyui，如果同步全加载会出现页面延迟严重，影响用户体验
解决：
机构逐层加载，点击后加载
逐层加载会出现一个问题：子节点只有点击后才能加载子集
所以开始为叶子节点图标，点击后变成枝节点，不点就误以为到最后一层
目前的解决办法是加载是提供状态属性，默认关闭，加载不到子集时展开状态为叶子节点图标
实现：
function initOrgMaintainDetail(versionId){ var tree = $("#orgMaintainDetail").treegrid(); var dataTree = ''; $.ajax({ url:'./fileServiceType/getOrgTreeDetail', async:false, data: { Authorization: localStorage.token, versionId:versionId }, success:function(data){ dataTree = data; } });
//开始加载机构树前两层 tree.treegrid({ data:dataTree, queryParams: { Authorization: localStorage.token, versionId:versionId }, idField:'orgTypeId', cascadeCheck:true, treeField:'orgDesc', fitColumns:true, animate: true, columns:[[ {title:'金融机构编码',field:'orgTypeId',align:'center',200}, {title:'金融机构名称',field:'orgDesc',300}, {title:'是否启用',field:'isActive',align:'center',formatter:function(value){ return value == 1?'启用':'禁用'; },100}, //{title:'归属人行',field:'reserved',align:'center',200}, {title:'归属地区',field:'areaNo',align:'center',150,formatter:function(value,rec){ var areaDscr =''; $.ajax({ url:'area/find', data:{ Authorization: localStorage.token,areaId:rec.areaNo}, type:'POST', dataType:'JSON', async:false, success:function(data){ areaDscr = data.AREA_DSCR; } }); return areaDscr; }}, {title:'操作',field:'operate',align:'center',200, formatter:function(value,rec){ var add = "<a href='javascript:void(0);' onclick="openAddOrUptOrgPancyBox('" + 1 + "','"+ rec.orgTypeId + "','"+ 0 + "','"+ rec.org_lvl + "','"+ 1 + "','"+ 0 + "','"+ 0 + "');"><font color='#1e90ff'>新增</font></a>"; var editArea = "<a href='javascript:void(0);' onclick="onclickAreaPancyBox('" + rec.areaNo + "')"><font color='#1e90ff'>地区维护</font></a><br>"; var update = "<a href='javascript:void(0);' onclick="openAddOrUptOrgPancyBox('" + 0 + "','"+ rec.orgTypeId + "','"+ rec.orgDesc + "','"+ rec.org_lvl + "','"+ rec.isActive + "','"+ rec.ord + "','"+ rec.areaNo + "')"><font color='#1e90ff'>修改</font></a>"; var batchLoad = "<a href='javascript:void(0);' onclick="batchImportDBMS('" + rec.ORG_ID + "','"+ rec.LVL + "','"+ rec.ORG_ID + "')"><font color='#1e90ff'>批量导入BMS</font></a>"; if(rec.org_lvl == 1){ return add + " " + update + " "; }else{ return add + " " + update; } } } ]], onLoadSuccess: function (row, data) { tree.treegrid("collapseAll"); }, onBeforeExpand:function(row){ expandNode(row,tree,versionId); }, onDblClickRow: function (row) { tree.treegrid('toggle',row.orgTypeId); } }); } //追加子节点 function expandNode(row,tree,versionId){ $.ajax({ url: './fileServiceType/getOrgNodeChilds', type: 'POST', async:false, data: { Authorization: localStorage.token, org_lvl: row.org_lvl, p_Id: row.orgTypeId, versionId:versionId }, success: function (data) { if(data != ''){ $.each(data, function(idx, obj) { var node = tree.treegrid('find',obj.orgTypeId); //该节点存在则不拼接 if(node==null){ tree.treegrid('append',{ parent: row.orgTypeId, data: [{ orgTypeId: obj.orgTypeId, orgDesc: obj.orgDesc, org_lvl: obj.org_lvl, areaNo: obj.areaNo, isActive:obj.isActive, ord:obj.ord, reserved:obj.reserved, state:obj.state }] }); } }); }else{ //没有数据则更改节点状态为叶子节点 tree.treegrid('update',{ id:row.orgTypeId, row:{
//每层都默认有子集，直到查不到子集再展开 state:'open' } }); } } }); }
节点实体类：
package org.triber.portal.model.bank; import lombok.Getter; import lombok.Setter; import java.io.Serializable; import java.util.ArrayList; import java.util.List; public class Node implements Serializable { /** * 加载树需要列 */ @Getter @Setter private String orgTypeId;//编号 @Getter @Setter private String orgDesc;//名字 @Getter @Setter private List<Node> children = new ArrayList<Node>();//子集 @Getter @Setter private String p_Id; @Getter @Setter private String isActive; @Getter @Setter private String org_lvl;//级别 @Getter @Setter private String ord;//排序 @Getter @Setter private String areaNo; @Getter @Setter private String state = "closed";//节点状态 /** * 信息列 */ // @Getter @Setter private String isAdd; // @Getter @Setter private String addOrgIdPancy; // @Getter @Setter private String isCheckNodeId; // @Getter @Setter private String orgId; // @Getter @Setter private String addOrgDscrPancy; // @Getter @Setter private String addOrgDscr1Pancy; // @Getter @Setter private String addIsActive; // @Getter @Setter private String nodesNum; // @Getter @Setter private String orgLvl; // @Getter @Setter private String lvlOrd; // @Getter @Setter private String versionId; // @Getter @Setter private String humanDecencyId; }
查询sql:
<select id="getOrgRootTree" resultType="org.triber.common.model.user.TreeNode"> SELECT DISTINCT tt1.id, tt1.`NAME`, tt1.pid, CASE WHEN tt3.org_id=tt1.id THEN 1 ELSE 0 END AS isChecked,'closed' AS state, CASE WHEN tt1.id = tt2.ORG_TYPE_ID_1 OR tt1.id = tt2.ORG_TYPE_ID_2 OR tt1.id = tt2.ORG_ID_1 OR tt1.id = tt2.ORG_ID_2 OR tt1.id = tt2.ORG_ID_3 OR tt1.id = tt2.ORG_ID_4 OR tt1.id = tt2.ORG_ID_5 THEN 1 ELSE 0 END AS hasChecked FROM ( SELECT DISTINCT org_type_id_1 id, org_type_dscr_1 `NAME`, 0 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} UNION SELECT DISTINCT org_type_id_2 id, org_type_dscr_2 `NAME`, org_type_id_1 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} ) tt1 LEFT JOIN ( SELECT findcheck.org_id, findcheck.biz_type_id, tobl.ORG_TYPE_ID_1, tobl.ORG_TYPE_ID_2, tobl.ORG_ID_1, tobl.ORG_ID_2, tobl.ORG_ID_3, tobl.ORG_ID_4, tobl.ORG_ID_5, tobl.`LEVEL` FROM dmcode.t_org_biz_lvl tobl RIGHT JOIN ( SELECT biz_type_id,org_id FROM comm_sys.t_biz_type_org_xref WHERE biz_type_id IS NOT NULL AND biz_type_id = #{bizTypeId} ) findcheck ON (tobl.ORG_ID = findcheck.org_id OR findcheck.org_id = tobl.ORG_TYPE_ID_1 OR findcheck.org_id = tobl.ORG_TYPE_ID_2) ) tt2 ON (tt1.id = tt2.ORG_TYPE_ID_1 OR tt1.id = tt2.ORG_TYPE_ID_2) LEFT JOIN (SELECT org_id FROM comm_sys.t_biz_type_org_xref WHERE biz_type_id = #{bizTypeId}) tt3 ON tt1.id = tt3.org_id ORDER BY tt1.id </select>
//加载子节点
<select id="getOrgTreeByParent" resultType="org.triber.common.model.user.TreeNode"> SELECT DISTINCT tt1.id,tt1.`NAME`,tt1.pid,tt1.state, CASE WHEN tt1.id = tt3.org_id THEN 1 ELSE 0 END AS isChecked, CASE WHEN tt1.id = tt2.ORG_TYPE_ID_1 OR tt1.id = tt2.ORG_TYPE_ID_2 OR tt1.id = tt2.ORG_ID_1 OR tt1.id = tt2.ORG_ID_2 OR tt1.id = tt2.ORG_ID_3 OR tt1.id = tt2.ORG_ID_4 OR tt1.id = tt2.ORG_ID_5 THEN 1 ELSE 0 END AS hasChecked FROM ( SELECT DISTINCT org_all.id,org_all.NAME,org_all.pid, CASE WHEN org_all.id IN (SELECT DISTINCT parent_org_id FROM dmcode.t_org_biz_lvl WHERE parent_org_id IS NOT NULL AND parent_org_id != '') THEN 'closed' ELSE 'open' END AS state FROM ( SELECT DISTINCT org_id_1 id,org_dscr_1 `NAME`,org_type_id_2 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} UNION SELECT DISTINCT org_id_2 id,org_dscr_2 `NAME`,org_id_1 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} UNION SELECT DISTINCT org_id_3 id,org_dscr_3 `NAME`,org_id_2 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} UNION SELECT DISTINCT org_id_4 id,org_dscr_4 `NAME`,org_id_3 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} UNION SELECT DISTINCT org_id_5 id,org_dscr_5 `NAME`,org_id_4 pid FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag} ) org_all LEFT JOIN (SELECT org_id FROM dmcode.t_org_biz_lvl WHERE org_dept_mapping_flag = #{orgDeptMappingFlag}) w ON org_all.id = w.org_id WHERE 1=1 AND org_all.id != org_all.pid <if test="pid != null and pid != ''"> AND pid = #{pid} </if> <if test="areaId != null and areaId != ''"> AND org_all.AREA_NO_ID IN (SELECT AREA_NO_ID FROM dmcode.t_area_code WHERE (area_no_id_1 = #{areaId} OR area_no_id_2 = #{areaId} OR area_no_id = #{areaId} OR OLD_AREA_NO_ID = #{areaId} OR DISTRICT_CODE = #{areaId})) </if> ) tt1 LEFT JOIN ( SELECT findcheck.org_id,findcheck.biz_type_id,tobl.ORG_TYPE_ID_1,tobl.ORG_TYPE_ID_2,tobl.ORG_ID_1,tobl.ORG_ID_2,tobl.ORG_ID_3,tobl.ORG_ID_4,tobl.ORG_ID_5,tobl.`LEVEL` FROM dmcode.t_org_biz_lvl tobl RIGHT JOIN ( SELECT biz_type_id, org_id FROM comm_sys.t_biz_type_org_xref WHERE biz_type_id IS NOT NULL AND biz_type_id = #{bizTypeId} ) findcheck ON tobl.ORG_ID = findcheck.org_id ) tt2 ON ( CASE WHEN tt2.`LEVEL` = 1 THEN tt1.id = tt2.ORG_TYPE_ID_2 WHEN tt2.`LEVEL` = 2 THEN tt1.id = tt2.ORG_ID_1 WHEN tt2.`LEVEL` = 3 THEN tt1.id = tt2.ORG_ID_2 WHEN tt2.`LEVEL` = 4 THEN tt1.id = tt2.ORG_ID_3 WHEN tt2.`LEVEL` = 5 THEN tt1.id = tt2.ORG_ID_4 ELSE tt1.id = tt2.ORG_ID END ) LEFT JOIN (SELECT org_id FROM comm_sys.t_biz_type_org_xref WHERE biz_type_id = #{bizTypeId}) tt3 ON tt1.id = tt3.org_id ORDER BY tt1.id </select>