jquery 实现组织机构树组织机构树形图

转载

mob64ca1405a060 2024-03-03 22:27:05

文章标签 jquery 实现组织机构树数据库 json 前端 ViewUI 文章分类 jQuery 前端开发

需求说明

前端树形组织机构图示意图

jquery 实现组织机构树组织机构树形图_ViewUI

需求说明

前端要求画一个树形组织机构图，具体要求：

前端向后端传递参数为【登录用户所在组织机构id】，要求后端返回json数据，前端解析数据画出树形组织机构图。

表设计--核心字段

建表sql

SET FOREIGN_KEY_CHECKS=0;


-- ----------------------------

-- Table structure for sys_organization

-- ----------------------------

DROP TABLE IF EXISTS `sys_organization`;

CREATE TABLE `sys_organization` (

  `org_id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '组织机构Id',

  `org_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT '组织机构名称',

  `parent_id` int(11) unsigned NOT NULL COMMENT '父节点为空的是根机构',

  PRIMARY KEY (`org_id`),

  UNIQUE KEY `idx_oname` (`org_name`) USING BTREE

) ENGINE=InnoDB AUTO_INCREMENT=87 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


-- ----------------------------

-- Records of sys_organization

-- ----------------------------

INSERT INTO `sys_organization` VALUES ('1', '顺心工程总公司', '0');

INSERT INTO `sys_organization` VALUES ('3', '北京分公司', '1');

INSERT INTO `sys_organization` VALUES ('12', '北京分公司-车队', '3');

INSERT INTO `sys_organization` VALUES ('13', '北京分公司-生产运行科', '3');

INSERT INTO `sys_organization` VALUES ('14', '北京分公司-计划经营科', '3');

INSERT INTO `sys_organization` VALUES ('15', '北京分公司-物资管理部', '3');

INSERT INTO `sys_organization` VALUES ('16', '北京分公司-财务科', '3');

INSERT INTO `sys_organization` VALUES ('17', '北京分公司-综合研究所', '3');

INSERT INTO `sys_organization` VALUES ('18', '北京分公司-审计纪检科', '3');

INSERT INTO `sys_organization` VALUES ('19', '北京分公司-综合办公室', '3');

INSERT INTO `sys_organization` VALUES ('20', '北京分公司-工程技术科', '3');

INSERT INTO `sys_organization` VALUES ('21', '北京分公司-工程建设科', '3');

INSERT INTO `sys_organization` VALUES ('22', '北京分公司-安全环保科', '3');

INSERT INTO `sys_organization` VALUES ('23', '北京分公司-公共关系科', '3');

INSERT INTO `sys_organization` VALUES ('25', '大连分公司', '1');

INSERT INTO `sys_organization` VALUES ('26', '大连分公司-生产运行部', '25');

INSERT INTO `sys_organization` VALUES ('27', '大连分公司-综合管理部', '25');

INSERT INTO `sys_organization` VALUES ('28', '大连分公司-安全环保部', '25');

INSERT INTO `sys_organization` VALUES ('29', '大连分公司-计划财务部', '25');

INSERT INTO `sys_organization` VALUES ('30', '大连分公司-设备物资部', '25');

INSERT INTO `sys_organization` VALUES ('31', '大连分公司-公共关系部', '25');

INSERT INTO `sys_organization` VALUES ('37', '大连分公司-维修队', '25');

INSERT INTO `sys_organization` VALUES ('38', '大连分公司-运维队', '25');

INSERT INTO `sys_organization` VALUES ('39', '深圳分公司', '1');

INSERT INTO `sys_organization` VALUES ('40', '深圳分公司-安全环保科', '39');

INSERT INTO `sys_organization` VALUES ('41', '深圳分公司-生产运行科', '39');

INSERT INTO `sys_organization` VALUES ('42', '深圳分公司-综合办公室', '39');

INSERT INTO `sys_organization` VALUES ('43', '深圳分公司-党群工作科', '39');

INSERT INTO `sys_organization` VALUES ('44', '深圳分公司-审计纪检科', '39');

INSERT INTO `sys_organization` VALUES ('45', '深圳分公司-计划财务科', '39');

INSERT INTO `sys_organization` VALUES ('46', '深圳分公司-财务科', '39');

INSERT INTO `sys_organization` VALUES ('47', '深圳分公司-物资管理部', '39');

INSERT INTO `sys_organization` VALUES ('48', '深圳分公司-工程技术科', '39');

INSERT INTO `sys_organization` VALUES ('49', '深圳分公司-工程建设科', '39');

INSERT INTO `sys_organization` VALUES ('50', '深圳分公司-综合研究所', '39');

INSERT INTO `sys_organization` VALUES ('51', '深圳分公司-排采研究所', '39');

INSERT INTO `sys_organization` VALUES ('52', '深圳分公司-公共关系科', '39');

INSERT INTO `sys_organization` VALUES ('55', '深圳分公司-安全生产科', '39');

