WEB开发网      濠电娀娼ч崐濠氬疾椤愶附鍋熸い鏍ㄧ〒闂勫嫰鏌﹀Ο渚Ц闁诲氦顕ч湁婵犲﹤楠告禍鍓х磼鏉堛劌绗氶柟宄版嚇閹晠宕归銈嗘濠电偞鍨堕幐鎾磻閹捐秮褰掓偐閻戞﹩妫勯梺鎼炲妼鐎涒晝绮嬪澶樻晝闁挎繂鏌婇敃鍌涚厵閻庢稒锚閻忥絾绻濇繝鍐ㄧ伌闁诡垰鍟村畷鐔碱敂閸♀晙绱樺┑鐐差嚟婵儳螞閸曨剚鍙忛柍鍝勬噹缁€澶嬬箾閹存繄锛嶆鐐灲閹綊宕惰濡插鏌涢妸銉ヮ劉缂佸倸绉归弫鎾绘晸閿燂拷 ---闂備焦瀵уú鈺呭箯閿燂拷
开发学院网页设计JavaScript 用jQuery和jTemplates插件实现客户端分页的表格展... 阅读

用jQuery和jTemplates插件实现客户端分页的表格展现

 2010-09-14 13:28:03 来源:WEB开发网 闂備線娼уΛ鎾箯閿燂拷闂備礁鎲¢崹鐢垫崲閹扮増鍎嶆い鎺戝€甸崑鎾斥槈濞嗗秳娌紓鍌氱▌閹凤拷濠电姭鎷冮崨顓濈捕闂侀潧娲ゅú銊╁焵椤掍胶鈯曢柕鍥╁仧缁辩偤鏁撻敓锟�闂備線娼уΛ鎾箯閿燂拷  闂備胶枪缁绘鈻嶉弴銏犳瀬闁绘劕鐏氱€氼剟姊洪崹顕呭剰闁逞屽墮缁夊綊寮婚妸褉鍋撻棃娑欏暈闁伙綀浜埀顒傛暬閸嬪﹪宕伴弽褏鏆﹂柨鐕傛嫹
核心提示: jTemplate就把数据展现的方式和业务逻辑分开来,允许你定义好一个模板,用jQuery和jTemplates插件实现客户端分页的表格展现(3),然后再运行时会根据模板的内容来render. 和ASP.NET中的绑定相似,也有一个特定的符号来表示绑定的上下文对象$T,$T就类似于上图中的

jTemplate就把数据展现的方式和业务逻辑分开来,允许你定义好一个模板,然后再运行时会根据模板的内容来render. 和ASP.NET中的绑定相似,也有一个特定的符号来表示绑定的上下文对象$T。$T就类似于上图中的result.d[n]—某一个业务对象,需要展现哪个属性后边直接跟.PropertyName即可。因为表格的行是可变的,所以这里就类似于XSLT中一样来控制动态生成.

<table id="RSSTable" cellspacing="0">
<thead>
  <tr>
   <th width="80">Date</th>
   <th>Title / Excerpt</th>
  </tr>
</thead>
<tbody>
  {#foreach $T.d as post}
  <tr>
   <td rowspan="2">{$T.post.Date}</td>
   <td><a href="{$T.post.Link}">{$T.post.Title}</a></td>
  </tr>
  <tr>
   <td>{$T.post.Description}</td>
  </tr>
  {#/for}
</tbody>
</table>

在页面请求完PageMethod并成功返回后可以来应用模板展现数据了:

$(document).ready(function() {
// On page load, display the first page of results.
DisplayRSS(1);
});
  
function DisplayRSS(page) {
……
success: function(msg) {
  // Render the resulting data, via template.
ApplyTemplate(msg);
  // TODO: Update navigation status
}
……
}
  
function ApplyTemplate(msg) {
$('#Container').setTemplateURL('Template/RSSTable.htm',
                 null, { filter_data: false });
$('#Container').processTemplate(msg);
}

上一页  1 2 3 4 5  下一页

Tags:jQuery jTemplates 插件

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接