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

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

船舶設(shè)備標(biāo)準(zhǔn)目錄Web異步樹(shù)的實(shí)現(xiàn)

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

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

為實(shí)現(xiàn)船舶設(shè)備規(guī)范化管理，解決Web化的船舶機(jī)務(wù)管理系統(tǒng)中船舶設(shè)備樹(shù)形目錄加載頻繁刷新頁(yè)面的弊端，利用EasyUI框架，結(jié)合船舶維修保養(yǎng)體系代碼，生成了異步的船舶設(shè)備標(biāo)準(zhǔn)目錄。利用 window.setInterval(function,time)方法實(shí)現(xiàn)了異步樹(shù)中節(jié)點(diǎn)的查找和定位展開(kāi)，提高了系統(tǒng)使用中設(shè)備的定位和設(shè)備信息查詢(xún)的效率。

CWBT；船舶設(shè)備目錄；異步樹(shù)

0 引言

標(biāo)準(zhǔn)的船舶設(shè)備目錄是船舶機(jī)務(wù)管理系統(tǒng)的重要組成部分，也是船舶設(shè)備規(guī)范管理的基礎(chǔ)。由于船舶機(jī)務(wù)管理系統(tǒng)的網(wǎng)絡(luò)化，為減少初始化數(shù)據(jù)的加載量和加載時(shí)間，創(chuàng)建基于Web的異步船舶設(shè)備標(biāo)準(zhǔn)目錄顯得極其重要。

傳統(tǒng)的樹(shù)形結(jié)構(gòu)的動(dòng)態(tài)加載會(huì)隨著頁(yè)面數(shù)據(jù)操作而不斷刷新整體頁(yè)面，不但影響用戶(hù)Web瀏覽體驗(yàn)，完整的頁(yè)面?zhèn)鬏斠矔?huì)加重網(wǎng)絡(luò)負(fù)荷和服務(wù)器的工作量，對(duì)資源造成浪費(fèi)[1]?；?Ajax技術(shù)的樹(shù)型結(jié)構(gòu)采用異步交互方式，可以有效地解決上述問(wèn)題。EasyUI是一套基于Jquery框架上開(kāi)發(fā)的Ajax開(kāi)發(fā)框架，它提供了大量豐富實(shí)用的頁(yè)面組件[2]，其中tree組件可以輕松的實(shí)現(xiàn)Web頁(yè)面上樹(shù)的增刪改拖功能，并可以通過(guò)Ajax技術(shù)把用戶(hù)的頁(yè)面操作、數(shù)據(jù)提交、服務(wù)器處理結(jié)果異步化，提高用戶(hù)與程序交互的簡(jiǎn)便性。

為便于非專(zhuān)業(yè)人員對(duì)機(jī)務(wù)管理系統(tǒng)中設(shè)備信息的查詢(xún)，異步的船舶設(shè)備標(biāo)準(zhǔn)目錄中節(jié)點(diǎn)的查找和定位展開(kāi)的實(shí)現(xiàn)是關(guān)鍵。而目前大多創(chuàng)建的Web異步樹(shù)未實(shí)現(xiàn)此功能。

1 船舶設(shè)備代碼編制

為規(guī)范船舶設(shè)備的標(biāo)準(zhǔn)化管理，需要對(duì)船舶設(shè)備進(jìn)行統(tǒng)一的代碼規(guī)定，從而建立通用的船舶設(shè)備目錄。船舶維修保養(yǎng)體系（CWBT）[3]是將傳統(tǒng)的船舶維修管理和國(guó)內(nèi)外的船舶設(shè)備計(jì)算機(jī)管理信息系統(tǒng)的管理模式、流程相結(jié)合，形成集計(jì)劃、管理、執(zhí)行、監(jiān)督、指導(dǎo)于一體的一種新穎、科學(xué)、實(shí)用的現(xiàn)代船舶維修保養(yǎng)管理模式?？紤]到船舶種類(lèi)、功能不同，設(shè)備分類(lèi)與設(shè)備代碼應(yīng)滿(mǎn)足現(xiàn)有各類(lèi)運(yùn)輸船、工程船、艦船與海上設(shè)備等所需，CWBT采用四組代碼對(duì)船舶設(shè)備代碼進(jìn)行編制。CWBT設(shè)備代碼結(jié)構(gòu)表示如圖1所示。

