溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

layui實(shí)現(xiàn)動態(tài)和靜態(tài)分頁

發(fā)布時間：2020-10-23 09:19:12 來源：腳本之家 閱讀：497 作者：laozhang 欄目：web開發(fā)

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

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

layui動態(tài)數(shù)據(jù)表

動態(tài)數(shù)據(jù)表的效果圖

layui實(shí)現(xiàn)動態(tài)和靜態(tài)分頁

實(shí)現(xiàn)過程

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

前端代碼：

head.phtml（頭文件代碼）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title><?php echo $curTitle;?></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="static/css/layui.css" rel="external nofollow" media="all">
  <link rel="stylesheet" href="static/css/globals.css" rel="external nofollow" media="all">
  <script src="static/layui.js" charset="utf-8"></script>
  <!--引入自定義模塊全局配置文件-->
  <script src="static/global.js" charset="utf-8"></script>
</head>
<body class="layui-layout-body">

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

<?php $this->import("head"); ?>
<div class="layui-fluid">
  <blockquote class="layui-elem-quote">注意:為保障訪問速度,查詢同時請配合時間范圍,默認(rèn)顯示一天以內(nèi)的記錄</blockquote>
  <br/>
  <div class="layui-form-item layui-form-pane">
    <div class="layui-inline">
      <label class="layui-form-label" >商戶號</label>
      <div class="layui-input-inline" >
        <input type="text" name="merchant_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" >訂單號:</label>
      <div class="layui-input-inline" >
        <input type="text" name="order_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" >發(fā)起時間</label>
      <div class="layui-input-inline" >
        <input type="text" class="layui-input" name="start_time" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" >
        <input type="text" class="layui-input" name="end_time" id="test6" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
    <div class="layui-inline">
      <button id="fuck-btn" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon">&#xe615;</i>查詢</button>
      <button id="reloadtable" class="layui-btn layui-btn-normal"><i class="layui-icon">&#x1002;</i>刷新數(shù)據(jù)</button>
      <button id="reloadpage" class="layui-btn layui-btn-normal"><i class="layui-icon">&#x1002;</i>刷新頁面</button>
    </div>
  </div>
