一種組織機構圖的實現方法及裝置制造方法
【專利摘要】本發(fā)明公開了一種組織機構圖的實現方法及裝置，從數據庫中獲取組織機構數據；將所述組織機構數據封裝為JSON字符串；解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。這樣，可以得到對組織機構數據進行水平展示的組織機構圖，實現符合國人操作習慣的通過組織機構圖對組織機構的管理、展示和維護。
【專利說明】一種組織機構圖的實現方法及裝置

【技術領域】
[0001]本申請涉及前臺UI【技術領域】，特別是涉及一種組織機構圖的實現方法及裝置。

【背景技術】
[0002]組織機構是指為了實現共同的目標、任務或利益，把人力、物力和智力等按一定的形式和結構有秩序有成效地組合起來而開展活動的社會單位。
[0003]組織機構圖是組織機構的直觀反映，是最常見的表現雇員、職稱和群體關系的一種圖表，它形象地反映了組織內各機構、崗位上下左右相互之間的關系。對于一般政府機關和企事業(yè)單位，組織機構圖是從上至下通過組織單元、圖標列表形式展現的機構圖，以圖形形式直觀的表現了組織單元之間的相互關聯，并可通過組織機構圖直接查看組織單元的詳細信息，還可以查看與組織架構關聯的職位、人員信息。
[0004]但是，目前的前臺UI (User Interface,用戶界面)比如EXT還是DOJO等對于組織機構的反映，通常都是利用提供的基于tree (樹)的widget，實現對組織機構的樹模型管理、展示和維護，而沒有組織機構圖或者水平展開的tree (樹)這種符合國人操作習慣的對組織機構的展示方式，使得對于組織機構圖的開發(fā)并不方便。


【發(fā)明內容】

[0005]有鑒于此，本申請?zhí)峁┮环N組織機構圖的實現方法及裝置，以實現符合國人操作習慣的通過組織機構圖對組織機構的管理、展示和維護。
[0006]為了實現上述目的，本申請實施例提供的技術方案如下:
[0007]一種組織機構圖的實現方法，包括:
[0008]從數據庫中獲取組織機構數據；
[0009]將所述組織機構數據封裝為JSON字符串；
[0010]解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式,并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。
[0011 ] 優(yōu)選地，所述通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，包括:
[0012]獲取所述JSON字符串中的組織機構數據的無序列表標簽；
[0013]解析所述無序列表標簽的style屬性；
[0014]根據所述無序列表標簽的style屬性，在所述級聯樣式表CSS的div元素上使用包括一整條連接線的背景圖片，在所述級聯樣式表CSS的a元素上使用包括一半連接線的背景圖片，并配置坐標位置，以所述包括一半連接線的背景圖片掩蓋所述包括一整條連接線的背景圖片的多余部分。
[0015]優(yōu)選地，所述通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，包括:
[0016]通過JavaScript控制顯示所述JSON字符串中的組織機構數據的所有內容；
[0017]通過JavaScript中的屬性設置為所述JSON字符串中的組織機構數據添加新增，修改和刪除圖標；
[0018]接收對所述新增，修改和刪除圖標的點擊操作，根據所述點擊操作對所述JSON字符串中的組織機構數據的顯示內容進行對應的控制，維護所述組織機構圖。
[0019]一種組織機構圖的實現裝置，包括:
[0020]獲取模塊，用于從數據庫中獲取組織機構數據；
[0021]封裝模塊，用于將所述組織機構數據封裝為JSON字符串；
[0022]控制模塊，用于解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。
[0023]優(yōu)選地，所述控制模塊，包括:
[0024]獲取單元，用于獲取所述JSON字符串中的組織機構數據的無序列表標簽；
[0025]解析單元，用于解析所述無序列表標簽的style屬性；
[0026]配置單元，用于根據所述無序列表標簽的style屬性，在所述級聯樣式表CSS的div元素上使用包括一整條連接線的背景圖片，在所述級聯樣式表CSS的a元素上使用包括一半連接線的背景圖片，并配置坐標位置，以所述包括一半連接線的背景圖片掩蓋所述包括一整條連接線的背景圖片的多余部分。
[0027]優(yōu)選地，所述控制模塊，還包括:
[0028]控制單元，用于通過JavaScript控制顯示所述JSON字符串中的組織機構數據的所有內容；
[0029]添加單元，用于通過JavaScript中的屬性設置為所述JSON字符串中的組織機構數據添加新增，修改和刪除圖標；
[0030]維護單元，用于接收對所述新增，修改和刪除圖標的點擊操作，根據所述點擊操作對所述JSON字符串中的組織機構數據的顯示內容進行對應的控制，維護所述組織機構圖。
[0031]由以上本申請?zhí)峁┑募夹g方案，從數據庫中獲取組織機構數據；將所述組織機構數據封裝為JSON字符串；解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。這樣，可以得到對組織機構數據進行水平展示的組織機構圖，實現符合國人操作習慣的通過組織機構圖對組織機構的管理、展示和維護。

