雪湖小札@blogjava

心情与技术文档同行 http://hi.baidu.com/jingleq

BlogJava 首页 新随笔 联系 聚合 管理
  24 Posts :: 2 Stories :: 4 Comments :: 0 Trackbacks
  通过旧标签新属性能很好的简化列表。数据统一放到javascript的数据区,不影响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">
  
   
<!-- 数据 -->
   
var dataMap = [{"name":"0001","password":"123456"},{"name":"0002","password":"654321"},{"name":"0003","password":"897456"}];
   
var userMap = {"0001":"天津","0002":"深圳","0003":"北京"}
  
   
<!-- 数据处理逻辑 -->
   
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);
     }

    }
)
    
// --- 删除辅助标签 ---
    $("#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>标题</h1>
   
</div>
   
<hr/>
   
<div id="conent">
    
<table border="0" cellspacing="5" cellpadding="5" id="ta">
     
<tbody>
     
<!-- 定制menu是为了使标题和下面的列表可以有不一样的样式布局 -->
     
<tr id="menu">
      
<td>用户名</td>
      
<td>密码</td>
     
</tr>
     
<!-- 用于数据绑定 -->
     
<tr id="def">
      
<td bindingData="name" bindingPattern="[function] changeName({0})"></td>
      
<td bindingData="password">d</td>
     
</tr>
     
<!-- 下面是其它的布局辅助绑定数据后依然位于表格底部 -->
     
<tr>
      
<td colspan="2">&nbsp;--- 分页 ---</td>
     
</tr>
     
</tbody>
    
</table>
   
</div>
</body>
</html>
posted on 2007-06-13 13:03 csnowfox 阅读(248) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: