一、场景

在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页面的更多相关文章

  1. 自动把动态的jsp页面（或静态html）生成PDF文档，并且上传至服务器

    置顶2017年11月06日 14:41:04 阅读数:2311 这几天,任务中有一个难点是把一个打印页面自动给生成PDF文档,并且上传至服务器,然而公司框架只有手动上传文档,打印时可以保存为PDF在本 ...

  2. 利用JSTL重写查询的jsp页面

    利用JSTL重写Java Web MVC实例中的jsp页面 第一步:导入jstl.jar和standard.jar文件

  3. 基于JS正则实现模板数据动态渲染

    最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...

  4. Java从服务器上获取时间，动态在jsp页面显示

    Java获取服务器时间,动态显示到jsp页面,大家都是到Java只能获取一次,到页面的时间是静态的,不过通过js和Java的合作,巧妙地实现此功能 本人是给电视做系统,客户要求页面能显示时间,因为电视 ...

  5. 动态渲染页面爬取（Python 网络爬虫） ---Selenium的使用

    Selenium 的使用 Selenium 是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaS ...

  6. 动态渲染页面爬取-Selenium & Splash

    模拟浏览器的动机 JS动态渲染的页面不止Ajax一种 很多网页的Ajax接口含有加密参数,分析其规律的成本过高 通过对浏览器运行方式的模拟,我们将做到:可见即可爬 Python中常用的模拟浏览器运行的 ...

  7. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  8. Web项目中用模板Jsp页面引入所有静态样式脚本文件（js,css等）

    这样的好处是不需要再每个页面中都添加太多的外链接(不会减少请求数量),但对开发会更快捷,如果更改这些文件的位置或名称,只需要更改模板文件,不需要一个一个页面复制粘贴:同时可以为不同jsp页面组创建不同 ...

  9. 爬虫动态渲染页面爬取之Splash的介绍和使用

    Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我们同样可以实现动态渲染页面的抓取. 1. 功能介 ...

随机推荐

  1. 从架构演进的角度聊聊Spring Cloud都做了些什么？

    Spring Cloud作为一套微服务治理的框架,几乎考虑到了微服务治理的方方面面,之前也写过一些关于Spring Cloud文章,主要偏重各组件的使用,本次分享主要解答这两个问题:Spring Cl ...

  2. 数据模型（LP32 ILP32 LP64 LLP64 ILP64 ）

    数据模型(LP32 ILP32 LP64 LLP64 ILP64 ) 32位环境涉及"ILP32"数据模型,是因为C数据类型为32位的int.long.指针.而64位环境使用不同的 ...

  3. shell编程下 特殊变量、test / [ ]判断、循环、脚本排错

    第1章 shell中的特殊变量 1.1 $# $# 表示参数的个数 1.1.1 [示例]脚本内容 [root@znix ~]# cat /server/scripts/show2.sh #!/bin/ ...

  4. 【最新版】从零开始在 macOS 上配置 Lua 开发环境

    脚本语言,你可能更需要的是 Lua 不同的脚本语言有不同的特性,第一接触的脚本语言,可能会影响自己对整个脚本语言的理解和认知.我以前接触最多的脚本语言是 JavaScript.后果就是:我一度以为脚本 ...

  5. Linux网络中接收 "二进制" 流的那些事 --- 就recv的返回值和strlen库函数进行对话

    1.    前言 很多朋友在做网络编程开发的时候可能都遇到这样的问题,在进行接收二进制流的数据的时候,使用strlen库函数来得到 二进制数据长度的时候并不准确.为什么呢??首先,使用strlen进行 ...

  6. spring boot一个简单用户管理DEMO

    概述 该Demo旨在部署一个简单spring boot工程,包含数据编辑和查看功能 POM配置 <?xml version="1.0" encoding="UTF- ...

  7. 数据库中float类型字段，转化到前端显示，统一保留两位小数

    客户的一个需求,mybatis查询到的数据库的数据进行转换,采用TypeHandler<T>的方式.float保留两位精度可以采用DecimalFormat 直接贴上最终的解决代码(事情没 ...

  8. C#读取数据库返回泛型集合（DataSetToList）

    一般我们用使用ADO.NET查询数据库返回泛型集合使用SqlDataReader逐行读取数据存入对象 代码 }

  9. C#实现倒油算法

    原题如下:12(a桶 满的 有12斤油)斤桶里 取出6斤油 有 另外有8斤(b桶)和5斤(c桶)两个空桶  让程序输出取出这6斤油的步骤 现在实现的算法可以配参数(定义有几个桶,初始有多少油,要得到多 ...

  10. C#中四步轻松使用log4net记录本地日志

    在这里,记录我在项目中使用log4net记录本地日志的步骤.在不会之前感觉很难,很神秘,一旦会了之后其实没那么难.其实所有的事情都是一样的,下面我就分享一下我使用log4Net的经验. 第一步:首先从 ...