開(kāi)發(fā)管理后臺(tái)是每一個(gè)開(kāi)發(fā)人員都要熟悉的一個(gè)環(huán)節(jié)，作為后端程序員，公司的所有機(jī)密數(shù)據(jù)都掌握在我們手上，所以這個(gè)時(shí)候，如果不是公司的核心成員，是不能接觸到某些數(shù)據(jù)的，這個(gè)時(shí)候所有的工作都落到了我們的手上，從PS到Linux都需要我們親歷親為，還好發(fā)現(xiàn)了layui這個(gè)前端框架，很大程度上減輕了我們的壓力．
目前成都創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、陽(yáng)原網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
今天我們先來(lái)學(xué)習(xí)一下layui實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁(yè)，其中還涉及到動(dòng)態(tài)刷新數(shù)據(jù)表,數(shù)據(jù)表工具欄使用,表單提交等功能，這個(gè)靜態(tài)分頁(yè)同樣適用在信息類網(wǎng)站,我的工作開(kāi)發(fā)環(huán)境是debian桌面版，所以所有的實(shí)驗(yàn)也是在debian基礎(chǔ)上測(cè)試
layui動(dòng)態(tài)數(shù)據(jù)表
動(dòng)態(tài)數(shù)據(jù)表的效果圖
實(shí)現(xiàn)過(guò)程
業(yè)務(wù)邏輯我都寫到注釋里面了，這樣大家也友好一些，避免一會(huì)看代碼，一會(huì)看說(shuō)明容易分神
前端代碼：
head.phtml（頭文件代碼）
<?php echo $curTitle;?>
order_orderlist.phtml（主體業(yè)務(wù)代碼）
重慶分公司
重慶分公司
<?php $this->import("head"); ?>
注意:為保障訪問(wèn)速度,查詢同時(shí)請(qǐng)配合時(shí)間范圍,默認(rèn)顯示一天以內(nèi)的記錄
-
后端php代碼
order.php(訂單控制器,部分業(yè)務(wù)代碼不用太深究）
// 訂單列表
public function orderList()
{
// 動(dòng)態(tài)渲染前臺(tái)表格
$operating = $this->request->getPost('getlist', 'trim');
// 首次這里不會(huì)執(zhí)行，數(shù)據(jù)表開(kāi)始渲染的時(shí)候才會(huì)請(qǐng)求以下部分
if ('orderlist' === $operating) {
// 進(jìn)行分頁(yè)查詢
$page = $this->request->getPost('page', 'intval', 1);
$limit = $this->request->getPost('limit', 'intval', 10);
$start = ($page - 1) * $limit;
// 如果有其他條件查詢?cè)谶@里可以帶上
$merchant_no = $this->request->getPost('merchant_no', 'trim', '');
$order_no = $this->request->getPost('order_no', 'trim', '');
$start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day")));
$end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());
// 獲取符合條件的記錄數(shù)量
if($GLOBALS['SESSION']['admin_group_id'] >1){
$merchant_no = $GLOBALS['SESSION']['admin_username'];
}
$order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);
// 分頁(yè)進(jìn)行查詢條件記錄
$order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);
$datas = ['code' => 0, 'msg' => ''];
// 將總的記錄條數(shù)傳給前臺(tái)進(jìn)行渲染分頁(yè)
$datas['count'] = $order_nums;
// 重新過(guò)濾一遍數(shù)據(jù)，很多沒(méi)有用到的不能全部發(fā)給試圖，尤其是動(dòng)態(tài)渲染的，很容易暴露，建議加工一下再傳
foreach ($order_list as $k => $v) {
$order_list[$k]['orderno'] = $v['order_id'];
$order_list[$k]['user_orderno'] = $v['order_no'];
$order_list[$k]['username'] = $v['merchant_no'];
$order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "支付寶掃碼" : "微信掃碼";
$order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已支付" : "未支付";
$order_list[$k]['pay_time'] = $v['callback_time'];
$order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "已推送" : "未推送";
}
// 將數(shù)據(jù)通過(guò)json格式響應(yīng)給前臺(tái)渲染
$datas['data'] = $order_list;
echo json_encode($datas);
safe_exit();
}
// 首次先現(xiàn)實(shí)模板頁(yè)
self::$view->render('orders_orderlist');
}
數(shù)據(jù)格式請(qǐng)參照官方指導(dǎo)：
數(shù)據(jù)接口格式
{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"簽名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1","experience":884,"logins":58,"wealth":64928690,"classify":"詞人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"簽名-2","experience":650,"logins":77,"wealth":6298078,"classify":"醬油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"簽名-3","experience":362,"logins":157,"wealth":37117017,"classify":"詩(shī)人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"簽名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"簽名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"簽名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"簽名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"簽名-8","experience":951,"logins":133,"wealth":16503371,"classify":"詞人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"簽名-9","experience":484,"logins":25,"wealth":86801934,"classify":"詞人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"簽名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"詩(shī)人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"簽名-11","experience":492,"logins":107,"wealth":8062783,"classify":"詩(shī)人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"簽名-12","experience":106,"logins":176,"wealth":42622704,"classify":"詞人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"簽名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"詩(shī)人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"簽名-14","experience":873,"logins":116,"wealth":72549912,"classify":"詞人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"簽名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"簽名-16","experience":862,"logins":168,"wealth":37069775,"classify":"醬油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"簽名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"簽名-18","experience":866,"logins":88,"wealth":81722326,"classify":"詞人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"簽名-19","experience":682,"logins":106,"wealth":68647362,"classify":"詞人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"簽名-20","experience":770,"logins":24,"wealth":92420248,"classify":"詩(shī)人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"簽名-21","experience":184,"logins":131,"wealth":71566045,"classify":"詞人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"簽名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"簽名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"簽名-24","experience":212,"logins":133,"wealth":59011052,"classify":"詞人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"簽名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"簽名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"簽名-27","experience":371,"logins":44,"wealth":64419691,"classify":"詩(shī)人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"簽名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"簽名-29","experience":647,"logins":107,"wealth":97450636,"classify":"醬油","score":27}]}表格模塊：http://www.layui.com/doc/modules/table.html
調(diào)試的時(shí)候可以打開(kāi)chrome,firefox 的 console 和 network進(jìn)行查看，仔細(xì)研究分析
數(shù)據(jù)表工具條事件
工具欄是指在行單元格內(nèi)可以操作對(duì)應(yīng)的行，因?yàn)槭褂胠ayui的元素監(jiān)聽(tīng)，很容易就獲取到相應(yīng)對(duì)應(yīng)整行的數(shù)據(jù).
比如獲取表單的數(shù)據(jù),只需要監(jiān)聽(tīng)表單提交事件，直接就可以一次獲取到所有的參數(shù)和值：
這里是官方文檔的：
form.on('submit(*)', function(data){
console.log(data.elem) //被執(zhí)行事件的元素DOM對(duì)象，一般為button對(duì)象
console.log(data.form) //被執(zhí)行提交的form對(duì)象，一般在存在form標(biāo)簽時(shí)才會(huì)返回
console.log(data.field) //當(dāng)前容器的全部表單字段，名值對(duì)形式：{name: value}
return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});我們今天要操作的數(shù)據(jù)表也是要采用這種方式，首先我們看看看怎樣生成和渲染出工具條：
只需要在body部分插入一個(gè)容器,注意這里的javascript的type是text/html,這個(gè)是供layui解析用的，在這里的d也就是我們?cè)阡秩颈砀竦臅r(shí)候的數(shù)據(jù),所有的字段的值都可以在這個(gè)d里面獲取到
