利用模板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. 功能介 ...
随机推荐
- Python-week2,第二周(基于Python3.0以上)
1,列表 存储数据我们可以使用变量,但是当有很多个数据的时候用变量就会出现很多的局限性,所以这时候就用到了列表.列表就是中括号里每个元素使用逗号隔开.列如 [1,2,3] 这就是一个列 ...
- 双色球js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Chartist.js-同时画柱状图和折线图
最近几天都在研究chartist,因为echarts生成的图是位图,导成PDF的时候不够清晰.而chartist是搜到的免费插件中呼声较高的,基于SVG. 今天主要是想举一些代码例子给大家,介绍下如何 ...
- 初识React-Redux之粗暴理解入门
权当暂记 日后再行补充完善,若有阅读者,请翻到下文黄色标题'从这里开始'起阅读. Rudex在我看来最本质做的事情就是将所有的State属性统一存储(一个属性就是一个注册到store的Reducer) ...
- Python把给定的列表转化成二叉树
在LeetCode上做题时,有很多二叉树相关题目的测试数据是用列表给出的,提交的时候有时会出现一些数据通不过,这就需要在本地调试,因此需要使用列表来构建二叉树,方便自己调试.LeetCode上二叉树结 ...
- Struts2-整理笔记(三)结果处理跳转、获得servletAPI原生
在struts2中有很多种跳转方式如下是在struts-default.xml截取的一段源码,常用的跳转有 转发:dispatcher.重定向:redirect.转发到Action:chain.重定向 ...
- 【Java入门提高篇】Day2 接口
上一篇讲完了抽象类,这一篇主要讲解比抽象类更加抽象的内容--接口. 什么是接口呢?先来看个栗子: /** * @author Frank * @create 2017/11/22 * @descrip ...
- Python 日志处理(二) 使用正则表达式处理Nginx 日志
使用正则表达式来处理Nginx 日志 一. 先对单行的日志进行分组正则匹配,返回匹配后的结果(字典格式): from datetime import datetime import re #单行日志 ...
- Cubieboard2安装Fedora20
几天前入手一块Cubieboard2,又买了张16G的TF卡,装个linux折腾折腾.以前都是在虚拟机上用linux,个人比较喜欢Fedora,因为总能用上最新版的软件,像支持C++11的GCC.Cl ...
- Python爬虫知识点四--scrapy框架
一.scrapy结构数据 解释: 1.名词解析: o 引擎(Scrapy Engine)o 调度器(Scheduler)o 下载器(Downloader)o 蜘蛛(Spiders)o 项目管 ...