通過舊標(biāo)簽新屬性能很好的簡化列表。數(shù)據(jù)統(tǒng)一放到j(luò)avascript的數(shù)據(jù)區(qū)，不影響html頁面展示.
寫了個簡單模型，還不支持分頁和排序，有待擴展!
示例代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HelloWorld</title>
<script src="lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<!-- 數(shù)據(jù) -->
var dataMap = [{"name":"0001","password":"123456"},{"name":"0002","password":"654321"},{"name":"0003","password":"897456"}];
var userMap = {"0001":"天津","0002":"深圳","0003":"北京"}
<!-- 數(shù)據(jù)處理邏輯 -->
function changeName(val) {
return userMap[val];
}
$(document).ready(function (){
$("#ta").find("#def").each(function (i,n) {
var menu = $(n);
for (index in dataMap) {
var newTr = $(n).clone();
// --- 際記列表 ---
newTr.attr("item","true");
newTr.find("td").each(function(k,o){
if (o.bindingPattern != undefined || o.bindingPattern == "") {
try {
o.bindingPattern = o.bindingPattern.replace("[function]","");
o.innerHTML = eval(o.bindingPattern.replace("\{0\}","'" + dataMap[index][o.bindingData] + "'"));
} catch (e) {
alert(e);
}
} else {
o.innerHTML = dataMap[index][o.bindingData];
}
})
$("#ta").find("#def").after(newTr);
}
})
// --- 刪除輔助標(biāo)簽 ---
$("#ta").find("#def").remove();
// --- 添加列表樣式 ---
$("#ta").find("tr[@item]").each(function(l,it){
$(it).hover(function(){
$(it).addClass("blue");
},function(){
$(it).removeClass("blue");
})
})
})
</script>
<style type="text/css" media="screen">
.blue {}{ color: blue; }
</style>
</head>
<body>
<div id="head">
<h1>標(biāo)題</h1>
</div>
<hr/>
<div id="conent">
<table border="0" cellspacing="5" cellpadding="5" id="ta">
<tbody>
<!-- 定制menu是為了使標(biāo)題和下面的列表可以有不一樣的樣式布局 -->
<tr id="menu">
<td>用戶名</td>
<td>密碼</td>
</tr>
<!-- 用于數(shù)據(jù)綁定 -->
<tr id="def">
<td bindingData="name" bindingPattern="[function] changeName({0})"></td>
<td bindingData="password">d</td>
</tr>
<!-- 下面是其它的布局輔助綁定數(shù)據(jù)后依然位于表格底部 -->
<tr>
<td colspan="2"> --- 分頁 ---</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>