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

今天我們先來學習一下layui實現(xiàn)動態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁，其中還涉及到動態(tài)刷新數(shù)據(jù)表,數(shù)據(jù)表工具欄使用,表單提交等功能，這個靜態(tài)分頁同樣適用在信息類網(wǎng)站,我的工作開發(fā)環(huán)境是debian桌面版，所以所有的實驗也是在debian基礎上測試

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

前端代碼：

head.phtml（頭文件代碼）

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

import("head"); ?>

    
注意:為保障訪問速度,查詢同時請配合時間范圍,默認顯示一天以內的記錄
    

    

        

            商戶號
            

                
            
        
        

            訂單號:
            

                
            
        
        

            發(fā)起時間
            

                
            
            
-
            

                
            
        
        

            查詢
            ဂ刷新數(shù)據(jù)
            ဂ刷新頁面
        
    

后端php代碼

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

    // 訂單列表
    public function orderList()
    {
        // 動態(tài)渲染前臺表格
        $operating = $this->request->getPost("getlist", "trim");
        // 首次這里不會執(zhí)行，數(shù)據(jù)表開始渲染的時候才會請求以下部分
        if ("orderlist" === $operating) {
            // 進行分頁查詢
            $page = $this->request->getPost("page", "intval", 1);
            $limit = $this->request->getPost("limit", "intval", 10);
            $start = ($page - 1) * $limit;

            // 如果有其他條件查詢在這里可以帶上
            $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);

            // 分頁進行查詢條件記錄
            $order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);
            $datas = ["code" => 0, "msg" => ""];
            // 將總的記錄條數(shù)傳給前臺進行渲染分頁
            $datas["count"] = $order_nums;
            // 重新過濾一遍數(shù)據(jù)，很多沒有用到的不能全部發(fā)給試圖，尤其是動態(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格式響應給前臺渲染
            $datas["data"] = $order_list;
            echo json_encode($datas);
            safe_exit();
        }
        // 首次先現(xiàn)實模板頁
        self::$view->render("orders_orderlist");
    }

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

工具欄是指在行單元格內可以操作對應的行，因為使用layui的元素監(jiān)聽，很容易就獲取到相應對應整行的數(shù)據(jù).
比如獲取表單的數(shù)據(jù),只需要監(jiān)聽表單提交事件，直接就可以一次獲取到所有的參數(shù)和值：

這里是官方文檔的：

form.on("submit(*)", function(data){
  console.log(data.elem) //被執(zhí)行事件的元素DOM對象，一般為button對象
  console.log(data.form) //被執(zhí)行提交的form對象，一般在存在form標簽時才會返回
  console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});

我們今天要操作的數(shù)據(jù)表也是要采用這種方式，首先我們看看看怎樣生成和渲染出工具條：

只需要在body部分插入一個容器,注意這里的javascript的type是text/html,這個是供layui解析用的，在這里的d也就是我們在渲染表格的時候的數(shù)據(jù),所有的字段的值都可以在這個d里面獲取到

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

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

table.on("tool(fucktest)", function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
            var data = obj.data; //獲得當前行數(shù)據(jù)
            var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數(shù)對應的值）
            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);
                    //向服務端發(fā)送刪除指令
                });
            } else if(layEvent === "edit"){ //編輯
                    // 開始根據(jù)用戶id來進行獲取用戶進入新窗口
                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);

            }
        })

這樣在點擊編輯之后就能激活對應的事件了，我們這里是打開新的一個全屏彈窗來修改管理員資料

在修改完成后，如果只是單純的重載數(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 對應的模板，它可以存放在頁面的任意位置：

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

渲染工具條：

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

工具條綁定事件：

//監(jiān)聽工具條
table.on("tool(test)", function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
  var data = obj.data; //獲得當前行數(shù)據(jù)
  var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數(shù)對應的值）
  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);
      //向服務端發(fā)送刪除指令
    });
  } else if(layEvent === "edit"){ //編輯
    //do something
    
    //同步更新緩存對應的值
    obj.update({
      username: "123"
      ,title: "xxx"
    });
  }
});

更加詳細的介紹請仔細研讀官方文檔 layui table模塊

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

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

index.php

import("head");?>

注意：此處僅顯示部分日志
 $vv):?>
    

    
    
    

    

        
日志ID
        
操作用戶
        
操作
        
控制器
        
方法
        
是否成功
        
操作IP
        
備注信息
        
日期
    
    
    

    

        

        

        

        

        

        

        

        

        

    
    
    






import("foot");?>

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

adminLogList方法：

   public function adminLogList()
    {   // 接收當前頁，如果沒有收到默認是第一頁
        $page = $this->request->getGet("page","intval",1);
        // 設置limit查找起始，DEFAULT_PER_PAGE為全局變量，設置的是每頁顯示10條
        $start = ($page-1)*DEFAULT_PER_PAGE;
        // 獲取總日志數(shù)量
        $adminlog_num = adminLogs::getItemsNumber();
        // 分頁查找，其他查詢條件暫時不傳
        $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");
    }

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