动态模板 · EasyWeb开发文档

## 4.12.动态模板直接赋值数据： ```html <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'`： ```html <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 &emsp; 渲染完成后的回调 - url &emsp; 远程数据的url - method &emsp; 远程数据的请求方式 - where &emsp; 远程数据的请求条件,也可以`data-where="JSON.stringify({})"` - headers &emsp; 远程数据的请求header - content-type &emsp; 如`data-content-type="application/json;charset=UTF-8"` 注意远程数据url一定要加引号，加引号的好处你还可以这样使用： ``` ew-tpl=" layui.setter.baseServer + '/user.json' " ``` 动态模板会在页面加载后自动渲染，如果要重新渲染： ```javascript admin.renderTpl('#userListTpl'); // 参数为模板的jquery选择器 ``` **使用例子，比如用户管理的搜索里面的性别下拉换成动态的：** ```html  <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数据： ```json {"code": 200, "data": [{"name": "男", "value": 0}, {"name": "女", "value": 1}]} ``` 注意这里有个小细节，select上面还有一个div，对于select的动态模板，建议select外面最好多一层，因为select会被layui美化，外面不加一层当重新渲染模板的时候不能把layui美化的旧的select移除，另外`ew-tpl="'sex.json'"`这里先是双引号再是单引号，不要漏掉了。