layui td通过数据动态渲染视图

最新推荐文章于 2023-03-23 15:08:51 发布

原创最新推荐文章于 2023-03-23 15:08:51 发布 · 809 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #ajax #th #渲染彪表格 #td

layui 同时被 3 个专栏收录

4 篇文章

订阅专栏

table

1 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

html:

                <table class="layui-table">
                            <thead>
                            <tr>
                                <th >险种名称</th>
                                <th >保险公司</th>
                                <th >费用</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="view">
                            <tr>
                                <td>1</td>
                                <td>pchess</td>
                                <td>620503199801144550</td>
                                <td class="td-manage">
                                    <a title="删除" class="layui-btn layui-btn-sm layui-btn-danger" onclick="member_del(this,'要删除的id')" href="javascript:;">
                                        删除
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>

js：

    <script id="demo" type="text/html">
        <tbody>
            {{#  layui.each(d.list, function(index, item){ }}
            <tr>
                <td>{{ item.insurance_name }}</td>
                <td>{{ item.insurance_company }}</td>
                <td>{{ item.price || '' }}</td>
                <td class="td-manage"><a title="删除" class="layui-btn layui-btn-sm layui-btn-danger" id="{{item.id}}" onclick="member_del(this,this.id)" href="javascript:;">
                    删除
                </a></td>
            </tr>
            {{#  }); }}
            {{#  if(d.list.length === 0){ }}
            无数据
            {{#  } }}
        </tbody>
    </script>

js:

layui.use(['upload''laytpl'], function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        var laytpl = layui.laytpl;
        /*读取数据库中“保险”*/
        var data = {
            "list" :
                $.ajax({
                    url:'',
                    type:'POST',
                    async: false,
                    header: {
                        'content-type': 'application/json',
                    },success:function(pchess){
                        var insurance = pchess.data.insurance;
                        var ins = insurance.data;
                        return ins;
                    }
                }).responseJSON.data.insurance.data

        }
        console.log(data);
        var getTpl = demo.innerHTML
            ,view = document.getElementById('view');
        laytpl(getTpl).render(data, function(html){
            view.innerHTML = html;
        });

效果：