船舶設備標準目錄Web異步樹的實現

周 欣，陳 亮，陳 穎，楊東升

● （1.海裝上海局，上海 200083；2.海軍駐上海江南造船（集團）有限責任公司軍代表室，上海 201913；3.駐上海滬東中華造船（集團）有限公司軍代表室，上海 200083）

船舶設備標準目錄Web異步樹的實現

周 欣1，陳 亮2，陳 穎1，楊東升3

● （1.海裝上海局，上海 200083；2.海軍駐上海江南造船（集團）有限責任公司軍代表室，上海 201913；3.駐上海滬東中華造船（集團）有限公司軍代表室，上海 200083）

為實現船舶設備規范化管理，解決Web化的船舶機務管理系統中船舶設備樹形目錄加載頻繁刷新頁面的弊端，利用EasyUI框架，結合船舶維修保養體系代碼，生成了異步的船舶設備標準目錄。利用 window.setInterval(function,time)方法實現了異步樹中節點的查找和定位展開，提高了系統使用中設備的定位和設備信息查詢的效率。

CWBT；船舶設備目錄；異步樹

0 引言

標準的船舶設備目錄是船舶機務管理系統的重要組成部分，也是船舶設備規范管理的基礎。由于船舶機務管理系統的網絡化，為減少初始化數據的加載量和加載時間，創建基于Web的異步船舶設備標準目錄顯得極其重要。

傳統的樹形結構的動態加載會隨著頁面數據操作而不斷刷新整體頁面，不但影響用戶Web瀏覽體驗，完整的頁面傳輸也會加重網絡負荷和服務器的工作量，對資源造成浪費[1]。基于 Ajax技術的樹型結構采用異步交互方式，可以有效地解決上述問題。EasyUI是一套基于Jquery框架上開發的Ajax開發框架，它提供了大量豐富實用的頁面組件[2]，其中tree組件可以輕松的實現Web頁面上樹的增刪改拖功能，并可以通過Ajax技術把用戶的頁面操作、數據提交、服務器處理結果異步化，提高用戶與程序交互的簡便性。

為便于非專業人員對機務管理系統中設備信息的查詢，異步的船舶設備標準目錄中節點的查找和定位展開的實現是關鍵。而目前大多創建的Web異步樹未實現此功能。

1 船舶設備代碼編制

為規范船舶設備的標準化管理，需要對船舶設備進行統一的代碼規定，從而建立通用的船舶設備目錄。船舶維修保養體系（CWBT）[3]是將傳統的船舶維修管理和國內外的船舶設備計算機管理信息系統的管理模式、流程相結合，形成集計劃、管理、執行、監督、指導于一體的一種新穎、科學、實用的現代船舶維修保養管理模式。考慮到船舶種類、功能不同，設備分類與設備代碼應滿足現有各類運輸船、工程船、艦船與海上設備等所需，CWBT采用四組代碼對船舶設備代碼進行編制。CWBT設備代碼結構表示如圖1所示。

圖1 CWBT設備代碼結構圖

其中在CWBT中船舶設備類別按泛指功能分為30個主系統，用二位英文字母表示；維修設備（部件）代碼有三位數字表示。

2 異步樹的設計與實現

船舶設備標準目錄實際上一種樹形結構，樹形結構是軟件開發常用的一種數據設計結構，在桌面應用程序中，它的實現已很成熟，而在Web中要實現可操作性的樹目錄需要考慮的技術要復雜很多。以下介紹如何利用EasyUI框架實現一個可以動態操作的船舶設備標準目錄Web異步樹。

2.1 EasyUI樹的數據模式

EasyUI的tree組件實現的樹狀菜單中每個節點可以包含如表1中屬性：

表1 節點屬性

EasyUI的tree組件可以以JSON為數據源，JSON[4]是一種輕量級的數據交換格式，非常適合于服務器與JavaScript的交互。JSON的數據格式非常簡單即名稱/值對，名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值。JSON對象是一個無序的“名稱/值對”集合，包含在花括號“{}”中；JSON數組是值的有序集合，包含在方括號“[]”中，值之間使用“，”（逗號）分隔。下面是tree組件的JSON數據模式的一個實例：

2.2 數據庫設計

樹形菜單的數據加載方式有兩種：同步加載、異步加載。同步加載即在樹形菜單初始化時根據數據存儲在數據庫的表結構，利用遞歸方法，一次性全部加載所有節點數據；異步加載是指在初始化時值加載根節點數據，當展開某節點的時候才去加載該節點下的子節點。對比可知異步樹的加載過程遞歸出現次數較少。在各種基于關系數據庫的應用系統開發中，往往需要存儲樹形結構[5]的數據。目前主要的方法有鄰接列表模型、改進的前序遍歷樹模型等[6]。由于文中創建的標準的船舶設備目錄，無需進行節點的增刪改操作，故使用鄰接列表模型。

根據EasyUI的tree控件的數據模式可知，要確定存儲異步樹數據結構的數據表至少應有 id（節點 id）、text（節點文本信息）、pid（節點的父節點id）這三個字段。根據鄰接列表模型建立表 CWBTCatalog，表 2為CWBTCatalog數據表的邏輯結構設計。

表2 CWBTCatalog數據表的邏輯結構

2.3 異步樹的實現

