动态模板 · EasyWeb开发文档3

# 动态模板 ## 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'"`这里先是双引号再是单引号，不要漏掉了。