Layui：templet自定義列模板

類型：String，默認值：無

在默認情況下，單元格的內容是完全按照數據接口返回的content原樣輸出的，如果你想對某列的單元格添加鏈接等其它元素，你可以借助該參數來輕松實現。這是一個非常實用且強大的功能，你的表格內容會因此而豐富多樣。

templet 提供了三種使用方式，請結合實際場景選擇最合適的一種：

• 如果自定義模版的字符量太大，我們推薦你采用【方式一】；
• 如果自定義模板的字符量適中，或者想更方便地調用外部方法，我們推薦你采用【方式二】；
• 如果自定義模板的字符量很小，我們推薦你采用【方式三】

方式一：綁定模版選擇器。

table.render({
cols: [[
{field:'title', title: '文章標題', width: 200, templet: '#titleTpl'} //這里的templet值是模板元素的選擇器
,{field:'id', title:'ID', width:100}
]]
});
等價於：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章標題</th>
<th lay-data="{field:'id', width:100}">ID</th>

 

下述是templet對應的模板，它可以存放在頁面的任意位置。模板遵循於 laytpl 語法，可讀取到返回的所有數據

<script type="text/html" id="titleTpl">
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
注意：上述的 {{d.id}}、{{d.title}} 是動態內容，它對應數據接口返回的字段名。除此之外，你還可以讀取到以下額外字段：
序號：{{ d.LAY_INDEX }} （該額外字段為 layui 2.2.0 新增）
由於模板遵循 laytpl 語法（建議細讀 laytpl文檔 ），因此在模板中你可以寫任意腳本語句（如 if else/for等）：
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用戶)
{{# } }}
</script>

 

方式二：函數轉義。自 layui 2.2.5 開始，templet 開始支持函數形式，函數返回一個參數 d，包含接口返回的所有字段和數據。如下所示：

table.render({
cols: [[
{field:'title', title: '文章標題', width: 200
,templet: function(d){
return 'ID：'+ d.id +'，標題：<span style="color: #c00;">'+ d.title +'</span>'
}
}
,{field:'id', title:'ID', width:100}
]]
});

 

方式三：直接賦值模版字符。事實上，templet 也可以直接是一段 html 內容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：這里一定要被一層 <div></div> 包裹，否則無法讀取到模板