combotree -下拉框树异步加载

问题：

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

 

方案：

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

  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 == '1'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '2'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '3'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '4'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '5'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '6'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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 == '7'">
                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 == '2'">
                    AND ORG_TYPE_ID_2 != 'A00'
                </if>
                <if test="userType == 1 or userType == '1'">
                    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>