2019-6-18 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
實現的最終效果圖（文末會貼出全部代碼，方便參考）
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.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。