treegrid -表格树异步加载

问题：

　　机构维护时，前端框架用的是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',width:200},

            {title:'金融机构名称',field:'orgDesc',width:300},

            {title:'是否启用',field:'isActive',align:'center',formatter:function(value){

                return value == 1?'启用':'禁用';

            },width:100},

            //{title:'归属人行',field:'reserved',align:'center',width:200},

            {title:'归属地区',field:'areaNo',align:'center',width: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',width: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 + "&nbsp;" + update + "&nbsp;";

                    }else{

                        return add + "&nbsp;" + 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>

巴特西

treegrid -表格树异步加载

最新文章

热门文章