# 動態模板 ## 4.12.動態模板 直接賦值數據： ~~~ <script type="text/html" ew-tpl="['a','b','c']" data-done="layui.form.render()"> <div> {{# layui.each(d,function(i,item){ }} <div>{{item}}</div> {{# }); }} </div> </script> <!-- 也可以引用變量 --> <script id="userListTpl" type="text/html" ew-tpl="userList"> <div> {{# if(d){ }} <!-- 這里判斷以下因為可能值還沒定義 --> {{# layui.each(d,function(i,item){ }} <div>{{item}}</div> {{# }); }} {{# } }} </div> </script> <script> layui.use(['admin'], function() { window.userList = ['a', 'b', 'c']; // admin模塊一加載會自動渲染,但userList還未定義,所以定義完要重新渲染 admin.renderTpl('#userListTpl'); }); </script> ~~~ 使用遠程數據，注意要加引號`'user.json'`： ~~~ <script type="text/html" ew-tpl="'user.json'" data-method="post" data-where="{sex:'女'}" data-headers="{token: 'xxx'}"> <div> {{# layui.each(d.data,function(i,item){ }} <div>{{item.username}}</div> {{# }); }} </div> </script> ~~~ 通過`ew-tpl`來表示這是一個動態模板以及設置數據源，通過`data-xxx`配置其他參數： * done ? 渲染完成后的回調 * url ? 遠程數據的url * method ? 遠程數據的請求方式 * where ? 遠程數據的請求條件,也可以`data-where="JSON.stringify({})"` * headers ? 遠程數據的請求header * content-type ? 如`data-content-type="application/json;charset=UTF-8"` 注意遠程數據url一定要加引號，加引號的好處你還可以這樣使用： ~~~ ew-tpl=" layui.setter.baseServer + '/user.json' " ~~~ 動態模板會在頁面加載后自動渲染，如果要重新渲染： ~~~ admin.renderTpl('#userListTpl'); // 參數為模板的jquery選擇器 ~~~ **使用例子，比如用戶管理的搜索里面的性別下拉換成動態的：** ~~~ <!-- 表格工具欄 --> <form class="layui-form toolbar"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">性&emsp;別:</label> <script type="text/html" ew-tpl="'../../json/sex.json'" data-done="layui.form&&layui.form.render('select');"> <div class="layui-input-inline"> <select name="sex"> <option value="">選擇性別</option> {{# layui.each(d.data,function(i,item){ }} <option value="{{item.value}}">{{item.name}}</option> {{# }); }} </select> </div> </script> </div> </div> </form> <!-- 數據表格 --> <table id="userTable" lay-filter="userTable"></table> ~~~ sex.json數據： ~~~ {"code": 200, "data": [{"name": "男", "value": 0}, {"name": "女", "value": 1}]} ~~~ 注意這里有個小細節，select上面還有一個div，對于select的動態模板，建議select外面最好多一層，因為select會被layui美化， 外面不加一層當重新渲染模板的時候不能把layui美化的舊的select移除，另外`ew-tpl="'sex.json'"`這里先是雙引號再是單引號，不要漏掉了。