jquery-template
項(xiàng)目介紹
利用模板及正則解決js拼接html代碼問題
目的
插件主要目的：解決js拼接html代碼
參數(shù)說明
| 參數(shù)名 | 是否必須 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| template | 必須 | 模板的jquery對象 | null |
| target | 可選 | 被刷新的dom的jquery對象 | null |
| data | 必須 | ajax請求后返回的數(shù)據(jù)斟览，也就是需要替換到模板占位符的數(shù)據(jù)侈玄。 | null |
| nullText | 可選 | 當(dāng)占位符對應(yīng)的數(shù)據(jù)為null或不存在時(shí)的默認(rèn)顯示，可以是字符串，也可以是html | '' |
| prefix | 可選 | 占位符前綴 | '[' |
| suffix | 可選 | 占位符后綴 | ']' |
使用說明
v1.0.1 版本僅提供兩個(gè)功能
ajax請求后刷新部分dom
定制模板
<script type="text/html" id="userInfoTemp">
<tr>
<td>[id]</td>
<td>[name]</td>
<td>[sex]</td>
<td>[age]</td>
</tr>
</script>
調(diào)用模板
$.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>
調(diào)用模板
// 給定需要插件執(zhí)行的function：html
$.template("html", {
template: $("#actionsTemp"),
data: data,
});
