如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

實現的最終效果圖（文末會貼出全部代碼，方便參考） 



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>

藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。