java使用orgchart插件实现组织结构树

1.数据库表设置结构关联关系

2.进行后台代码查询数据并进行层级封装
/**
* 获取所有的树结构信息
* @return
*/

public List<String> getPartyOrganizationStructureData(){
    List<String> ids=new ArrayList<>();
    List<String> orgList=new ArrayList<>();
    List<String> parentNameList=new ArrayList<>();
    List<String> parentIds=new ArrayList<>();
    //返回界面集合
    List<String> ps=new ArrayList<>();
    StringBuffer buff=new StringBuffer();
    buff.append("select * from PARTY_ORGANIZATION_STRUCTURE");
    DataTable data=dao.getDataTable(buff.toString(),new Object[]{},1,2147483647);
    for(int i=0;i< data.getRow();i++){
        //当前党名称
        orgList.add(data.getData(i).getString("POS01"));
        //保存父级名称
        parentNameList.add(data.getData(i).getString("POS02"));
        //保存父级pid
        parentIds.add(data.getData(i).getString("POS06"));
        //保存当前序号
        ids.add(data.getData(i).getString("POS00"));
    }
    //进行结构封装
    return ContvertUtils.contvertStructure(ids,orgList,parentNameList,parentIds,"0");
}

/**
* 转换封装党结构层级关系工具类
* @param ids
* @param posName
* @param parentIds
* @param parentId
* @return

public static List<String> contvertStructure(List<String> ids,List<String> posName,List<String>parentNames,List<String> parentIds, String parentId){
    List results=new ArrayList<>();
    for(int i=0;i < posName.size();i++){
        //获取父级名称
        //String pName=parentNames.get(i);
        //获取当前父id
        String pid=parentIds.get(i);
        //获取当前id
        String id=ids.get(i);
        //判断父名称是否相等
        if(StringUtils.equals(pid, parentId)){
            //实例化map
            Map map=new HashMap();
            //map保存当前id
            map.put("id",ids.get(i));
            //map保存当前名称
            map.put("name",posName.get(i));
            //map保存当前父id
            map.put("parentId",parentIds.get(i));
            //递归是否还有子级节点
            List<String> childrens=contvertStructure(ids,posName,parentNames,parentIds,id);
            //不为空添加进map集合
            if(!childrens.isEmpty()){
                map.put("relationship","111");
                //封装子级
                map.put("children",childrens);
            }
            results.add(map);
        }
    }
    return results;
}

3.前台页面获取数据并展示树结构

/**
* ajax获取数据并初始化插件
*
*/

$(function(){
//获取数据源
var dataList=”“;
var jsonParam = {obj: ‘clientBiz’, method: ‘getPartyOrganizationStructureData’};

    $.fn.feajax(jsonParam, false, 'text', function (data) {
        dataList=data;
    });
    var json=JSON.parse(dataList);

    //封装成orgchart插件需要的json格式
    var jsonObj={
        'name':json[0].name,
        'id':json[0].id,
        'parentId':json[0].parentId,
        'relationship':'001',
        'children':json[0].children
    };
    //定义获取元素方法
    var ajaxURLs = {
        'children': function(nodeData){
            // return  getChildrenValue(nodeData.id);
            return  nodeData.id;
            /* return  '/orgchart/children/' + nodeData.id;*/
        } ,
        'parent': '/orgchart/parent/',
        'siblings': function(nodeData) {
            return '/orgchart/siblings/' + nodeData.id;
        },
        'families': function(nodeData) {
            return '/orgchart/families/' + nodeData.id;
        }
    };
    //初始化插件
   $('#chart-container').orgchart({
        'data' :jsonObj,//引用数据源
       'ajaxURL': ajaxURLs,
       'depth':2,
       'nodeId': 'id',
        //'exportButton': true,//显示下载结构按钮
        //'exportFilename': 'MyOrgChart',//下载文件名称
        'createNode': function($node, data) {
            var secondMenuIcon = $('<i>', {
                'class': 'fa fa-info-circle second-menu-icon',
                click: function() {
                    $(this).siblings('.second-menu').toggle();
                }
            });
            //点击结构树详情显示该党部门下的所有人员
            var secondMenu =  getPersonList(data.id);
            $node.append(secondMenuIcon).append(secondMenu);
        }
    });

})

/*
* 获取人员列表
*
*/

function getPersonList(id){
    var personListValue='<div class="second-menu">';
    var jsonParam = {obj: 'clientBiz', method: 'getPersonList', count:1, param1: id};
    $.fn.feajax(jsonParam, false, 'json', function (data) {
        //添加人员列表table
        personListValue=personListValue+'<table   class="altrowstable">';
        $.each( data, function(index, content)
        {
            var personDivId=content.userid;
            personListValue = personListValue+'<tr><td id="'+personDivId+'">' + content.username  + '</td></tr>';
            //alert( "index " + index + ",and " + content.userid + " is learning " + content.username );
        });
        personListValue=personListValue+'</table>';//人员列表table结束
        //添加人员详情信息table
        $.each( data, function(index, content) {
            var personDivId="prdetdiv"+content.userid;
            personListValue = personListValue+'<div id="'+personDivId+'" class="box2"><table class="altrowstable2" >'
            personListValue = personListValue+'<tr><td>岗位名称：' + content.userpost  + '</td></tr><tr><td>性别：' + content.usersex  + '</td></tr><tr><td>办公电话：'+ content.usertel  + '</td></tr><tr><td>移动电话：'+ content.userphone  + '</td></tr>';
            personListValue=personListValue+'</table></div>';
        });

    })
    personListValue=personListValue+'</div>';
    return personListValue;
}

4.页面效果图

版权声明：本文为博主原创文章，未经博主允许不得转载