INSERT INTO `sys_organization` VALUES ('56', '深圳分公司-车队', '39');

INSERT INTO `sys_organization` VALUES ('57', '洛阳分公司', '1');

INSERT INTO `sys_organization` VALUES ('58', '洛阳分公司-综合办公室', '57');

INSERT INTO `sys_organization` VALUES ('59', '洛阳分公司-计划经营科', '57');

INSERT INTO `sys_organization` VALUES ('60', '洛阳分公司-财务科', '57');

INSERT INTO `sys_organization` VALUES ('61', '洛阳分公司-生产运行科', '57');

INSERT INTO `sys_organization` VALUES ('62', '洛阳分公司-工程技术科', '57');

INSERT INTO `sys_organization` VALUES ('64', '洛阳分公司-安全环保科', '57');

INSERT INTO `sys_organization` VALUES ('65', '洛阳分公司-工程建设科', '57');

INSERT INTO `sys_organization` VALUES ('66', '洛阳分公司-公共关系科', '57');

INSERT INTO `sys_organization` VALUES ('67', '洛阳分公司-党群工作科', '57');

INSERT INTO `sys_organization` VALUES ('68', '洛阳分公司-审计纪检科', '57');

INSERT INTO `sys_organization` VALUES ('69', '洛阳分公司-地质研究所', '57');

INSERT INTO `sys_organization` VALUES ('70', '洛阳分公司-排采研究所', '57');

INSERT INTO `sys_organization` VALUES ('71', '洛阳分公司-物资管理部', '57');

INSERT INTO `sys_organization` VALUES ('74', '洛阳分公司-HSE监督中心', '57');

INSERT INTO `sys_organization` VALUES ('75', '洛阳分公司-工程监督中心', '57');

INSERT INTO `sys_organization` VALUES ('76', '洛阳分公司-行政事务中心', '57');

INSERT INTO `sys_organization` VALUES ('77', '洛阳分公司-石楼北项目部', '57');

INSERT INTO `sys_organization` VALUES ('78', '拉萨项目经理部', '1');

INSERT INTO `sys_organization` VALUES ('79', '拉萨项目经理部-综合管理部', '78');

INSERT INTO `sys_organization` VALUES ('80', '拉萨项目经理部-生产运行部', '78');

INSERT INTO `sys_organization` VALUES ('81', '拉萨项目经理部-安全环保部', '78');

INSERT INTO `sys_organization` VALUES ('82', '拉萨项目经理部-公共关系部', '78');

INSERT INTO `sys_organization` VALUES ('83', '拉萨项目经理部-车队', '78');

表效果如下

jquery 实现组织机构树组织机构树形图_jquery 实现组织机构树_02

跟前端树形图对应的对象设计

Json示例

{


  "oid" : 3,


  "oname" : "北京分公司",


  "parentId" : 1,


  "children" : [ {


    "oid" : 12,


    "oname" : "北京分公司-车队",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 13,


    "oname" : "北京分公司-生产运行科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 14,


    "oname" : "北京分公司-计划经营科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 15,


    "oname" : "北京分公司-物资管理部",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 16,


    "oname" : "北京分公司-财务科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 17,


    "oname" : "北京分公司-综合研究所",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 18,


    "oname" : "北京分公司-审计纪检科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 19,


    "oname" : "北京分公司-综合办公室",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 20,


    "oname" : "北京分公司-工程技术科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 21,


    "oname" : "北京分公司-工程建设科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 22,


    "oname" : "北京分公司-安全环保科",


    "parentId" : 3,


    "children" : [ ]


  }, {


    "oid" : 23,


    "oname" : "北京分公司-公共关系科",


    "parentId" : 3,


    "children" : [ ]


  } ]


}

树结构对象设计

import java.util.ArrayList;

import java.util.List;

public class OrgTreeNode {


private Long oid;

private String oname;

private Long parentId;

private List<OrgTreeNode> children = new ArrayList<OrgTreeNode>();

//Getter and Setter

}

实现思路

前端传递组织机构id为rootOrgId，根据rootOrgId从数据库获取该组织机构下辖的所有子孙组织机构List，然后将每个节点的父机构组装进去

组装根节点

递归调用组装根节点下面的子孙节点

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：soa和微服务的差异 soa跟微服务的区别

下一篇：mysql 竖向转横向字符串 mysql横表和竖表优缺点

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jquery 实现组织机构树 组织机构树形图

jquery 实现组织机构树 组织机构树形图

需求说明

前端树形组织机构图示意图

需求说明

表设计--核心字段

建表sql

表效果如下

跟前端树形图对应的对象设计

Json示例

树结构对象设计

实现思路

前端传递组织机构id为rootOrgId，根据rootOrgId从数据库获取该组织机构下辖的所有子孙组织机构List，然后将每个节点的父机构组装进去

组装根节点

51CTO博客

jquery 实现组织机构树组织机构树形图

jquery 实现组织机构树组织机构树形图