jQuery的jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成。

jQuery的jTemplates官方网站:http://jtemplates.tpython.com/

原先的拼html代码如下:

$("#Content").html("");$.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) {$.each(data, function(i) {var strHtml = "<table id='tbItemId" + data[i].Id + "' class='mytable' style='table-layout:fixed' cellspacing='0'>";strHtml += "<tr><td class='alt'>";strHtml += "<input type='hidden' id='hidsType" + data[i].Id + "' value='" + data[i].TypeId + "' />";strHtml += "<span id='spTitle" + data[i].Id + "'>" + data[i].Title + "</span>";strHtml += "<span class='right'>";strHtml += "<a href='#' title='编辑' οnclick='EditItem("" + data[i].Id + "");'><img src='images/edit-page-purple.gif' class='marLeft20' /></a>";strHtml += "<a href='#' title='删除' οnclick='DelItem("" + data[i].Id + "");'><img src='images/delete-page-purple.gif' class='marLeft20' /></a>";strHtml += "<a id='aText" + data[i].Id + "' class='markSelectBox marLeft20' href='javascript:void(0)' οnclick='javascript:SetId("" + data[i].Id + "");'>" + data[i].TypeName + "<img src='images/arrow.gif' style='margin:1px 0pt 0pt 4px;' align='absmiddle' /></a>";strHtml += "</span></td></tr>";strHtml += "<tr><td>创建时间:" + data[i].CreateOn + "<span class='right'>最后修改时间:" + data[i].ModifiedOn + "</span></td></tr>";strHtml += "<tr><td id='tdBody" + data[i].Id + "' style='word-break:break-all;word-wrap:break-word;'><div id='divIntro" + data[i].Id + "'>" + data[i].Intro + "</div><div style='display:none;' id='divBody" + data[i].Id + "'>" + data[i].Body + "</div><a οnclick='javascript:Show("" + data[i].Id + "")' href='javascript:void()'>详细...</a></td></tr>";strHtml += "</table>";$("#Content").append(strHtml);})$(".markSelectBox").powerFloat({width: 85,eventType: "click",target: ".qmpanel_shadow",                    });
});

有了jTemplates,可以更灵活的定义一个模板 :

<div id="Content">
</div>
<textarea id="template" style="display:none">
{#foreach $T as record}
<table id="tbItemId{$T.record.Id}" class="mytable" style="table-layout: fixed" cellspacing="0"><tbody><tr><td class="alt"><input id="hidsType{$T.record.Id}" value="{$T.record.TypeId}" type="hidden" /><span id="spTitle{$T.record.Id}">{$T.record.Title}</span><span class="right"><a href="#" title="编辑" οnclick="EditItem('{$T.record.Id}');"><img src="data:images/edit-page-purple.gif" class="marLeft20"></a><a href="#" title="删除" οnclick="DelItem('{$T.record.Id}');"><img src="data:images/delete-page-purple.gif" class="marLeft20"></a><a id="aText{$T.record.Id}" class="markSelectBox marLeft20" href="javascript:void(0)" οnclick="javascript:SetId('{$T.record.Id}');">备忘录<img src="data:images/arrow.gif" style="margin: 1px 0pt 0pt 4px;" align="absmiddle"></a></span></td></tr><tr><td>创建时间:{$T.record.CreateOn}<span class="right">最后修改时间:{$T.record.ModifiedOn}</span></td></tr><tr><td id="tdBody{$T.record.Id}" style="word-break: break-all; word-wrap: break-word;"><div id="divIntro{$T.record.Id}">{$T.record.Intro}</div><div style="display: none;" id="divBody{$T.record.Id}">{$T.record.Body}</div><a οnclick="javascript:Show('{$T.record.Id}')" href="javascript:void()">详细...</a></td></tr></tbody>
</table>
{#/for}
</textarea>

调用:

    $("#Content").html("");$.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) {$("#Content").setTemplateElement("template", null, {filter_data: false});$("#Content").processTemplate(data); $(".markSelectBox").powerFloat({width: 85,eventType: "click",target: ".qmpanel_shadow",                    });                });

jquery模板插件jTemplates代替拼html相关推荐

  1. JQuery模板插件jquery.tmpl-动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...

    直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...

  3. 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能

    强大的jQuery幻灯片播放插件 支持全拼.拖拽和下载等功能 在线演示 本地下载 posted @ 2018-11-29 11:30 栖息地 阅读(...) 评论(...) 编辑 收藏

  4. 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  5. 超强1000个jquery极品插件!(感觉好强大,转载一下)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  6. 超强1000个jquery极品插件!

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...

  7. 超强1000个jquery极品插件!(连载中。。。。最近更新20100127)

    1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书 二手书 特价书 旧书网 (2)jQuery-Horizont ...

  8. 1000个jquery极品插件

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收 ...

  9. 超强1000个jquery极品插件!(转)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

最新文章

  1. 1732 Fibonacci数列 2
  2. android中使用DisplayMetrics获取屏幕参数
  3. vue中的computed 与 watch
  4. Visual BERT论文的简单汇总
  5. Hive学习和配置Mysql
  6. Jenkins搭建Nodejs自动化测试
  7. 迭代式客户端-服务系模型
  8. 微信小程序,自动滑动到页面底部功能
  9. Linux系统编程二:字符设备控制之点亮LED灯、控制蜂鸣器
  10. 科沃斯扫地机器人橡胶配件_扫地机器人主要配件,扫地机器人配件详解
  11. 计算机组成原理-王道习题1
  12. matlab仿真不确定时滞系统容错控制,基于自适应方法的非线性系统容错控制
  13. 有效软件测试 - 50条建议 - 需求阶段
  14. 计算机故障升温降温法,电脑故障排除1000例
  15. mysql json unquote_JSON_UNQUOTE() – Remove Quotes from a JSON Document in MySQL
  16. CDN - 原理解析
  17. STM32下载中出现Flash Download failed - Target DLL has been cancelled报错
  18. 致远SPM解决方案之公务车辆管理
  19. noiLinux中编程工具的使用
  20. STM32驱动1.44TFT显示屏

热门文章

  1. Linux 系统服务漏洞PwnKit 已存在12年,可获得所有主流发布版本的root 权限
  2. 微软7月修复117个漏洞,其中9个为0day,2个是Pwn2Own 漏洞
  3. 3年后准确率仍达97%:利用谷歌语音转文本 API 绕过reCAPTCHA
  4. 思科精睿系列交换机被曝高危漏洞,仅修复部分产品
  5. 关于Swift中的forEach(_:)和for-in loop
  6. Spring中的AOP(8)
  7. MongoDB 主从架构
  8. 十(7)rsync:介绍、常用选项、通过ssh同步、通过服务同步、linux系统日志、screen...
  9. Windows Message ID 常量列表
  10. (二)Graphivz 简单结构图及子图