【專利附圖】

【附圖說明】
[0032]為了更清楚地說明本申請實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請中記載的一些實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。
[0033]圖1為本申請?zhí)峁┑囊环N組織機構圖的實現方法的流程示意圖；
[0034]圖2為本申請?zhí)峁┑囊环N組織機構圖的實現裝置的結構示意圖。

【具體實施方式】
[0035]為了使本【技術領域】的人員更好地理解本申請中的技術方案，下面將結合附圖，對本申請的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例?；诒旧暾堉械膶嵤├?，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應當屬于本申請保護的范圍。
[0036]下面結合附圖，對本申請的實施方案進行詳細描述。
[0037]實施例一:
[0038]圖1為本申請?zhí)峁┑囊环N組織機構圖的實現方法的流程示意圖。
[0039]請參照圖1所示，本申請實施例提供的組織機構圖的實現方法，包括:
[0040]步驟SlOO:從數據庫中獲取組織機構數據；
[0041]步驟S200:將所述組織機構數據封裝為JSON字符串；
[0042]步驟S300:解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。
[0043]在本申請實施例中，所述步驟S300中的通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式的方法，包括:獲取所述JSON字符串中的組織機構數據的無序列表標簽；解析所述無序列表標簽的style屬性；根據所述無序列表標簽的style屬性，在所述級聯樣式表CSS的div元素上使用包括一整條連接線的背景圖片，在所述級聯樣式表CSS的a元素上使用包括一半連接線的背景圖片，并配置坐標位置，以所述包括一半連接線的背景圖片掩蓋所述包括一整條連接線的背景圖片的多余部分。
[0044]組織機構數據的無序列表標簽本身是含有結構信息的，本申請要做的是用CSS來改變列表標簽的布局(通過標簽的style屬性，設置字體大小，標簽背景顏色，字體橫向還是豎向等等)；另外，本申請分別在div和a元素上使用2張不同的背景圖片(包括一整條連接線和一半連接線)來創(chuàng)建節(jié)點間連接線，通過配置坐標位置用一半連接線的圖片掩蓋連接線的多余部分。
[0045]在本申請實施例中，所述步驟S300中的通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容的方法，包括:通過JavaScript控制顯示所述JSON字符串中的組織機構數據的所有內容；通過JavaScript中的屬性設置為所述JSON字符串中的組織機構數據添加新增，修改和刪除圖標；接收對所述新增，修改和刪除圖標的點擊操作，根據所述點擊操作對所述JSON字符串中的組織機構數據的顯示內容進行對應的控制，維護所述組織機構圖。
[0046]本方案通過手工增加、刪除和修改操作，實時展示組織機構圖。從數據庫中取得組織機構數據，組裝成j son字符串，返回到前臺，形如:[{〃 ID": "root", "NAME": 〃公司總部〃，"NUM":0}]。前臺分析字符串，通過css控制顯示樣式(如:{width:98 % ；margin-top:8px ；f1at: left ;font_size:1Ipt ;font_weight:bold ;text_align:center ；Iine-height:20px ；}和{padding:20px ；float:left ;font_size:1 Opt ；font-weight:bold ;text_align: center ；word-wrap:break-word ;}),通過 JavaScript 中的 OrgUnitTree.prototype, add = funct1n (id, pid, dsc, w, h, c, be, target, meta) {}等方法控制是否顯示和顯示內容，
[0047]本方案還可以動態(tài)維護組織機構圖，通過點擊組織機構圖中預設的維護按鈕，SP可通過JavaScript控制顯示此機構下的所有機構(包括未填寫的)。點擊新增，修改和刪除圖標就可以維護組織機構圖。其中按鈕的圖標通過js文件中的屬性設置添加，如:expandedlmage:' appjsps/sup/xtjd/jdwyh/ECOTree/img/less.gif'。
[0048]由以上本申請?zhí)峁┑募夹g方案，從數據庫中獲取組織機構數據；將所述組織機構數據封裝為JSON字符串；解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。這樣，可以得到對組織機構數據進行水平展示的組織機構圖，實現符合國人操作習慣的通過組織機構圖對組織機構的管理、展示和維護。
[0049]實施例二:
[0050]圖2為本申請?zhí)峁┑囊环N組織機構圖的實現裝置的結構示意圖。
[0051]請參照圖2所示，本申請實施例提供的一種組織機構圖的實現裝置，包括:
[0052]獲取模塊I，用于從數據庫中獲取組織機構數據；
[0053]封裝模塊2，用于將所述組織機構數據封裝為JSON字符串；
[0054]控制模塊3，用于解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。
[0055]在本申請實施例中，所述控制模塊3，包括:獲取單元，用于獲取所述JSON字符串中的組織機構數據的無序列表標簽；解析單元，用于解析所述無序列表標簽的style屬性；配置單元，用于根據所述無序列表標簽的style屬性，在所述級聯樣式表CSS的div元素上使用包括一整條連接線的背景圖片，在所述級聯樣式表CSS的a元素上使用包括一半連接線的背景圖片，并配置坐標位置，以所述包括一半連接線的背景圖片掩蓋所述包括一整條連接線的背景圖片的多余部分。
[0056]同時，所述控制模塊3，還可以包括:控制單元，用于通過JavaScript控制顯示所述JSON字符串中的組織機構數據的所有內容；添加單元，用于通過JavaScript中的屬性設置為所述JSON字符串中的組織機構數據添加新增，修改和刪除圖標；維護單元，用于接收對所述新增，修改和刪除圖標的點擊操作，根據所述點擊操作對所述JSON字符串中的組織機構數據的顯示內容進行對應的控制，維護所述組織機構圖。
[0057]本申請實施例中的組織機構圖的實現裝置，應用的是上述實施例中的組織機構圖的實現方法，與上述實施例中的原理類似，此處不再贅述。
[0058]由以上本申請?zhí)峁┑募夹g方案，從數據庫中獲取組織機構數據；將所述組織機構數據封裝為JSON字符串；解析所述JSON字符串，通過級聯樣式表CSS控制所述JSON字符串中的組織機構數據的顯示樣式，并通過JavaScript控制所述JSON字符串中的組織機構數據的顯示內容，水平展示所述JSON字符串中的組織機構數據以得到所述JSON字符串中的組織機構數據的組織機構圖。這樣，可以得到對組織機構數據進行水平展示的組織機構圖，實現符合國人操作習慣的通過組織機構圖對組織機構的管理、展示和維護。
[0059]需要說明的是，本說明書中的各個實施例均采用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似的部分互相參見即可。對于裝置類實施例而言，由于其與方法實施例基本相似，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。
[0060]最后，還需要說明的是，在本文中，諸如第一和第二等之類的關系術語僅僅用來將一個實體或者操作與另一個實體或操作區(qū)分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關系或者順序。而且，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程、方法、物品或者設備中還存在另外的相同要素。
[0061]以上對本發(fā)明所提供的方案進行了詳細介紹，本文中應用了具體個例對本發(fā)明的原理及實施方式進行了闡述，以上實施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想；同時，對于本領域的一般技術人員，依據本發(fā)明的思想，在【具體實施方式】及應用范圍上均會有改變之處，綜上所述，本說明書內容不應理解為對本發(fā)明的限制。
【權利要求】
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字符串中的組織機構數據的顯示內容進行對應的控制，維護所述組織機構圖。
【文檔編號】G06F9/44GK104407868SQ201410707934
【公開日】2015年3月11日 申請日期:2014年11月28日 優(yōu)先權日:2014年11月28日
【發(fā)明者】王國娟, 王利軍 申請人:國家電網公司, 北京中電普華信息技術有限公司