圖1 CWBT設(shè)備代碼結(jié)構(gòu)圖

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

2 異步樹(shù)的設(shè)計(jì)與實(shí)現(xiàn)

船舶設(shè)備標(biāo)準(zhǔn)目錄實(shí)際上一種樹(shù)形結(jié)構(gòu)，樹(shù)形結(jié)構(gòu)是軟件開(kāi)發(fā)常用的一種數(shù)據(jù)設(shè)計(jì)結(jié)構(gòu)，在桌面應(yīng)用程序中，它的實(shí)現(xiàn)已很成熟，而在Web中要實(shí)現(xiàn)可操作性的樹(shù)目錄需要考慮的技術(shù)要復(fù)雜很多。以下介紹如何利用EasyUI框架實(shí)現(xiàn)一個(gè)可以動(dòng)態(tài)操作的船舶設(shè)備標(biāo)準(zhǔn)目錄Web異步樹(shù)。

2.1 EasyUI樹(shù)的數(shù)據(jù)模式

EasyUI的tree組件實(shí)現(xiàn)的樹(shù)狀菜單中每個(gè)節(jié)點(diǎn)可以包含如表1中屬性：

表1 節(jié)點(diǎn)屬性

EasyUI的tree組件可以以JSON為數(shù)據(jù)源，JSON[4]是一種輕量級(jí)的數(shù)據(jù)交換格式，非常適合于服務(wù)器與JavaScript的交互。JSON的數(shù)據(jù)格式非常簡(jiǎn)單即名稱(chēng)/值對(duì)，名稱(chēng)/值對(duì)包括字段名稱(chēng)（在雙引號(hào)中），后面寫(xiě)一個(gè)冒號(hào)，然后是值。JSON對(duì)象是一個(gè)無(wú)序的“名稱(chēng)/值對(duì)”集合，包含在花括號(hào)“{}”中；JSON數(shù)組是值的有序集合，包含在方括號(hào)“[]”中，值之間使用“，”（逗號(hào)）分隔。下面是tree組件的JSON數(shù)據(jù)模式的一個(gè)實(shí)例：

2.2 數(shù)據(jù)庫(kù)設(shè)計(jì)

樹(shù)形菜單的數(shù)據(jù)加載方式有兩種：同步加載、異步加載。同步加載即在樹(shù)形菜單初始化時(shí)根據(jù)數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)的表結(jié)構(gòu)，利用遞歸方法，一次性全部加載所有節(jié)點(diǎn)數(shù)據(jù)；異步加載是指在初始化時(shí)值加載根節(jié)點(diǎn)數(shù)據(jù)，當(dāng)展開(kāi)某節(jié)點(diǎn)的時(shí)候才去加載該節(jié)點(diǎn)下的子節(jié)點(diǎn)。對(duì)比可知異步樹(shù)的加載過(guò)程遞歸出現(xiàn)次數(shù)較少。在各種基于關(guān)系數(shù)據(jù)庫(kù)的應(yīng)用系統(tǒng)開(kāi)發(fā)中，往往需要存儲(chǔ)樹(shù)形結(jié)構(gòu)[5]的數(shù)據(jù)。目前主要的方法有鄰接列表模型、改進(jìn)的前序遍歷樹(shù)模型等[6]。由于文中創(chuàng)建的標(biāo)準(zhǔn)的船舶設(shè)備目錄，無(wú)需進(jìn)行節(jié)點(diǎn)的增刪改操作，故使用鄰接列表模型。

根據(jù)EasyUI的tree控件的數(shù)據(jù)模式可知，要確定存儲(chǔ)異步樹(shù)數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)表至少應(yīng)有 id（節(jié)點(diǎn) id）、text（節(jié)點(diǎn)文本信息）、pid（節(jié)點(diǎn)的父節(jié)點(diǎn)id）這三個(gè)字段。根據(jù)鄰接列表模型建立表 CWBTCatalog，表 2為CWBTCatalog數(shù)據(jù)表的邏輯結(jié)構(gòu)設(shè)計(jì)。

表2 CWBTCatalog數(shù)據(jù)表的邏輯結(jié)構(gòu)

2.3 異步樹(shù)的實(shí)現(xiàn)

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

