您的位置：首页 > Web前端 > HTML

html页面数据的维护

2016-08-06 21:51 357 查看

在Java Web开发中，后台页面开发技术使用JSP，有时候我们需要维护两份数据，一份是后台传递的数据，还有一份是js产生的数据，这两份数据维护起来还是比较麻烦的，

当一个新人接触一个已开发完的项目，现在他需要维护这些数据，需要做相应的修改，那么有两个麻烦：

a) 修改了一个却忘记修改另一个

b) 测试验证的时候需要做相应的操作才能验证是否修改正确

那么问题来了，如何解决这个问题呢？

根据要填充的数据设置一个html模板：这样可以避免直接在js中拼接html元素，造成后续的一个维护难度。

具体作法如下：

html模板：showdata.html

<tr>
<!-- 自定义属性 -->
<td>{name}</td>
<td>{address}</td>
<td>{age}</td>
<td>
<a onclick="daleteStu('{name}')" href="javascript:void(0);">删除</a>
</td>
</tr>

页面：testtemplate.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

<script type="text/template_showdata">
<%@ include file="/htmltemplate/showdata.html" %>
</script>

<table id="tableData"></table>
</body>
<script type="text/javascript" src="<%=basePath %>/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/testtemplate.js"></script>
</html>

js: testtemplate.js

$(function() {

var html = $("script[type='text/template_showdata']").html();

var dta = {
"rows": [{
"name": "李四",
"address": "湖南长沙市",
"age": 20
}, {
"name": "张三",
"address": "北京朝阳区",
"age": 30
}, {
"name": "王五",
"address": "浙江杭州市",
"age": 25
}]
};

//定义一个数组，用来接收格式化合的数据
var arr = [];
//对数据进行遍历
$.each(dta.rows, function(i, o) {
//这里取到o就是上面rows数组中的值
arr.push(formatTemplate(o, html));
});
//好了，最后把数组化成字符串，并添加到table中去。
$('#tableData').append(arr.join(''));
});

function formatTemplate(dta, tmpl) {
//格式化内容，指定要格式化的字段名和格式化函数
var format = {
name: function(x) {
return x
}
};
return tmpl.replace(/{(\w+)}/g, function(m1, m2) {
if (!m2)
return "";
return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
});
}

根据html模板，最后生成的html内容为：

<table id="tableData">
<tr>
<!-- 自定义属性 -->
<td>李四</td>
<td>湖南长沙市</td>
<td>20</td>
<td>
<a onclick="daleteStu('李四')" href="javascript:void(0);">删除</a>
</td>
</tr>

<tr>
<!-- 自定义属性 -->
<td>张三</td>
<td>北京朝阳区</td>
<td>30</td>
<td>
<a onclick="daleteStu('张三')" href="javascript:void(0);">删除</a>
</td>
</tr>

<tr>
<!-- 自定义属性 -->
<td>王五</td>
<td>浙江杭州市</td>
<td>25</td>
<td>
<a onclick="daleteStu('王五')" href="javascript:void(0);">删除</a>
</td>
</tr>
</table>

上述操作过后，以后在js中只需要设置相应的数据，进行填充就好了，样式的设置还是在html中，这样好维护一些

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html模板

相关文章推荐

新的分享

章节导航