PRIMETON TECHNOLOGIES, LTD.
普元信息技术有限责任公司





NUI与Jquery模板插件结合应用的使用经验
技术使用经验










No part of this document may be reproduced, stored in any electronic retrieval system, or transmitted in any form or by any means, mechanical, photocopying, recording, otherwise, without the written permission of the copyright owner.

COPYRIGHT 2014-12-04 by Primeton Technologies, Ltd. ALL RIGHTS RESERVED.
文档修订记录

规范及约定

1. 【规范及约定】的内容仅仅是对本文档编写的规范和约定进行描述，文档编写人员必须严格按照本规范和约定进行编写，在文档正式发布时删除该部分内容；
2. 文档内容采用"首行缩进、小四号字体、1.5倍行距"的格式，选中段落文本使用快捷键【Ctrl+Alt+4】可以进行格式化（直接选中蓝色的说明文字即可）；
3. 必须填写"文档修订控制记录"；
4. 文档目录必须更新为最新的，与实际内容相对应；
5. 模版中每部分内容的下面的蓝色字体是对这块内容的说明，编写文档时选中这段文字，使用【Ctrl+Alt+4】快捷键即可格式化成要求的字体；

目 录

1 文档摘要
1.1 文档分类
1.2 关键字/Tag
1.3 摘要
1.4 作者、协作者及评审人员
1.5 定义、首字母缩写词及缩略语
2 概述
2.1 问题或场景
2.2 目的
2.3 应用范围
2.4 参考资料
2.5 工具和技术
2.6 系统运行环境
3 总体解决方案
3.1 引入Jquery模板插件jquery.tmpl.js
3.2 创建HTML模板
3.3调用模板插件的Tmpl方法注入数据
3.4利用jquery插件模板的的实际效果
3.5总结
4 注意事项
4.1 注意事项1

文档摘要

文档分类

设计开发使用经验 NUI与Jquery模板插件结合应用的使用经验

关键字/Tag

EOS6.5、JQUEY、NUI、Jquery.tmpl.js、模板插件、tips

摘要

本文主要介绍在京能集团-岱海电厂安全管理系统项目背景下，EOS7.2.0.0运行环境，NUI的前台页面构架下进行的业务需求处理。

作者、协作者及评审人员

毛晓东

定义、首字母缩写词及缩略语

概述

问题或场景

在京能集团-岱海电厂安全管理系统开发的过程中，遇到了关于前台ToolTip展示的需求，让列表grid的详细信息能够详细的展示出来。

目的

本文通过扩展增加Jquery模板插件一系列的属性和方法来提高组件的通用性，并且提高用户界面的可操作性。

应用范围

1. 验证EOS7.2与目前开源框架如iBatis、Spring、NUI等集成的应用；
2. 与用户原有实现框架相结合的应用。

参考资料

工具和技术

系统运行环境

EOS： Primeton EOS Server 7.2（1278）
数据库：Oracle11
Jdk：1.6.0
Tomcat：5.5
前台UI：NUI

总体解决方案

引入Jquery模板插件jquery.tmpl.js

1. 下载jquery.tmpl.js开源HTML插件模板源代码文件，并引入项目；

1. 在构件包的"页面资源"下的jsp源码文件引入jquey.tmpl.js，如图所示：

3.2 创建HTML模板

在jsp页面编写jquery.tmp的需要展示的HTML模板：
<script id="formTemplate" type="text/x-jquery-tmpl">
<table class="detailForm" cellspacing="0"
style="width:200px;height:500px;table-layout:fixed;">
<tr>
<td style="width:80px;">奖惩来源：</td>
<td style="width:80px;">${'${'}rewardref}</td>
<td style="width:80px;">被考核人：</td>
<td style="width:80px;">${'${'}checkuserName}</td>
</tr>
<tr>
<td style="width:80px;">部门：</td>
<td style="width:80px;">${'${'}deptName}</td>
<td style="width:100px;">专业\值：</td>
<td style="width:80px;">${'${'}specialtyName} </td>
</tr>
<tr>
<td style="width:80px;">考核日期：</td>
<td style="width:80px;">${'${'}checkdate}</td>
<td style="width:100px;">考核项目：</td>
<td style="width:80px;">${'${'}checkproject}</td>
</tr>
<tr>
<td style="width:80px;">奖惩方式：</td>
<td style="width:80px;">${'${'}rewardway}</td>
</tr>
</table>
</script>

3.3调用模板插件的Tmpl方法注入数据

增加对的rewardsGrid的"cellmousedown"选中的监听事件，在创建的jquery插件模板中注入每行的具体内容，如下代码，插件模板对象调用tmpl方法来填充数据。
rewardsGrid.on("cellmousedown", function (e) {
var record = e.record;
var row = e.row;
var html = $("#formTemplate").tmpl(row)[0];
showTips("center", "center", "success", html.innerHTML, 3000);
});
此时，已经实现了将内容模板展示，满足了客户需求。

3.4利用jquery插件模板的的实际效果

在之前创建的内容之后，实现了模板内容的展示，如图所示：

3.5总结

通过以上的几个步骤，可以实现在NUI前台框架下对tips扩展满足用户需求和提高用户体验。

注意事项

注意事项1

1. 使用EOS7.2，需要jdk1.5.0以上版本；
2. 使用NUI前台框架；
3. 此种实现方式不是文档所提供的方法，是扩展实现的。