1、在html界面声明模板(注意type类型)

<script id="tmplInvokeProvider" type="text/x-jquery-tmpl">
<div class="deptServiceItem dtable">
<div class="dtablecell">
<div class="">
<div class="deptName">${DeptName}</div>
<div class="deptDesc">${DeptDesc}-<label title="${SourceName}">${SourceNameAbbreviation}</label></div>
</div>
</div>
<div class="dtablecell deptTime">{{= moment(DeptTime).format("hh:mm MM-DD")}}</div>
</div>
</script>

2、引用js   jquery.tmpl.min.js   (无法提供连接,在下面我会把内容发出来,你们自行建立文件并把内容粘贴进去即可)

3、使用模板并给模板对应的位置赋值然后追加到对应的标签中。

var dataTemp = {
DeptName: item.ProviderDeptName,
DeptDesc: item.ProviderAppName,
DeptTime: item.CreateTime,
SourceName: item.SourceName,
SourceNameAbbreviation: item.SourceName.length > 3 ? (item.SourceName.substr(0, 3) + '...') : item.SourceName
}
$("#tmplInvokeProvider").tmpl(dataTemp).appendTo('.layui-tab .layui-tab-content');
注意注意:如果想输出的html的话,模板中的占位符应该是  {{html name}}

以下为jquery.tmpl.min.js内容

