layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)數(shù)據(jù)表分頁

caige 發(fā)布于2019-08-22 16:47 / 2325人閱讀

開發(fā)管理后臺(tái)是每一個(gè)開發(fā)人員都要熟悉的一個(gè)環(huán)節(jié)，作為后端程序員，公司的所有機(jī)密數(shù)據(jù)都掌握在我們手上，所以這個(gè)時(shí)候，如果不是公司的核心成員，是不能接觸到某些數(shù)據(jù)的，這個(gè)時(shí)候所有的工作都落到了我們的手上，從PS到Linux都需要我們親歷親為，還好發(fā)現(xiàn)了layui這個(gè)前端框架，很大程度上減輕了我們的壓力．

今天我們先來學(xué)習(xí)一下layui實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁，其中還涉及到動(dòng)態(tài)刷新數(shù)據(jù)表,數(shù)據(jù)表工具欄使用,表單提交等功能，這個(gè)靜態(tài)分頁同樣適用在信息類網(wǎng)站,我的工作開發(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)過程

業(yè)務(wù)邏輯我都寫到注釋里面了，這樣大家也友好一些，避免一會(huì)看代碼，一會(huì)看說明容易分神

前端代碼：

head.phtml（頭文件代碼）




    
    
    <?php echo $curTitle;?>

order_orderlist.phtml（主體業(yè)務(wù)代碼）

import("head"); ?>

    注意:為保障訪問速度,查詢同時(shí)請(qǐng)配合時(shí)間范圍,默認(rèn)顯示一天以內(nèi)的記錄
    

    
        
            商戶號(hào)
            
                
            
        
        
            訂單號(hào):
            
                
            
        
        
            發(fā)起時(shí)間
            
                
            
            -

后端php代碼

order.php(訂單控制器,部分業(yè)務(wù)代碼不用太深究）

    // 訂單列表
    public function orderList()
    {
        // 動(dòng)態(tài)渲染前臺(tái)表格
        $operating = $this->request->getPost("getlist", "trim");
        // 首次這里不會(huì)執(zhí)行，數(shù)據(jù)表開始渲染的時(shí)候才會(huì)請(qǐng)求以下部分
        if ("orderlist" === $operating) {
            // 進(jìn)行分頁查詢
            $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);

            // 分頁進(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)行渲染分頁
            $datas["count"] = $order_nums;
            // 重新過濾一遍數(shù)據(jù)，很多沒有用到的不能全部發(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ù)通過json格式響應(yīng)給前臺(tái)渲染
            $datas["data"] = $order_list;
            echo json_encode($datas);
            safe_exit();
        }
        // 首次先現(xiàn)實(shí)模板頁
        self::$view->render("orders_orderlist");
    }

數(shù)據(jù)格式請(qǐng)參照官方指導(dǎo)：數(shù)據(jù)接口格式,表格模塊
調(diào)試的時(shí)候可以打開chrome,firefox 的 console 和 network進(jìn)行查看，仔細(xì)研究分析

數(shù)據(jù)表工具條事件

工具欄是指在行單元格內(nèi)可以操作對(duì)應(yīng)的行，因?yàn)槭褂?b>layui的元素監(jiān)聽，很容易就獲取到相應(yīng)對(duì)應(yīng)整行的數(shù)據(jù).
比如獲取表單的數(shù)據(jù),只需要監(jiān)聽表單提交事件，直接就可以一次獲取到所有的參數(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里面獲取到

　// 這里就是我們渲染表格字段的地方，和上面的容器進(jìn)行綁定，容器里面可以通過d.fixed來獲取到
 {fixed: "right", width:158,title:"操作", align:"center", toolbar: "#barDemo"}

然后我們就可以對(duì)工具條綁定事件了,這里我只使用了編輯事件

table.on("tool(fucktest)", function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
            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"){ //編輯
                    // 開始根據(jù)用戶id來進(jìn)行獲取用戶進(jìn)入新窗口
                var index = layer.open({
                    type: 2,
                    title:"編輯管理員",
                    area: ["700px", "560px"],
                    maxmin: true,
                    content: "index.php?c=adminUser&a=editUser&uid="+data.admin_id
                });
                layer.full(index);

            }
        })

這樣在點(diǎn)擊編輯之后就能激活對(duì)應(yīng)的事件了，我們這里是打開新的一個(gè)全屏彈窗來修改管理員資料

