layui模板引擎文档 - layui.laytpl的具体使用

layui模板引擎文档 - layui.laytpl官方文档

laytpl 是 JavScript 模板引擎，在字符解析上有着比较出色的表现，欠缺之处在于异常调试上

具体使用

html页面

<script type="text/html" id="operation">
//当满足id什么条件的时候展示删除操作
  	{{#if(d.Id == 条件){}}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#}}}
</script>

初始化表格

 function init() {
            table.render({
                elem: '#table'
                , url: “写自己的接口”
                , method: "POST"
                , page: true
                , cellMinWidth: 100
                , cols: [
                    [
                     {field: 'remark', title: '备注', align: 'center'}
                     , {
                        width: 50,
                        align: 'center',
                        title: '操作',
                        toolbar: '#operation',
                        //绑定上面的html
                        fixed: 'right'
                    }
                    ]
                ],
                parseData: function (res) {
					//返回表格中的数据，html拿到表格中返回的数据做判断
                    return {
                        "code": res.code == 200 ? 0 : res.code,
                        "msg": res.code == 200 ? "" : res.msg,
                        "count": res.page.totalCount, 
                        "data": res.page.list 
                    };
                }
            });

监听事件

 table.on('tool(manage_table)', function (obj) {
                if (obj.event === 'del') {
                    layer.confirm('确认删除该行吗？', function (index) {
                        var postData = [];
                        postData.push(obj.data[deleteId])
                        admin.req({
                            url: “删除的接口”,
                            type: 'POST',
                            data: JSON.stringify(postData),
                            contentType: 'application/json;charset=utf-8',
                            done: function () {
                                layer.msg('删除成功');
                                //刷新表格
                                table.reload('table');
                            }
                        });
                    })
                } 
            });