layui数据表格

layui数据表格


    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#testtable'
            ,url:'/shsm/tablexs'
            ,method: 'POST'
            ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '用户数据表'
            ,initSort: {
                field: 'id' //排序字段,对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            ,even: true //开启隔行背景
            ,height: 580 //容器高度
            ,loading: true
            ,cols: [ [
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80,  sort: true} //unresize: true,fixed: 'left',
                ,{field:'ddzt', title:'订单状态', width:100,  sort: true,  templet: '#sexTpl'}
                ,{field:'ddshname', title:'用户名', width:100, sort: true }
                ,{field:'ddshtel', title:'电话', width:120, sort: true }
                ,{field:'ddshaddr', title:'地址', width:200,sort: true}
                ,{field:'ddzje', title:'订单金额', width:90,sort: true}
                ,{field:'ddshsj', title:'订单日期', templet:'<div>{{ layui.util.toDateString(d.ddshsj, "yyyy-MM-dd HH:mm:ss") }}</div>',minWidth:150, sort: true}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
            ] ]
            // ,page: true
        });

                                <table class="layui-hide" id="testtable" lay-filter="test"></table>

下方是 {field:'ddzt', title:'订单状态', width:100, sort: true, templet: '#sexTpl'} 附加的方法

<script type="text/html" id="sexTpl">
    {{#  if(d.ddzt === '0'){ }}
    <span style="color: #FF1493;">等待送货</span>
    {{#  } else { }}
    {{ d.ddzt }}
    {{#  } }}
</script>
···
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容