这是因为layui的渲染机制造成的,你在加载的时候是空的,然后你模板获取到之后,已经渲染结束了,所以啥也没有,这个时候我们需要重新渲染一下
//初始化文章分类 function initCate() { $.ajax({ method: 'GET', url: '/my/article/cates', success: function (res) { if (res.status !== 0) { return layer.msg('获取分类数据失败!') } // 调用模板引擎渲染分类的可选项 var htmlStr = template('tpl-cate', res); console.log(htmlStr); $('[name=cate_id]').html(htmlStr); //为什么没有渲染上去???? //这是因为layui的渲染机制造成的 form.render(); } }) }
模板和HTML代码
<form class="layui-form" id="form-search"> <div class="layui-form-item layui-inline"> <select name="cate_id"></select> </div> <div class="layui-form-item layui-inline"> <select name="state"> <option value="">所有状态</option> <option value="已发布">已发布</option> <option value="草稿">草稿</option> </select> </div> <div class="layui-form-item layui-inline"> <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button> </div> </form> <script type="text/html" id="tpl-table"> {{each data}} <tr> <td>{{$value.title}}</td> <td>{{$value.cate_name}}</td> <td>{{$value.pub_date|dataFormat}}</td> <td>{{$value.state}}</td> <td> <button type="button" class="layui-btn">编辑</button> <button type="button" class="layui-btn">删除</button> </td> </tr> {{/each}} </script> <!-- 分类可选项的模板结构 --> <script type="text/html" id="tpl-cate"> <option value="">所有分类</option> {{each data}} <option value="{{$value.Id}}">{{$value.name}}</option> {{/each}} </script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。