船舶设备标准目录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-），男，本科，研究方向：船舶与海洋工程。