CN104407868A - 一种组织机构图的实现方法及装置 - Google Patents

Abstract

本发明公开了一种组织机构图的实现方法及装置，从数据库中获取组织机构数据；将所述组织机构数据封装为JSON字符串；解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。这样，可以得到对组织机构数据进行水平展示的组织机构图，实现符合国人操作习惯的通过组织机构图对组织机构的管理、展示和维护。

Description

一种组织机构图的实现方法及装置

技术领域

本申请涉及前台UI技术领域，特别是涉及一种组织机构图的实现方法及装置。

背景技术

组织机构是指为了实现共同的目标、任务或利益，把人力、物力和智力等按一定的形式和结构有秩序有成效地组合起来而开展活动的社会单位。

组织机构图是组织机构的直观反映，是最常见的表现雇员、职称和群体关系的一种图表，它形象地反映了组织内各机构、岗位上下左右相互之间的关系。对于一般政府机关和企事业单位，组织机构图是从上至下通过组织单元、图标列表形式展现的机构图，以图形形式直观的表现了组织单元之间的相互关联，并可通过组织机构图直接查看组织单元的详细信息，还可以查看与组织架构关联的职位、人员信息。

但是，目前的前台UI(User Interface，用户界面)比如EXT还是DOJO等对于组织机构的反映，通常都是利用提供的基于tree(树)的widget，实现对组织机构的树模型管理、展示和维护，而没有组织机构图或者水平展开的tree(树)这种符合国人操作习惯的对组织机构的展示方式，使得对于组织机构图的开发并不方便。

发明内容

有鉴于此，本申请提供一种组织机构图的实现方法及装置，以实现符合国人操作习惯的通过组织机构图对组织机构的管理、展示和维护。

为了实现上述目的，本申请实施例提供的技术方案如下：

一种组织机构图的实现方法，包括：

从数据库中获取组织机构数据；

将所述组织机构数据封装为JSON字符串；

解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

优选地，所述通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，包括：

获取所述JSON字符串中的组织机构数据的无序列表标签；

解析所述无序列表标签的style属性；

根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

优选地，所述通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，包括：

通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；

通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；

接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。

一种组织机构图的实现装置，包括：

获取模块，用于从数据库中获取组织机构数据；

封装模块，用于将所述组织机构数据封装为JSON字符串；

控制模块，用于解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

优选地，所述控制模块，包括：

获取单元，用于获取所述JSON字符串中的组织机构数据的无序列表标签；

解析单元，用于解析所述无序列表标签的style属性；

配置单元，用于根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

优选地，所述控制模块，还包括：

控制单元，用于通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；

添加单元，用于通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；

维护单元，用于接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。

由以上本申请提供的技术方案，从数据库中获取组织机构数据；将所述组织机构数据封装为JSON字符串；解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。这样，可以得到对组织机构数据进行水平展示的组织机构图，实现符合国人操作习惯的通过组织机构图对组织机构的管理、展示和维护。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请提供的一种组织机构图的实现方法的流程示意图；

图2为本申请提供的一种组织机构图的实现装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

下面结合附图，对本申请的实施方案进行详细描述。

实施例一：

图1为本申请提供的一种组织机构图的实现方法的流程示意图。

请参照图1所示，本申请实施例提供的组织机构图的实现方法，包括：

步骤S100：从数据库中获取组织机构数据；

步骤S200：将所述组织机构数据封装为JSON字符串；

步骤S300：解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

在本申请实施例中，所述步骤S300中的通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式的方法，包括：获取所述JSON字符串中的组织机构数据的无序列表标签；解析所述无序列表标签的style属性；根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

组织机构数据的无序列表标签本身是含有结构信息的，本申请要做的是用CSS来改变列表标签的布局(通过标签的style属性，设置字体大小，标签背景颜色，字体横向还是竖向等等)；另外，本申请分别在div和a元素上使用2张不同的背景图片(包括一整条连接线和一半连接线)来创建节点间连接线，通过配置坐标位置用一半连接线的图片掩盖连接线的多余部分。

在本申请实施例中，所述步骤S300中的通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容的方法，包括：通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。

