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>
时间： 2024-10-31 14:54:28

treegrid -表格树异步加载的相关文章

jqxtree异步加载部门树

整体思路 A.要想实现异步加载第一次加载的是一级部门 B.加载一级部门,如果有子部门,部门前面带+号,没有子部门,部门前面没有+号(+号也就是点击可以展开) C.在sql中实现如果有子部门默认都加载一个子部门名称为“查询中...”的部门,id自己定唯一就行,这样就可以实现加载的一级部门到底前面带不带+号 D.当点击可以展开的部门时,将部门为“查询中...”的替换为异步查出来的部门 1.引入样式和js(差不多能用到的都引入吧以便以后能用到) <link rel="stylesheet&quo

RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2-&gt;新增“行政区域管理”，同时大批量树采用异步加载

行政区划:简称政区,是国家为了进行分级管理而实行的区域划分.中国现行的行政区划实行如下原则:1.全国分为省.自治区.直辖市:2.省.自治区分为自治州.县.自治县.市:3.自治州分为县.自治县.市:4.县.自治县分为乡.民族乡.镇: 5.直辖市和较大的市分为区.县:6.国家在必要时设立的特别行政区.行政区划是国家为了进行分级管理而实行的区域划分.中国现行六级行政区,即省级.地级.县级.乡级.村级.组级,其中省.县.乡三级为基本行政区. “行政区域管理”基本在每一个业务系统中都会用到,框架从3.2版

Jquery树控件ZTree异步加载

转载请注明出处:jiq?钦's technical Blog 异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { async: { enable: true, url:"InitServiceIpsData.action", autoParam:["id", "name"], dataFilter:

winform TreeView的一些用法以及异步加载

今天,主要弄了一下对于树型控件的一些方法,以及异步加载.参考: http://www.cnblogs.com/greatverve/archive/2012/03/23/winform-treeview.html 下面是TreeView的一些用法 private void BindTreeView() { treeView1.LabelEdit = false;//不可编辑 //添加结点 TreeNode root = new TreeNode(); root.Text = "根节点"

jQuery.treetable使用及异步加载

Usage 1 GitHub 地址 https://github.com/ludo/jquery-treetable/ 2 API 地址 http://ludo.cubicphuse.nl/jquery-treetable/ 3 jQuery 官网链接 http://plugins.jquery.com/treetable/ 引入代码: <link href="path/to/jquery.treetable.css" rel="stylesheet" typ

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO

使用jOrgChart插件， 异步加载生成组织架构图

jOrgChart插件是一个用来实现组织结构图的Jquery的插件- 一.特点 1.支持拖拽修改子节点: 2.支持节点缩放展示: 3.方便修改css定义样式: 4.超轻量型: 5.兼容性好,基本支持所有浏览器. 二.异步加载生成自上而下的组织结构图前期准备 1.通过后台查询数据库,生成树形数组结构,返回前台: 2.需要引入js 插件和css 文件 a.jquery.jOrgChart.css(插件样式自行修改) b.jquery.jOrgChart.js c. jquery.min.js d.j

Swift - 异步加载各网站的favicon图标，并在单元格中显示

下面是一个简单的应用,表格视图的各个单元格自动异步加载各个网站的favicon图标,并显示出来. 主要是复习下如何自定义单元格,单元格中图片的异步加载,以及didSet的用法. 效果图如下: 操作步骤: (1)先创建单元格类 - FaviconTableViewCell.swift 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

zTree异步加载自动展开

最近在处理一个树形菜单,要做到异步加载.自动展开.可怎么搞都不行,要点击一下才能展开所有. 使用的zTree版本是v3.5.18.其实还是蛮简单的.话不多说,代码如下: /**  * 初始化菜单  */ var initTree = function(treeId) {     var settings = {             treeId: treeId,             async: {                 enable: true,