2019-6-18 seo達(dá)人
如果您想訂閱本博客內(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="">首頁</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) - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設(shè)定初始在第 5 頁
,limit:10 //一頁顯示多少條
,limits:[5,10,15]//每頁條數(shù)的選擇項(xiàng)
,groups: 2 //只顯示 2 個(gè)連續(xù)頁碼
,first: "首頁" //不顯示首頁
,last: "尾頁" //不顯示尾頁
}
,cols: [[
{field:'id', width:80, title: '代理ID', sort: true}
,{field:'username', width:100, title: '代理名稱'}
,{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: '訪問時(shí)間',sort: true}
,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
]]
});
//監(jiān)聽工具條
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ì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com