JsonArray =

JSONArray.fromObject(treeNodeArray);//JsonArray為

JSONArray的一個(gè)實(shí)例，treeNodeArray為ArrayList實(shí)例，里面存放著樹(shù)節(jié)點(diǎn)

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

EasyUI的tree組件加載異步目錄樹(shù)的實(shí)現(xiàn)代碼：

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

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

onBeforeExpand:function(node){//展開(kāi)節(jié)點(diǎn)前，tree對(duì)象根據(jù)所展開(kāi)節(jié)點(diǎn)的id號(hào)加載子節(jié)點(diǎn)數(shù)據(jù)

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

})

服務(wù)器端代碼：

JSONTree jsonTree = new JSONTree();

String pid="";

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

pid = request.getParameter("id");//根據(jù)tree對(duì)象的加載請(qǐng)求獲取節(jié)點(diǎn)id值

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

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

}

船舶設(shè)備標(biāo)準(zhǔn)目錄異步樹(shù)實(shí)現(xiàn)后的效果如圖2所示。

圖2 船舶設(shè)備標(biāo)準(zhǔn)目錄異步樹(shù)

3 異步樹(shù)節(jié)點(diǎn)的定位查找

單純地實(shí)現(xiàn)船舶設(shè)備標(biāo)準(zhǔn)目錄異步樹(shù)的意義不大，因?yàn)閷?duì)于非專(zhuān)業(yè)的人員而言，不了解某特定的設(shè)備處于設(shè)備系統(tǒng)體系的哪個(gè)子系統(tǒng)中，這樣在使用船舶機(jī)務(wù)管理系統(tǒng)時(shí)，查找設(shè)備的效率低下。異步樹(shù)節(jié)點(diǎn)的定位查找、展開(kāi)就顯得很重要。而異步樹(shù)是采用異步加載，要實(shí)現(xiàn)異步樹(shù)節(jié)點(diǎn)的定位查找、展開(kāi)就得逐級(jí)加載、展開(kāi)所查節(jié)點(diǎn)的所有父系節(jié)點(diǎn)，然后再定位到所查節(jié)點(diǎn)。就此問(wèn)題本文提出以下解決方法，如圖3所示。

圖3 解決方案流程圖

在此過(guò)程中難點(diǎn)在于第四步，即如何控制節(jié)點(diǎn)的查找、展開(kāi)是在節(jié)點(diǎn)加載后執(zhí)行的。本文利用window.setInterval(function,time)來(lái)實(shí)現(xiàn)，整個(gè)過(guò)程的關(guān)鍵代碼如下：

function searchTreeNode(equipTreeNodeId){

$.ajax({

url:"parentIdsInfo.action?nodeId="+equipTreeNodeId,//獲取父系節(jié)點(diǎn)id

根據(jù)設(shè)備節(jié)點(diǎn)id或名稱(chēng)，船舶設(shè)備目錄樹(shù)定位展開(kāi)效果如圖4所示。

4 結(jié)論

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

圖4 節(jié)點(diǎn)查找、定位展開(kāi)效果圖

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

[2]謝紅龍.EasyUI框架的WEB異步操作樹(shù)分析與實(shí)現(xiàn)[J].現(xiàn)代商貿(mào)工業(yè), 2011(8): 251.

[3]褚前成.船舶機(jī)務(wù)管理平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].大連:大連海事大學(xué), 2011.

[4]邢四為.基于 JSON的信息交互系統(tǒng)的研究與實(shí)現(xiàn)[D].安徽:安徽大學(xué), 2013.

[5]汪建,方洪鷹,陳昌川.一種改進(jìn)的基于數(shù)據(jù)庫(kù)的樹(shù)存儲(chǔ)策略[J].重慶師范大學(xué)學(xué)報(bào):自然科學(xué)版, 2007,24(4): 50-52.

[6]侯爽.基于關(guān)系數(shù)據(jù)庫(kù)的文件樹(shù)存儲(chǔ)策略研究[J].電腦知識(shí)與技術(shù), 2010(6): 8155-8156.

[7]Struts2框架核心配置文件的研究與應(yīng)用[J].計(jì)算機(jī)技術(shù)與發(fā)展, 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-），男，本科，研究方向：船舶與海洋工程。