如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

实现的最终效果图（文末会贴出全部代码，方便参考） 



1， 将此行代码加在红线所在的位置

,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}


2，在合适的HTML位置加入 

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
全部代码：

{include file="common/header"}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

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

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:"{:url('admin/user/page')}"
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名称'}
                ,{field:'level', width:100, title: '代理级别'}
                ,{field:'email', width:80, title: '电子邮箱'}
                ,{field:'phone', width:280, title: '手机号'}
                ,{field:'agent_id', width:280, title: '上级代理ID'}
                ,{field:'status', width:280, title: '是否启用'}
                ,{field:'isAuth', width:280, title: '是否已经认证'}
                ,{field:'money', width:280, title: '金额'}
                ,{field:'created_time', width:280, title: '访问时间',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj);
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

</script>
</body>
</html>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。