combotree -下拉框树异步加载

时间:2023-03-08 21:57:51

问题:

  下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载

方案:

  点击事件加载:先加载部分,点击节点时再展开并追加子节点 

  onBeforeExpand事件:在展开树前加载,感觉这种方式比较优雅,原理上和点击加载应该是相通的,细节区别没详细研究

实现:
//机构列表
function initHbxdOrg_add(id){
$('#orgId_add').combotree({
url: './user/getOrgTree?areaIdAdd='+id,
required: false,
queryParams:{Authorization: localStorage.token},
method:'get',
otherParam: {"areaIdAdd":id},
parentField:"pid",
textFiled:"name",
idFiled:"id",
animate : true,
onClick: function(node){
//部门
initHbxdDept_add(node.id);
},
onBeforeExpand:function(node,param){
$('#orgId_add').combotree("tree").tree('options').url = './user/getOrgTree?areaIdAdd='+id+'&pid='+node.id+'&lvl='+node.lvl;
},
onLoadSuccess: function (row, data) {
//$('#orgId_add').combotree('tree').tree("collapseAll");
},
loadFilter : definedTreeFilter
}); }

默认过滤器实现:没看出它有什么作用

/**
* 封装数据,将list结果集封装为树形结果集
* @param data
* @param parent
* @returns {*}
*/
function definedTreeFilter(data, parent){
var opt = $(this).data().tree.options;
var idFiled,
textFiled,
parentField;
if (opt.parentField) {
idFiled = opt.idFiled || 'id';
textFiled = opt.textFiled || 'text';
parentField = opt.parentField; var i,
l,
treeData = [],
tmpMap = []; for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
} for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textFiled];
tmpMap[data[i][parentField]]['children'].push(data[i]);
if(tmpMap[data[i][parentField]]['children']){
tmpMap[data[i][parentField]].checked = false;
}
} else {
data[i]['text'] = data[i][textFiled];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
}

查询sql: 同样添加状态属性

<select id="getRealOrgTree" resultType="org.triber.common.model.user.TreeNode">
<if test="pid == null or pid == ''">
SELECT DISTINCT ORG_TYPE_ID_1 AS id, ORG_TYPE_DSCR_1 AS `NAME`, 0 AS pid, 1 AS lvl, 'closed' AS state FROM dmcode.t_org_biz_lvl WHERE ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
</if>
<if test="pid != null and pid != ''">
<if test="lvl == 1 or lvl == ''">
SELECT DISTINCT ORG_TYPE_ID_2 AS id, ORG_TYPE_DSCR_2 AS `NAME`, ORG_TYPE_ID_1 AS pid, 2 AS lvl, 'closed' AS state FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE (area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_TYPE_ID_2
</if>
<if test="lvl == 2 or lvl == ''">
SELECT DISTINCT
ORG_ID_1 AS id, ORG_DSCR_1 AS `NAME`, ORG_TYPE_ID_2 AS pid, 3 AS lvl, 'closed' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID_1 != #{pid}
AND ORG_TYPE_ID_2=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID_1
</if>
<if test="lvl == 3 or lvl == ''">
SELECT DISTINCT
ORG_ID_2 AS id, ORG_DSCR_2 AS `NAME`, ORG_ID_1 AS pid, 4 AS lvl, 'closed' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID_2 != #{pid}
AND ORG_ID_1=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID_2
</if>
<if test="lvl == 4 or lvl == ''">
SELECT DISTINCT
ORG_ID_3 AS id, ORG_DSCR_3 AS `NAME`, ORG_ID_2 AS pid, 5 AS lvl, 'closed' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID_3 != #{pid}
AND ORG_ID_2=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID_3
</if>
<if test="lvl == 5 or lvl == ''">
SELECT DISTINCT
ORG_ID_4 AS id, ORG_DSCR_4 AS `NAME`, ORG_ID_3 AS pid, 6 AS lvl, 'closed' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID_4 != #{pid}
AND ORG_ID_3=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID_4
</if>
<if test="lvl == 6 or lvl == ''">
SELECT DISTINCT
ORG_ID_5 AS id, ORG_DSCR_5 AS `NAME`, ORG_ID_4 AS pid, 7 AS lvl, 'closed' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID_5 != #{pid}
AND ORG_ID_4=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID_5
</if>
<if test="lvl == 7 or lvl == ''">
SELECT DISTINCT
ORG_ID AS id, ORG_DSCR AS `NAME`, ORG_ID_5 AS pid, 8 AS lvl, 'open' AS state
FROM dmcode.t_org_biz_lvl
WHERE 1=1
AND ORG_DEPT_MAPPING_FLAG=#{orgDeptMappingFlag}
<if test="userType == 2 or userType == ''">
AND ORG_TYPE_ID_2 != 'A00'
</if>
<if test="userType == 1 or userType == ''">
AND ORG_TYPE_ID_2 = 'A00'
</if>
AND ORG_ID != #{pid}
AND ORG_ID_5=#{pid}
AND AREA_NO_ID IN (
SELECT
AREA_NO_ID
FROM
dmcode.t_area_code
WHERE
(area_no_id_1 = #{AREA_NO_ID} OR area_no_id_2 = #{AREA_NO_ID} OR area_no_id = #{AREA_NO_ID})
)
ORDER BY ORG_ID
</if>
</if>
</select>