在異步樹的實現中，服務器端是采用Struts2[7]框架。異步樹實現的關鍵在于需要Web給tree組件提供JSON數據。具體流程為：根據樹節點的id獲取所有的子節點并存放在 ArrayList實例中，將 ArrayList實例轉化為JSONArray實例，將JSONArray實例轉化為字符串String。關鍵代碼如下所示：

JsonArray =

JSONArray.fromObject(treeNodeArray);//JsonArray為

JSONArray的一個實例，treeNodeArray為ArrayList實例，里面存放著樹節點

JsonArray.toString();//將JsonArray轉化為字符串

EasyUI的tree組件加載異步目錄樹的實現代碼：

$('#equipTree').tree({ //加載tree對象

url:"../ServerJsp/treeServer.jsp",//初始化時，提供JSON數據模型的地址

onBeforeExpand:function(node){//展開節點前，tree對象根據所展開節點的id號加載子節點數據

$('#equipTree').tree('options').url="../ServerJsp/treeServer.jsp?id="+node.id;

})

服務器端代碼：

JSONTree jsonTree = new JSONTree();

String pid="";

if(request.getParameter("id")!=null){

pid = request.getParameter("id");//根據tree對象的加載請求獲取節點id值

response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonTree.getJSONString(pid));//將JSON數據返回給客戶端

}else{response.getWriter().write(jsonTree.getJSONString("CWBT"));

}

船舶設備標準目錄異步樹實現后的效果如圖2所示。

圖2 船舶設備標準目錄異步樹

3 異步樹節點的定位查找

單純地實現船舶設備標準目錄異步樹的意義不大，因為對于非專業的人員而言，不了解某特定的設備處于設備系統體系的哪個子系統中，這樣在使用船舶機務管理系統時，查找設備的效率低下。異步樹節點的定位查找、展開就顯得很重要。而異步樹是采用異步加載，要實現異步樹節點的定位查找、展開就得逐級加載、展開所查節點的所有父系節點，然后再定位到所查節點。就此問題本文提出以下解決方法，如圖3所示。

圖3 解決方案流程圖

在此過程中難點在于第四步，即如何控制節點的查找、展開是在節點加載后執行的。本文利用window.setInterval(function,time)來實現，整個過程的關鍵代碼如下：

function searchTreeNode(equipTreeNodeId){

$.ajax({

url:"parentIdsInfo.action?nodeId="+equipTreeNodeId,//獲取父系節點id

根據設備節點id或名稱，船舶設備目錄樹定位展開效果如圖4所示。

4 結論

依照船舶維修保養體系（CWBT）代碼編制方法，采用鄰接列表模型建立了存儲船舶設備目錄樹節點信息的數據表，運用EasyUI框架的tree組件實現了船舶設備標準目錄Web異步樹的生成。與傳統的Web異步樹相比，本文創新點在于利用window.setInterval(function,time)方法控制了節點的加載和執行find、expand方法的時間差，實現了節點查找和定位展開，便于非專業人員對船舶設備目錄中設備的查找，進而查看設備的詳細信息，提高了設備信息的獲取效率和學習效率。由于本文中節點數據的加載與節點查找、展開之間的時間差是人為設定的，會因為網速而受影響，如何精確智能判斷節點數據加載是否完畢將是今后研究的重點。

圖4 節點查找、定位展開效果圖

[1]湯曉燕.基于EasyUI框架的Web異步樹實現[J].電腦編程技巧與維護, 2012(12): 92-93.

[2]謝紅龍.EasyUI框架的WEB異步操作樹分析與實現[J].現代商貿工業, 2011(8): 251.

[3]褚前成.船舶機務管理平臺的設計與實現[D].大連:大連海事大學, 2011.

[4]邢四為.基于 JSON的信息交互系統的研究與實現[D].安徽:安徽大學, 2013.

[5]汪建,方洪鷹,陳昌川.一種改進的基于數據庫的樹存儲策略[J].重慶師范大學學報:自然科學版, 2007,24(4): 50-52.

[6]侯爽.基于關系數據庫的文件樹存儲策略研究[J].電腦知識與技術, 2010(6): 8155-8156.

[7]Struts2框架核心配置文件的研究與應用[J].計算機技術與發展, 2013(2): 77-81.

Realization of Web Asynchronous Tree of Marine Equipment Standard Directory

ZHOU Xin1, CHEN Liang2, CHEN Ying, YANG Dong-sheng3
(1.Naval Armaments Department, Shanghai Bureau, Shanghai 200083, China; 2.Naval Representative Office at Jiangnan Shipyard (Group) Co., Ltd.Shanghai 201913, China; 3.Naval Representative Office at Hudong-Zhonghua Shipbuilding (Group) Co., Ltd., Shanghai 200083, China)

In order to realize the standard management of marine equipments and avoid the drawback that when the marine equipment directory tree in the networked marine service management system loads the page will refresh the page frequently, it uses the EasyUI frameset and combines the CWBT code to create asynchronous and standard marine equipment directory tree.The realization of node’s search and positioning in asynchronous tree using window.setInterval(function,time) method improves the efficiency of equipment positioning and the relevant information search.

CWBT; marine equipment directory tree; asynchronous tree

U672.9

A

周欣（1981-），男，本科，研究方向：船舶與海洋工程。