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

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

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

船舶設(shè)備標(biāo)準(zhǔn)目錄Web異步樹的實(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è)備樹形目錄加載頻繁刷新頁面的弊端，利用EasyUI框架，結(jié)合船舶維修保養(yǎng)體系代碼，生成了異步的船舶設(shè)備標(biāo)準(zhǔn)目錄。利用 window.setInterval(function,time)方法實(shí)現(xiàn)了異步樹中節(jié)點(diǎn)的查找和定位展開，提高了系統(tǒng)使用中設(shè)備的定位和設(shè)備信息查詢的效率。

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

為便于非專業(yè)人員對(duì)機(jī)務(wù)管理系統(tǒng)中設(shè)備信息的查詢，異步的船舶設(shè)備標(biāo)準(zhǔn)目錄中節(jié)點(diǎn)的查找和定位展開的實(shí)現(xiàn)是關(guān)鍵。而目前大多創(chuàng)建的Web異步樹未實(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)的船舶維修管理和國內(nèi)外的船舶設(shè)備計(jì)算機(jī)管理信息系統(tǒng)的管理模式、流程相結(jié)合，形成集計(jì)劃、管理、執(zhí)行、監(jiān)督、指導(dǎo)于一體的一種新穎、科學(xué)、實(shí)用的現(xiàn)代船舶維修保養(yǎng)管理模式。考慮到船舶種類、功能不同，設(shè)備分類與設(shè)備代碼應(yīng)滿足現(xiàn)有各類運(yùn)輸船、工程船、艦船與海上設(shè)備等所需，CWBT采用四組代碼對(duì)船舶設(shè)備代碼進(jìn)行編制。CWBT設(shè)備代碼結(jié)構(gòu)表示如圖1所示。

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

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

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

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

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

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

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

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

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

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

根據(jù)EasyUI的tree控件的數(shù)據(jù)模式可知，要確定存儲(chǔ)異步樹數(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í)現(xiàn)

在異步樹的實(shí)現(xiàn)中，服務(wù)器端是采用Struts2[7]框架。異步樹實(shí)現(xiàn)的關(guān)鍵在于需要Web給tree組件提供JSON數(shù)據(jù)。具體流程為：根據(jù)樹節(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í)例，里面存放著樹節(jié)點(diǎn)

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

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

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

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

onBeforeExpand:function(node){//展開節(jié)點(diǎn)前，tree對(duì)象根據(jù)所展開節(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ù)返回給客戶端

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

}

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

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

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

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

圖3 解決方案流程圖

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

function searchTreeNode(equipTreeNodeId){

$.ajax({

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

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

4 結(jié)論

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

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

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

[2]謝紅龍.EasyUI框架的WEB異步操作樹分析與實(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ù)庫的樹存儲(chǔ)策略[J].重慶師范大學(xué)學(xué)報(bào):自然科學(xué)版, 2007,24(4): 50-52.

[6]侯爽.基于關(guān)系數(shù)據(jù)庫的文件樹存儲(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-），男，本科，研究方向：船舶與海洋工程。