jquery 自定义模板(jquery-template)

jquery-template

项目介绍

利用模板及正则解决js拼接html代码问题

演示地址
bug提交地址

目的

插件主要目的:解决js拼接html代码

参数说明

参数名 是否必须 描述 默认值
template 必须 模板的jquery对象 null
target 可选 被刷新的dom的jquery对象 null
data 必须 ajax请求后返回的数据,也就是需要替换到模板占位符的数据。 null
nullText 可选 当占位符对应的数据为null或不存在时的默认显示,可以是字符串,也可以是html ''
prefix 可选 占位符前缀 '['
suffix 可选 占位符后缀 ']'

使用说明

v1.0.1 版本仅提供两个功能
ajax请求后刷新部分dom

定制模板

<script type="text/html" id="userInfoTemp">
  <tr>
    <td>[id]</td>
    <td>[name]</td>
    <td>[sex]</td>
    <td>[age]</td>
  </tr>
</script>

调用模板

$.template({
  template: $("#userInfoTemp"),
  target: $("#userInfo"),
  data: _result.data,
  nullText: '<span style="color: red;">暂无</span>'
});
datatables等框架自定义列等场景

定制模板

<script type="text/html" id="actionsTemp">
  <div class="btns">
    <a href="javascript:alert('[id],[name],[age],[sex]')">查看</a>
    <a href="javascript:alert('[id],[name],[age],[sex]')">修改</a>
    <a href="javascript:alert('[id],[name],[age],[sex]')">删除</a>
  </div>
</script>

调用模板

// 给定需要插件执行的function:html
$.template("html", {
  template: $("#actionsTemp"),
  data: data,
});
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容