<table class="layui-hide" id="test"></table>
</div>
<script>
  // 加載需要用到的模塊，如果有使用到自定義模塊也在此加載
  layui.use(['laydate','form','table'], function(){
    // 初始化元素，如果有大量的元素操作可以也引入和初始化element模塊
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var $ = layui.$;
    // 定義時間選擇器
    laydate.render({
      elem:'#test5',
      type:'datetime'
    });
    laydate.render({
      elem:'#test6',
      type:'datetime'
    });
    // 動態(tài)數(shù)據(jù)表渲染
    table.render({
       elem: '#test'              /* 綁定表格容器id */
      ,url:'index.php?c=orders&a=orderList'   /* 獲取數(shù)據(jù)的后端API URL */
      ,where:{getlist:'orderlist'}       /* 這里還可以額外的傳參到后端 */
      ,method: 'post'              /* 使用什么協(xié)議，默認(rèn)的是GET */
      ,cellMinWidth: 60             /* 最小單元格寬度 */
      ,cols: [[
         {field:'orderno', title: '訂單號',align: 'center',sort:true}
        ,{field:'username', title: '商戶號',align: 'center'}
        ,{field:'user_orderno', title: '商戶訂單號',align: 'center'}
        ,{field:'trace_time', title: '創(chuàng)建時間',align: 'center',sort:true,width:200}
        ,{field:'price', title: '交易金額',align: 'center',sort:true}
        ,{field:'fee', title: '手續(xù)費(fèi)',align: 'center',sort:true,width:80}
        ,{field:'real_price', title: '結(jié)算金額',align: 'center',sort:true}
        ,{field:'pay_type', title: '支付類型', align: 'center'}
        ,{field:'pay_status', title: '訂單狀態(tài)',align: 'center',width:90}
        ,{field:'pay_time', title: '支付時間',align: 'center',sort:true,width:200}
        ,{field:'push_nums', title: '通知次數(shù)',align: 'center',width:90}
        ,{field:'notice_result', title: '通知支付結(jié)果',align: 'center'}
      ]]  // 使用sort將自動為我們添加排序事件，完全不用人工干預(yù)
      ,page: true
      ,limit:10
      ,id:'testReload' // 這里就是重載的id
    });
    // 數(shù)據(jù)表重載，這個是配合上面的表格一起使用的
    var active = {
      reload:function(){
        table.reload('testReload',{
        　　 // 點(diǎn)擊查詢和刷新數(shù)據(jù)表會把以下參數(shù)傳到后端進(jìn)行查找和分頁顯示
          where:{
            merchant_no:$("input[name='merchant_no']").val(),
            order_no: $("input[name='order_no']").val(),
            start_time:$("input[name='start_time']").val(),
            end_time:$("input[name='end_time']").val()
          }
        });
      }
    };
    
    form.render(); // 渲染表單
    // 查找點(diǎn)擊時間，這里的事件綁定建議使用on來綁定,因?yàn)樵囟际呛笃阡秩具^的
    $("#fuck-btn").click(function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $("#reloadtable").click(function(){
      active.reload();
    });
    $("#reloadpage").click(function(){
      location.reload();
    });
  });
</script>
</body>
</html>

后端php代碼

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

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

      // 分頁進(jìn)行查詢條件記錄
      $order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);
      $datas = ['code' => 0, 'msg' => ''];
      // 將總的記錄條數(shù)傳給前臺進(jìn)行渲染分頁
      $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) ? "<span class=\"layui-badge layui-bg-blue\">已推送</span>" : "<span class=\"layui-badge layui-bg-gray\">未推送</span>";
      }
      // 將數(shù)據(jù)通過json格式響應(yīng)給前臺渲染
      $datas['data'] = $order_list;
      echo json_encode($datas);
      safe_exit();
    }
    // 首次先現(xiàn)實(shí)模板頁
    self::$view->render('orders_orderlist');
  }

數(shù)據(jù)格式請參照官方指導(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":"詩人","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":"詩人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"簽名-11","experience":492,"logins":107,"wealth":8062783,"classify":"詩人","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":"詩人","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":"詩人","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":"詩人","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)試的時候可以打開chrome,firefox 的 console 和 network進(jìn)行查看，仔細(xì)研究分析

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

工具欄是指在行單元格內(nèi)可以操作對應(yīng)的行，因?yàn)槭褂胠ayui的元素監(jiān)聽，很容易就獲取到相應(yīng)對應(yīng)整行的數(shù)據(jù).

比如獲取表單的數(shù)據(jù),只需要監(jiān)聽表單提交事件，直接就可以一次獲取到所有的參數(shù)和值：

<script>
  layui.use(['form','jquery'],function(){
    let form = layui.form,
      $ = layui.$;
    form.on('submit(fuck-submit)', function(data){
      if(data.field.password && data.field.password.length < 5){
        layer.msg('密碼不能小于５位');
        return false;
      }
      $.post('index.php?&a=adminEdit&op=update&uid='+data.field.uid,{
          username:data.field.username,
          password:data.field.password,
          level:data.field.level,
          is_enabled:data.field.is_enabled
        }, function(responseText){
          //console.log(responseText);
          if(responseText.errno === 8){
            layer.msg(responseText.errstr,{icon:6});
            return false;
          } else {
            layer.msg(responseText.errstr,{icon:5});
            location.reload();
          }
        },'json'
      );
      return false;
    });
  });
</script>

這里是官方文檔的：

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

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

layui實(shí)現(xiàn)動態(tài)和靜態(tài)分頁

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

<table class="layui-hide" lay-filter="fucktest" id="test"></table>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" user_id="{{d.admin_id}}" lay-event="edit">編輯</a>
  </script>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手