本方案通过手工增加、删除和修改操作，实时展示组织机构图。从数据库中取得组织机构数据，组装成json字符串，返回到前台，形如：[{"ID":"root","NAME":"公司总部","NUM":0}]。前台分析字符串，通过css控制显示样式(如：{width:98％；margin-top:8px；float:left；font-size:11pt；font-weight:bold；text-align:center；line-height:20px；}和{padding:20px；float:left；font-size:10pt；font-weight:bold；text-align:center；word-wrap:break-word；})，通过JavaScript中的OrgUnitTree.prototype.add＝function(id,pid,dsc,w,h,c,bc,target,meta){}等方法控制是否显示和显示内容，

本方案还可以动态维护组织机构图，通过点击组织机构图中预设的维护按钮，即可通过JavaScript控制显示此机构下的所有机构(包括未填写的)。点击新增，修改和删除图标就可以维护组织机构图。其中按钮的图标通过js文件中的属性设置添加，如：expandedImage:'appjsps/sup/xtjd/jdwyh/ECOTree/img/less.gif'。

由以上本申请提供的技术方案，从数据库中获取组织机构数据；将所述组织机构数据封装为JSON字符串；解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。这样，可以得到对组织机构数据进行水平展示的组织机构图，实现符合国人操作习惯的通过组织机构图对组织机构的管理、展示和维护。

实施例二：

图2为本申请提供的一种组织机构图的实现装置的结构示意图。

请参照图2所示，本申请实施例提供的一种组织机构图的实现装置，包括：

获取模块1，用于从数据库中获取组织机构数据；

封装模块2，用于将所述组织机构数据封装为JSON字符串；

控制模块3，用于解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

在本申请实施例中，所述控制模块3，包括：获取单元，用于获取所述JSON字符串中的组织机构数据的无序列表标签；解析单元，用于解析所述无序列表标签的style属性；配置单元，用于根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

同时，所述控制模块3，还可以包括：控制单元，用于通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；添加单元，用于通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；维护单元，用于接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。

本申请实施例中的组织机构图的实现装置，应用的是上述实施例中的组织机构图的实现方法，与上述实施例中的原理类似，此处不再赘述。

由以上本申请提供的技术方案，从数据库中获取组织机构数据；将所述组织机构数据封装为JSON字符串；解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。这样，可以得到对组织机构数据进行水平展示的组织机构图，实现符合国人操作习惯的通过组织机构图对组织机构的管理、展示和维护。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本发明所提供的方案进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (6)

1.一种组织机构图的实现方法，其特征在于，包括：

从数据库中获取组织机构数据；

将所述组织机构数据封装为JSON字符串；

解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

2.根据权利要求1所述的实现方法，其特征在于，所述通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，包括：

获取所述JSON字符串中的组织机构数据的无序列表标签；

解析所述无序列表标签的style属性；

根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

3.根据权利要求1所述的实现方法，其特征在于，所述通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，包括：

通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；

通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；

接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。

4.一种组织机构图的实现装置，其特征在于，包括：

获取模块，用于从数据库中获取组织机构数据；

封装模块，用于将所述组织机构数据封装为JSON字符串；

控制模块，用于解析所述JSON字符串，通过级联样式表CSS控制所述JSON字符串中的组织机构数据的显示样式，并通过JavaScript控制所述JSON字符串中的组织机构数据的显示内容，水平展示所述JSON字符串中的组织机构数据以得到所述JSON字符串中的组织机构数据的组织机构图。

5.根据权利要求4所述的实现装置，其特征在于，所述控制模块，包括：

获取单元，用于获取所述JSON字符串中的组织机构数据的无序列表标签；

解析单元，用于解析所述无序列表标签的style属性；

配置单元，用于根据所述无序列表标签的style属性，在所述级联样式表CSS的div元素上使用包括一整条连接线的背景图片，在所述级联样式表CSS的a元素上使用包括一半连接线的背景图片，并配置坐标位置，以所述包括一半连接线的背景图片掩盖所述包括一整条连接线的背景图片的多余部分。

6.根据权利要求4所述的实现装置，其特征在于，所述控制模块，还包括：

控制单元，用于通过JavaScript控制显示所述JSON字符串中的组织机构数据的所有内容；

添加单元，用于通过JavaScript中的属性设置为所述JSON字符串中的组织机构数据添加新增，修改和删除图标；

维护单元，用于接收对所述新增，修改和删除图标的点击操作，根据所述点击操作对所述JSON字符串中的组织机构数据的显示内容进行对应的控制，维护所述组织机构图。