数据表格自定义toolbar

提问 未结 7 121
置身红尘的鱼
悬赏:20飞吻
版本:layui 2.5.4 浏览器:chrome76, Microsoft Edge
<script type="text/html" id="tbd">
<div class="layui-table-tool">
<div class="layui-table-tool-temp">
<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
<div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>
<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</div>
<div class="layui-table-tool-self">
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i class="layui-icon layui-icon-cols"></i></div>
<div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i class="layui-icon layui-icon-export"></i></div>
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>
</div>
</div>
</script>

<table class="layui-table" id="userList" lay-filter="userList"></table>
var userTable = table.render({
elem: '#userList'
,id: 'userList'
,url: '/user/page'
//,url: '/json/users.json'
,page: true
//,toolbar: 'default'
,toolbar: '#tbd'
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'username', title: '用户名', width:120, sort: true}
,{field: 'trueName', title: '用户姓名', width:120}
,{field: 'email', title: '邮箱', width: 177}
,{field: 'createUser', title: '创建人', width: 120, sort: true}
,{field: 'createTime', title: '创建时间', width: 160}
,{field: 'lastModifiedUser', title: '最后修改人', width: 120, sort: true}
,{field: 'lastModifiedTime', title: '最后修改时间', width: 160}
]]
});

右边这三个按钮是怎么来的?
回帖
  • 难得920
    2019-8-10
    开启表格头部工具栏区域,该参数支持四种类型值:
    toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
    toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
    toolbar: true //仅开启工具栏,不显示左侧模板
    toolbar: 'default' //让工具栏左侧显示默认的内置模板
    注意:
    1. 该参数为 layui 2.4.0 开始新增。
    2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数
    0 回复
  • hero560
    2019-8-10
    @难得920 大佬 为什么我的这些 列显示隐藏”、“导出”、“打印”等功能 不显示 在网页f12有 页面就不显示
    0 回复
  • 难得920
    2019-8-10
    @hero560 你toolbar设置了吗? 而且你说的话有问题。
    0 回复
  • hero560
    2019-8-10
    @难得920 设置了,defaultToolbar这个也设置了
    0 回复
  • 难得920
    2019-8-10
    @hero560 可以看看你的代码 和效果图吗,还有控制台有没有报错
    0 回复
  • hero560
    2019-8-10
    @难得920 你加我Q嘛 可以吗 1078503239
    0 回复
  • <script type="text/html" id="tbd">
    <div class="layui-table-tool">
    <div class="layui-table-tool-temp">
    <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
    <div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>
    <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
    </div>
    <div class="layui-table-tool-self">
    <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i class="layui-icon layui-icon-cols"></i></div>
    <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i class="layui-icon layui-icon-export"></i></div>
    <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>
    </div>
    </div>
    </script>

    <table class="layui-table" id="userList" lay-filter="userList"></table>
    var userTable = table.render({
    elem: '#userList'
    ,id: 'userList'
    ,url: '/user/page'
    //,url: '/json/users.json'
    ,page: true
    //,toolbar: 'default'
    ,toolbar: '#tbd'
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'username', title: '用户名', width:120, sort: true}
    ,{field: 'trueName', title: '用户姓名', width:120}
    ,{field: 'email', title: '邮箱', width: 177}
    ,{field: 'createUser', title: '创建人', width: 120, sort: true}
    ,{field: 'createTime', title: '创建时间', width: 160}
    ,{field: 'lastModifiedUser', title: '最后修改人', width: 120, sort: true}
    ,{field: 'lastModifiedTime', title: '最后修改时间', width: 160}
    ]]
    });


    右边这三个按钮是怎么来的?
    0 回复