如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

實(shí)現(xiàn)的最終效果圖（文末會(huì)貼出全部代碼，方便參考） 



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="">首頁(yè)</a>
        <a href="">演示</a>
        <a>
          <cite>導(dǎo)航元素</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 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見(jiàn)文檔
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁(yè)布局
                //,curr: 5 //設(shè)定初始在第 5 頁(yè)
                ,limit:10 //一頁(yè)顯示多少條
                ,limits:[5,10,15]//每頁(yè)條數(shù)的選擇項(xiàng)
                ,groups: 2 //只顯示 2 個(gè)連續(xù)頁(yè)碼
                ,first: "首頁(yè)" //不顯示首頁(yè)
                ,last: "尾頁(yè)" //不顯示尾頁(yè)
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名稱(chēng)'}
                ,{field:'level', width:100, title: '代理級(jí)別'}
                ,{field:'email', width:80, title: '電子郵箱'}
                ,{field:'phone', width:280, title: '手機(jī)號(hào)'}
                ,{field:'agent_id', width:280, title: '上級(jí)代理ID'}
                ,{field:'status', width:280, title: '是否啟用'}
                ,{field:'isAuth', width:280, title: '是否已經(jīng)認(rèn)證'}
                ,{field:'money', width:280, title: '金額'}
                ,{field:'created_time', width:280, title: '訪問(wèn)時(shí)間',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


        //監(jiān)聽(tīng)工具條
        table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
            console.log(obj);
            var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
            var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值（也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值）
            var tr = obj.tr; //獲得當(dāng)前行 tr 的DOM對(duì)象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //刪除
                layer.confirm('真的刪除行么', function(index){
                    obj.del(); //刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
                    layer.close(index);
                    //向服務(wù)端發(fā)送刪除指令
                });
            } else if(layEvent === 'edit'){ //編輯
                //do something

                //同步更新緩存對(duì)應(yīng)的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

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

藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。