在修改完成后，如果只是單純的重載數(shù)據(jù)表可以使用我們前面使用的方式，如果是刷新頁面直接使用location.reload()

       // 重載數(shù)據(jù)表
       var active = {
            reload:function(){
                var demoReload = $("#demoReload");
                var dateReload = $("#dateReload");
                table.reload("testReload",{
                    where:{
                        username:demoReload.val(),
                        dates:dateReload.val()
                    }
                });
            }
        };
        $("#fresh-btn").click(function(){active.reload();});
        $("#fresh-page-btn").click(function(){location.reload();});

這里是官方的例子 toolbar-綁定列工具條

toolbar 對(duì)應(yīng)的模板，它可以存放在頁面的任意位置：

  
 
注意：屬性 lay-event="" 是模板的關(guān)鍵所在，值可隨意定義。

渲染工具條：

table.render({
  cols: [[
    {field:"id", title:"ID", width:100}
    ,{fixed: "right", width:150, align:"center", toolbar: "#barDemo"} //這里的toolbar值是模板元素的選擇器
  ]]
});
 
等價(jià)于：
ID

工具條綁定事件：

//監(jiān)聽工具條
table.on("tool(test)", function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
  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"
    });
  }
});

更加詳細(xì)的介紹請(qǐng)仔細(xì)研讀官方文檔 layui table模塊

靜態(tài)表格和分頁

在很多時(shí)候在pc端過多的使用動(dòng)態(tài)渲染不是一個(gè)明智的選擇，比如稍微懂行的人都能看到你的API和需要的param，所以我們還是建議對(duì)安全要求比較高的程序上還是使用靜態(tài)表格，通過模板引擎也好，還是直接使用使用后端動(dòng)態(tài)語言混合，用戶最終只能看到解析好的頁面，對(duì)程序保護(hù)也是很有必要的，我的一個(gè)hacker朋友在進(jìn)行滲透的時(shí)候都是這樣進(jìn)行鉆空子的

靜態(tài)表格我這里直接是使用php混合解析進(jìn)行展示：
前端模板：

index.php

import("head");?>

注意：此處僅顯示部分日志
 $vv):?>
    
    
    
    
    
        日志ID
        操作用戶
        操作
        控制器
        方法
        是否成功
        操作IP
        備注信息
        日期
    
    
    
    
        
        
        
        
        
        
        
        
        
    
    
    






import("foot");?>

這里的原理非常簡(jiǎn)單，主要利用的是layui下的laypage模塊，使用jump來觸發(fā)事件

adminLogList方法：

   public function adminLogList()
    {   // 接收當(dāng)前頁，如果沒有收到默認(rèn)是第一頁
        $page = $this->request->getGet("page","intval",1);
        // 設(shè)置limit查找起始，DEFAULT_PER_PAGE為全局變量，設(shè)置的是每頁顯示10條
        $start = ($page-1)*DEFAULT_PER_PAGE;
        // 獲取總?cè)罩緮?shù)量
        $adminlog_num = adminLogs::getItemsNumber();
        // 分頁查找，其他查詢條件暫時(shí)不傳
        $admin_log_list = adminLogs::getItems("","","","","",$start);
        $log_list = array();
        foreach($admin_log_list as $kk => $vv){
            if($vv["admin_id"] > 0){
                try{
                    $admins = admins::getItemById($vv["admin_id"]);
                    $log_list[$kk]["username"] = $admins["username"];
                } catch (exception2 $e){
                    logexception($e->format_stack_trace());
                }
            } else {
                $log_list[$kk]["username"] = "Tourists";
            }
            $log_list[$kk]["log_id"] = $vv["log_id"];
            $log_list[$kk]["control"] = $vv["control"];
            $log_list[$kk]["action"] = $vv["action"];
            $log_list[$kk]["is_success"] = $vv["is_success"];

            $log_list[$kk]["client_ip"] = ip2location($vv["client_ip"]);
            $log_list[$kk]["remark"] = $vv["remark"];
            $log_list[$kk]["date"] = $vv["date"];
            $log_list[$kk]["title"] = $vv["title"];
            unset($admin_log_list[$kk]);
        }
        self::$view->setVar("currpage",$page);
        self::$view->setVar("log_num",$adminlog_num);
        self::$view->setVar("log_list",$log_list);
        self::$view->render("default_addloglist");
    }

最終效果，已經(jīng)完成靜態(tài)分頁，此部分功能也適用于信息類網(wǎng)站：