/*!
* jQuery Templates Plugin 1.0.0pre
* http://github.com/jquery/jquery-tmpl
* Requires jQuery 1.4.2
*
* Copyright 2011, Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){function e(e,n,l,a){var r={data:a||0===a||a===!1?a:n?n.data:{},_wrap:n?n._wrap:null,tmpl:null,parent:n||null,nodes:[],calls:u,nest:c,wrap:f,html:m,update:s};return e&&t.extend(r,e,{nodes:[],parent:n}),l&&(r.tmpl=l,r._ctnt=r._ctnt||r.tmpl(t,r),r.key=++w,(T.length?g:y)[w]=r),r}function n(e,a,r){var i,p=r?t.map(r,function(t){return"string"==typeof t?e.key?t.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+_+'="'+e.key+'" $2'):t:n(t,e,t._ctnt)}):e;return a?p:(p=p.join(""),p.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(e,n,a,r){i=t(a).get(),o(i),n&&(i=l(n).concat(i)),r&&(i=i.concat(l(r)))}),i?i:l(p))}function l(e){var n=document.createElement("div");return n.innerHTML=e,t.makeArray(n.childNodes)}function a(e){return Function("jQuery","$item","var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('"+t.trim(e).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(e,n,l,a,r,p,o){var u,c,f,m=t.tmpl.tag[l];if(!m)throw"Unknown template tag: "+l;return u=m._default||[],p&&!/\w$/.test(r)&&(r+=p,p=""),r?(r=i(r),o=o?","+i(o)+")":p?")":"",c=p?r.indexOf(".")>-1?r+i(p):"("+r+").call($item"+o:r,f=p?c:"(typeof("+r+")==='function'?("+r+").call($item):("+r+"))"):f=c=u.$1||"null",a=i(a),"');"+m[n?"close":"open"].split("$notnull_1").join(r?"typeof("+r+")!=='undefined' && ("+r+")!=null":"true").split("$1a").join(f).split("$1").join(c).split("$2").join(a||u.$2||"")+"__.push('"})+"');}return __;")}function r(e,l){e._wrap=n(e,!0,t.isArray(l)?l:[h.test(l)?l:t(l).html()]).join("")}function i(t){return t?t.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function p(t){var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML}function o(n){function l(n){function l(t){t+=u,i=c[t]=c[t]||e(i,y[i.parent.key+u]||i.parent)}var a,r,i,p,o=n;if(p=n.getAttribute(_)){for(;o.parentNode&&1===(o=o.parentNode).nodeType&&!(a=o.getAttribute(_)););a!==p&&(o=o.parentNode?11===o.nodeType?0:o.getAttribute(_)||0:0,(i=y[p])||(i=g[p],i=e(i,y[o]||g[o]),i.key=++w,y[w]=i),k&&l(p)),n.removeAttribute(_)}else k&&(i=t.data(n,"tmplItem"))&&(l(i.key),y[i.key]=i,o=t.data(n.parentNode,"tmplItem"),o=o?o.key:0);if(i){for(r=i;r&&r.key!=o;)r.nodes.push(n),r=r.parent;delete i._ctnt,delete i._wrap,t.data(n,"tmplItem",i)}}var a,r,i,p,o,u="_"+k,c={};for(i=0,p=n.length;p>i;i++)if(1===(a=n[i]).nodeType){for(r=a.getElementsByTagName("*"),o=r.length-1;o>=0;o--)l(r[o]);l(a)}}function u(t,e,n,l){return t?void T.push({_:t,tmpl:e,item:this,data:n,options:l}):T.pop()}function c(e,n,l){return t.tmpl(t.template(e),n,l,this)}function f(e,n){var l=e.options||{};return l.wrapped=n,t.tmpl(t.template(e.tmpl),e.data,l,e.item)}function m(e,n){var l=this._wrap;return t.map(t(t.isArray(l)?l.join(""):l).filter(e||"*"),function(t){return n?t.innerText||t.textContent:t.outerHTML||p(t)})}function s(){var e=this.nodes;t.tmpl(null,null,null,this).insertBefore(e[0]),t(e).remove()}var d,$=t.fn.domManip,_="_tmplitem",h=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,y={},g={},v={key:0,data:{}},w=0,k=0,T=[];t.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,n){t.fn[e]=function(l){var a,r,i,p,o=[],u=t(l),c=1===this.length&&this[0].parentNode;if(d=y||{},c&&11===c.nodeType&&1===c.childNodes.length&&1===u.length)u[n](this[0]),o=this;else{for(r=0,i=u.length;i>r;r++)k=r,a=(r>0?this.clone(!0):this).get(),t(u[r])[n](a),o=o.concat(a);k=0,o=this.pushStack(o,e,u.selector)}return p=d,d=null,t.tmpl.complete(p),o}}),t.fn.extend({tmpl:function(e,n,l){return t.tmpl(this[0],e,n,l)},tmplItem:function(){return t.tmplItem(this[0])},template:function(e){return t.template(e,this[0])},domManip:function(e,n,l){if(e[0]&&t.isArray(e[0])){for(var a,r=t.makeArray(arguments),i=e[0],p=i.length,o=0;p>o&&!(a=t.data(i[o++],"tmplItem")););a&&k&&(r[2]=function(e){t.tmpl.afterManip(this,e,l)}),$.apply(this,r)}else $.apply(this,arguments);return k=0,d||t.tmpl.complete(y),this}}),t.extend({tmpl:function(l,a,i,p){var o,u=!p;if(u)p=v,l=t.template[l]||t.template(null,l),g={};else if(!l)return l=p.tmpl,y[p.key]=p,p.nodes=[],p.wrapped&&r(p,p.wrapped),t(n(p,null,p.tmpl(t,p)));return l?("function"==typeof a&&(a=a.call(p||{})),i&&i.wrapped&&r(i,i.wrapped),o=t.isArray(a)?t.map(a,function(t){return t?e(i,p,l,t):null}):[e(i,p,l,a)],u?t(n(p,null,o)):o):[]},tmplItem:function(e){var n;for(e instanceof t&&(e=e[0]);e&&1===e.nodeType&&!(n=t.data(e,"tmplItem"))&&(e=e.parentNode););return n||v},template:function(e,n){return n?("string"==typeof n?n=a(n):n instanceof t&&(n=n[0]||{}),n.nodeType&&(n=t.data(n,"tmpl")||t.data(n,"tmpl",a(n.innerHTML))),"string"==typeof e?t.template[e]=n:n):e?"string"!=typeof e?t.template(null,e):t.template[e]||t.template(null,h.test(e)?e:t(e)):null},encode:function(t){return(""+t).split("<").join("&lt;").split(">").join("&gt;").split('"').join(""").split("'").join("'")}}),t.extend(t.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){__=__.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(__,$1,$2);__=[];",close:"call=$item.calls();__=call._.concat($item.wrap(call,__));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){__.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){__.push($.encode($1a));}"},"!":{open:""}},complete:function(){y={}},afterManip:function(e,n,l){var a=11===n.nodeType?t.makeArray(n.childNodes):1===n.nodeType?[n]:[];l.call(e,n),o(a),k++}})});

转载于:https://www.cnblogs.com/niuniu0108/p/11199406.html

JQuery简单实用的模板引擎相关推荐

  1. 基于jQuery开发的javascript模板引擎-jTemplates

    这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件,一个 ...

  2. 自己动手写一个简单的php模板引擎

    模板引擎中最核心的思想是:将模板中的变量编译为php的变量进行输出. 例如:demo.tpl {$data} {$title} 那么模板引擎就要将{$data} {$title} 编译为 <?p ...

  3. 通过Ajax获取数据并显示在表格中(原生Ajax,JQuery,Bootstrap,模板引擎)

    需求 页面上有一个"获取"按钮.当点击按钮时,从后端获取数据,并通过表格显示在页面上. 环境 Ubuntu 22.04 VSCode 1.67.2 jQuery v3.6.0 Bo ...

  4. html 可调节进度条控件,jQuery简单实用的轻量级进度条插件

    jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...

  5. 一个简单的PHP模板引擎

    PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...

  6. html jquery 模板引擎,jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  7. 简单描述Java模板引擎 FreeMarker相关知识

    FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写,FreeMarker被设计用来生成HTML Web页面(为了提高页面的访问速度,把页面静态化),特别是基于M ...

  8. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  9. 【python】简单实现一个模板引擎

    # simpletemplate 简单的前端html编译程序 有时候,我们就是简单的做几个前端页面,页面难免会出现重复的地方,比如head和footer nav导航,这个时候,我们修改一处,其它 地方 ...

最新文章

  1. 综合性深入的技术文章-20161103
  2. 从HTML页面重定向
  3. [官网]Prevent a worm by updating Remote Desktop Services (CVE-2019-0708)
  4. Java代码书写规范
  5. python自学网站需要多长时间-怎么自学python,大概要多久?
  6. 肖仰华 | 基于知识图谱的问答系统
  7. 基于麻雀算法改进的LSTM预测算法-附代码
  8. ElasticSearch完结篇------京东搜索实战
  9. 第三方支付接口对接基本流程
  10. 通用计算机的通用性如何体现,计算机的通用性表现在哪方面
  11. SILENTCAST是另一类UBUNTU最好的GIF视频录制器
  12. 获取wifi密码信息(仅供学习使用,勿作他用)
  13. 三星电视机dns服务器维护,4招解救三星智能电视看视频卡顿问题
  14. 压电式雨量传感器数字感知降雨量
  15. PC 新时代即将到来,Windows 11 将迎来首次重大更新:终于要支持 Android 应用了
  16. 3dmax顶点动画导入unity_从3dmax如何导入物体到unity3d
  17. day13-搜索过滤
  18. Python入门数学类编程-----基础数学运算
  19. 【Java学习笔记】工厂模式
  20. Python基础-DAY16

热门文章

  1. vite+vue3使用UEditorPlus ,后端PHP
  2. android 心电图文件读取,用手机测量你的心跳!安卓心电图App试用
  3. chrome快速关闭标签页_将Google Chrome的“新标签页”替换为快速拨号
  4. 厦大,天大两硕士同年论文高度雷同,双方均签署学位论文原创性声明
  5. android应用——木纹质感的手机通话键盘UI
  6. 世界五百强的人力资源面试--很精彩
  7. 白话透解验收标准(AC)与完成标准(DoD)的区别
  8. OpenCasCade学习笔记(三):加载显示STEP格式图片,并实现平移、缩放和旋转操作
  9. 长江游艇俱乐部算法题
  10. Web代码安全漏洞深度剖析