逍遥阁

layui表格学习笔记

关键词: layui

layui表格学习笔记

```
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="a">A</button>
        <button class="layui-btn layui-btn-sm" lay-event="b">B</button>
        <button class="layui-btn layui-btn-sm" lay-event="c">C</button>
    </div>
</script>

<script type="text/html" id="button">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

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

<script>
layui.use(['table'], function(){
    var table = layui.table;
    table.render({
        elem: '#test',
        url: '',
        cellMinWidth: 100,
        cols: [[]],
        title: '用户数据表',
        page: true,
        page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
            curr: 5,
            groups: 1,
            first: false,
            last: false
        },
        toolbar: '#toolbar',
        toolbar: true,
        defaultToolbar: ['filter', 'print', 'exports'],
        totalRow: true,
        width: 800,
        height: 600,
        id: 'testReload'
    });
    table.on('toolbar(test)', function(data){});
    table.on('tool(test)', function(data){});
});
</script>
<!--
1.字段属性

field:'id'

width:100

minWidth:100

title:''

sort:true

unresize:true

align:'left|center|right'

type:'radio|checkbox|numbers'

fixed:'left|right'

fixed:true

edit:'text'

templet:function(rs){return '';}

templet:'#id'

toolbar:'#button'

totalRowText:'合计'

totalRow:true

style:'color:red;'

event:'setSign'

hide:true

2.table事件

toolbar

tool

row

rowDouble

checkbox

sort

edit
-->
```

admin
2019-03-22 19:45:17
html