利用模板template动态渲染jsp页面
一、场景
在js中写html简直是噩梦,刚进新公司,在codereview的时候得知可以通过将html模板写在jsp页面,然后由js调取模板,利用replace()方法替换传值的方式避免在js中拼接html代码,尝试后,成功利用这种方式完成一个模块的增删查改。
二、具体方式
1. 在jsp页面编写模板,以花括号放置待替换的值
注意定义模板type="text/template"
<body>
<form id="MainDataBills" >
<input type="hidden" id="mainId" value="${ceMainDataBillsVO.id}" />
<!-- headLegend模板 -->
<script type="text/template" id="headTemplate">
<fieldset class="fieldset" id="headFieldset">
<legend id="mainLegend" class="mainLegend">数据单号:{databillsNo}</legend>
</script>
<script type="text/template" id="mainTemplate">
<div class="dlg-backbuttons" style="text-align: center">
<a class="easyui-linkbutton" id="submitButton" onclick="summitWholeDataBillsInCheck()"
data-options="iconCls:'icon-redo'">提交</a>
<a class="easyui-linkbutton" id="returnMainButton" onclick="rejectWholeDataBillsInCheck()"
data-options="iconCls:'icon-undo'">整体驳回</a>
</div>
<table class="fieldsetMainTable" id="mainDataBillsTable">
<tr>
<td class="fieldsetMainTableTd">:</td>
<td id="countTdId">{count}</td>
</tr>
<tr>
<td class="fieldsetMainTableTd">:</td>
<td id="ceCorrSumTdId">{ceCorrSum}</td>
</tr>
<tr>
<td class="fieldsetMainTableTd">:</td>
<td>{planeno}</td>
</tr>
<tr>
<td class="fieldsetMainTableTd">:</td>
<td>{rcLevel}</td>
</tr>
<tr style="display:none">
<td id="subCountTdId">{subCount}</td>
<td></td>
</tr>
</table>
</script>
2. 在js文件中根据id获取该模板,转换为html格式,用raplace替换需要动态显示的值
//获取head模板,作为headHtml
var headHtml = $("#headTemplate").html();
headHtml = headHtml.replace(/{databillsNo}/g,databillsNo); //获取main模板,作为mainHtml
var mainHtml = $("#mainTemplate").html();
mainHtml = mainHtml.replace(/{databillsNo}/g,databillsNo);
mainHtml = mainHtml.replace(/{count}/g,count);
mainHtml = mainHtml.replace(/{planeno}/g,planeno);
mainHtml = mainHtml.replace(/{rcLevel}/g,rcLevel);
mainHtml = mainHtml.replace(/{subCount}/g,subCount);
mainHtml = mainHtml.replace(/{ceCorrSum}/g,ceCorrSum);
3. 将替换后的html格式的数据append到jsp页面中,搞定
//全部模板相加
var sumHtml = headHtml + mainHtml + subHtmlSum + endHtml;
$('#MainDataBills').append(sumHtml);
三、注意问题
1. 所用前段框架为easyui, 在替换后的jsp中,需要重新渲染,进行相应组件的显示。
$.parser.parse($("#MainDataBills"));
四、存在不足
1. 该范例用了比较多获取父元素、兄弟元素、子元素的语句,后期修改页面结构容易造成错误。
var currentTab = parent.$("#tabs").tabs('getSelected'), $(e).parent().parent().nextAll().hide(); var iNum = $(e).parent().find('input').eq(0).val();
利用模板template动态渲染jsp页面的更多相关文章
- 自动把动态的jsp页面(或静态html)生成PDF文档,并且上传至服务器
置顶2017年11月06日 14:41:04 阅读数:2311 这几天,任务中有一个难点是把一个打印页面自动给生成PDF文档,并且上传至服务器,然而公司框架只有手动上传文档,打印时可以保存为PDF在本 ...
- 利用JSTL重写查询的jsp页面
利用JSTL重写Java Web MVC实例中的jsp页面 第一步:导入jstl.jar和standard.jar文件
- 基于JS正则实现模板数据动态渲染
最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...
- Java从服务器上获取时间,动态在jsp页面显示
Java获取服务器时间,动态显示到jsp页面,大家都是到Java只能获取一次,到页面的时间是静态的,不过通过js和Java的合作,巧妙地实现此功能 本人是给电视做系统,客户要求页面能显示时间,因为电视 ...
- 动态渲染页面爬取(Python 网络爬虫) ---Selenium的使用
Selenium 的使用 Selenium 是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaS ...
- 动态渲染页面爬取-Selenium & Splash
模拟浏览器的动机 JS动态渲染的页面不止Ajax一种 很多网页的Ajax接口含有加密参数,分析其规律的成本过高 通过对浏览器运行方式的模拟,我们将做到:可见即可爬 Python中常用的模拟浏览器运行的 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- Web项目中用模板Jsp页面引入所有静态样式脚本文件(js,css等)
这样的好处是不需要再每个页面中都添加太多的外链接(不会减少请求数量),但对开发会更快捷,如果更改这些文件的位置或名称,只需要更改模板文件,不需要一个一个页面复制粘贴:同时可以为不同jsp页面组创建不同 ...
- 爬虫动态渲染页面爬取之Splash的介绍和使用
Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我们同样可以实现动态渲染页面的抓取. 1. 功能介 ...
随机推荐
- Windows下mysql5.5主从同步
前置条件: A主机(作为主服务器) 环境:Win7,mysql5.5 IP:172.17.42.82 B主机(作为从服务器) 环境:Win7,mysql5.5 IP:172.17.42.156 主服务 ...
- Debug 运行正常,Release版本不能正常运行总结(转)
引言 如果在您的开发过程中遇到了常见的错误,或许您的Release版本不能正常运行而Debug版本运行无误,那么我推荐您阅读本文:因为并非如您想象的那样,Release版本可以保证您的应用程 ...
- HDU1005 Number Sequence (奇技淫巧模拟)
A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mo ...
- A - Wrestling Match HDU - 5971
Nowadays, at least one wrestling match is held every year in our country. There are a lot of people ...
- eclipse中删除多余的tomcat server
在eclipse菜单中选择Window--Show View--Server--Servers,打开这个服务窗口,将多余的服务删除即可. 如果每次启动中太卡没反应,那就是服务没选择好,或是端口冲突的原 ...
- web前端优化--DOM性能优化
1.DOM访问与修改的优化: DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能. (1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变 ...
- linux DHCP安装和测试
1.Yum 安装DHCP服务 2.拷贝模板配置文件,方便后期的配置修改. cp /usr/share/doc/dhcp-4.1.1/dhcpd.conf.sample /etc/dhcp/dhcpd. ...
- 腾讯Java程序员第二轮面试11个问题,你会几个?
此前,分享了阿里巴巴.网易.百度等多家名企的JAVA面试题. 这也引来了不少程序员网友们的围观. 其中,也有相当一部分网友是已经从事Java开发好多年的程序员,当他们阅读完JAVA面试题的反应是:一个 ...
- 安全框架Shiro入门
Shiro简介 Apache Shiro是Java的一个安全框架,官网为shiro.apache.org,主要场景为控制登陆,判断用户是否有访问某个功能的权限等等. Shiro的核心功能(入门知识,只 ...
- ArrayBuffer and Base64
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...