layUI分頁處理--樂字節前端

時間  2020-06-29
標籤 layui 分頁 處理 字節 前端 简体版
原文   原文鏈接

分頁

​ <font color="red">模塊加載名稱：laypage</font>javascript

快速使用

​ laypage 的使用很是簡單，指向一個用於存放分頁的容器，經過服務端獲得一些初始值，便可完成分頁渲染。css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分頁</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div id="test1"></div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laypage', function(){
          var laypage = layui.laypage;

          //執行一個laypage實例
          laypage.render({
            elem: 'test1' //注意，這裏的 test1 是 ID，不用加 # 號
            ,count: 50 //數據總數，從服務端獲得
          });
        });
    </script>
</html>
基礎參數

經過核心方法：laypage.render(options) 來設置基礎參數。html

參數選項 說明 類型 默認值
elem 指向存放分頁的容器，值能夠是容器ID、DOM對象。如： 1. elem: 'id' 注意：這裏不能加 # 號 2. elem: document.getElementById('id') String/Object -
count 數據總數。通常經過服務端獲得 Number -
limit 每頁顯示的條數。laypage將會藉助 count 和 limit 計算出分頁數。 Number 10
limits 每頁條數的選擇項。若是 layout 參數開啓了 limit，則會出現每頁條數的select選擇框 Array [10, 20, 30, 40, 50]
curr 起始頁。通常用於刷新類型的跳頁以及HASH跳頁。如：<br />// 開啓location.hash的記錄<br />laypage.render({ <br /> elem: 'test1' ,<br /> count: 500 ,<br /> // 獲取起始頁 <br /> curr: location.hash.replace('#!fenye=', '')<br /> // 自定義hash值<br /> ,hash: 'fenye' <br />}); ` Number 1
groups 連續出現的頁碼個數 Number 5
prev 自定義「上一頁」的內容，支持傳入普通文本和HTML String 上一頁
next 自定義「下一頁」的內容，同上 String 下一頁
first 自定義「首頁」的內容，同上 String 1
last 自定義「尾頁」的內容，同上 String 總頁數值
layout 自定義排版。可選值有：count（總條目輸區域）、prev（上一頁區域）、page（分頁區域）、next（下一頁區域）、limit（條目選項區域）、refresh（頁面刷新區域。注意：layui 2.3.0 新增） 、skip（快捷跳頁區域） Array ['prev', 'page', 'next']
theme 自定義主題。支持傳入：顏色值，或任意普通字符。如： 1. theme: '#c00' 2. theme: 'xxx' //將會生成 class="layui-laypage-xxx" 的CSS類，以便自定義主題 String -
hash 開啓location.hash，並自定義 hash 值。若是開啓，在觸發分頁時，會自動對url追加：#!hash值={curr} 利用這個，能夠在頁面載入時就定位到指定頁 String/Boolean false
jump - 切換分頁的回調

當分頁被切換時觸發，函數返回兩個參數：obj（當前分頁的全部選項值）、first（是否首次，通常用於初始加載的判斷）java

laypage.render({
    elem: 'page'
    ,count: 100 //數據總數，從服務端獲得
    ,groups:10 // 連續出現的頁碼個數
    ,layout:['prev', 'page', 'next','limit','count'] // 自定義排版
    ,limits:[5,10,20] // layout屬性設置了limit值，可會出現條數下拉選擇框
    ,jump: function(obj, first){
        // obj包含了當前分頁的全部參數，好比：
        console.log(obj.curr); //獲得當前頁，以便向服務端請求對應頁的數據。
        console.log(obj.limit); //獲得每頁顯示的條數

        //首次不執行
        if(!first){
            //do something
        }
    }
});

數據表格

​ <font color="red">模塊加載名稱：table</font>jquery

快速使用

​ 建立一個table實例最簡單的方式是，在頁面放置一個元素 <table id="demo"></table>，而後經過 table.render() 方法指定該容器。json

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>table數據表格</title>
      <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <table id="demo"></table>
    </body>

    <script src="layui/layui.js" type="text/javascript" ></script>
    <script type="text/javascript">
        layui.use('table', function(){
          var table = layui.table;

          // 第一個實例
          table.render({
            elem: '#demo'
            ,url: 'user.json' // 數據接口
            ,cols: [[ // 表頭
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '用戶名', width:80}
              ,{field: 'sex', title: '性別', width:80, sort: true}
              ,{field: 'city', title: '城市', width:80} 
              ,{field: 'sign', title: '簽名', width: 177}
            ]]
          });

        });
    </script>
</html>

數據接口 user.json數組

{
    "code": 0,
    "msg": "",
    "count": 50,
    "data": [{
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "簽名-0"          
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "簽名-1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市-2",
            "sign": "簽名-2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市-3",
            "sign": "簽名-3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市-4",
            "sign": "簽名-4"
        }

    ]
}
三種初始化渲染方式
機制 適用場景
方法渲染 用JS方法的配置完成渲染 （推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設定各項參數便可。
自動渲染 HTML配置，自動渲染 無需寫過多 JS，可專一於 HTML 表頭部分
轉換靜態表格 轉化一段已有的表格元素 無需配置數據接口，在JS中指定表格元素，並簡單地給表頭加上自定義屬性便可
方法渲染

  1. 將基礎參數的設定放在了JS代碼中，且原始的 table 標籤只須要一個選擇器異步

    <table id="demo"></table>

  2. 渲染表格ide

    layui.use('table', function(){
    var table = layui.table;

    // 執行渲染
    table.render({
       elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
       ,url: 'user.json' // 數據接口
       ,height: 315 // 容器高度
       ,page:true // 開啓分頁
       ,cols: [[  // 設置表頭
           {field: 'id', title: 'ID'}
           ,{field: 'username', title: '用戶名'}
           ,{field: 'sex', title: '性別'}
       ]]
    });   
});

    注：table.render()方法返回一個對象：var tableIns = table.render(options)，可用於對當前表格進行「重載」等操做。函數

自動渲染

​ 在一段 table 容器中配置好相應的參數，由 table 模塊內部自動對其完成渲染，而無需你寫初始的渲染方法。

​ 1) 帶有 class="layui-table" 的 <table> 標籤。
​ 2) 對標籤設置屬性 lay-data="" 用於配置一些基礎參數
​ 3) 在 <th> 標籤中設置屬性lay-data=""用於配置表頭信息

<table class="layui-table" lay-data="{url:'user.json'}">
  <thead>
    <tr>
      <th lay-data="{field:'id'}">ID</th>
      <th lay-data="{field:'username'}">用戶名</th>
      <th lay-data="{field:'sex', sort: true}">性別</th>
    </tr>
  </thead>
</table>
轉換靜態表格

​ 頁面已經存在了一段有內容的表格，由原始的table標籤組成，只須要賦予它一些動態元素。

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">暱稱</th>
            <th lay-data="{field:'experience', width:80, sort:true}">積分</th>
            <th lay-data="{field:'sign'}">簽名</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>賢心1</td>
            <td>66</td>
            <td>人生就像是一場修行a</td>
        </tr>
    </tbody>
</table>

執行用於轉換表格的JS方法

layui.use('table', function(){
    var table = layui.table;

    // 轉換靜態表格
    table.init('demo', {
        height: 315 // 設置高度
        // 支持全部基礎參數
    }); 

});
基礎參數使用的場景
// 場景一：下述方法中的鍵值即爲基礎參數項
table.render({
  height: 300
  ,url: 'user.json'
});

// 場景二：下述 lay-data 裏面的內容即爲基礎參數項，切記：值要用單引號
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>

// 更多場景：下述 options 即爲含有基礎參數項的對象
> table.init('filter', options); // 轉化靜態表格
> var tableObj = table.render({});
  tableObj.reload(options); // 重載表格
開啓分頁
<!-- HTML代碼 -->
<table id="demo"></table>
// JS實現代碼 
layui.use('table', function(){
    var table = layui.table;

    // 執行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數據接口
        ,height: 315 // 容器高度
        ,page:true // 開啓分頁
        ,cols: [[  // 設置表頭
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
        ]]
    });   
});
開啓頭部工具欄
<table id="demo" lay-filter="demo"></table>

<!-- 表格工具欄 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!-- lay-event 給元素綁定事件名 -->
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
            獲取選中行數據
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
            獲取選中數目
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">
            驗證是否全選
        </button>
    </div>
</script>

<!-- 表頭工具欄 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
layui.use('table', function(){
    var table = layui.table;

    // 執行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數據接口
        ,height: 315 // 容器高度
        ,page:true // 開啓分頁
        ,cols: [[  // 設置表頭
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
            ,{title:'操做', toolbar: '#barDemo'} // 綁定表頭工具欄
        ]]
        ,toolbar: '#toolbarDemo' // 開啓頭部工具欄，併爲其綁定左側模板
    });  

    /**
      * 頭工具欄事件
      * 語法：
            table.on('toolbar(demo)', function(obj){

            });
            注：demo表示選擇器元素上設置的lay-filter屬性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 當前選擇器的id屬性值，即demo
        // 獲取當前表格被選中的記錄對象，返回數組
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 獲得當前點擊元素的事件名
        switch(obj.event){ 
            case 'getCheckData':
                // 獲取被選中的記錄的數組
                var data = checkStatus.data;
                // 將數組數據解析成字符串
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('選中了：'+ data.length + ' 個');
                break;
            case 'isAll':
                // checkStatus.isAll 判斷記錄是否被全選
                layer.msg(checkStatus.isAll ? '全選': '未全選');
                break;
                // 自定義頭工具欄右側圖標 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('這是工具欄右側自定義的一個圖標按鈕');
                break;
        };
    });

    /**
      * 監聽行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 獲得當前操做的tr的相關信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 確認框
            layer.confirm('真的刪除行麼', function(index){
                // 刪除指定tr
                obj.del();
                // index 當前彈出層的下標，經過下標關閉彈出層
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 輸入框
            layer.prompt({
                // 表單元素的類型 0=文本框 1=密碼框 2=文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 修改指定單元格的值
                // value表示輸入的值
                obj.update({
                    username: value
                });
                // 關閉彈出層
                layer.close(index);
            });
        }
    });

});
開啓單元格編輯
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">ID</th>
            <th lay-data="{field:'id',  sort: true}">ID</th>
            <th lay-data="{field:'username', sort: true, edit: 'text'}">用戶名</th>
            <th lay-data="{field:'sex', edit: 'text'}">性別</th>
            <th lay-data="{field:'city', edit: 'text'}">城市</th>
            <th lay-data="{field:'experience', sort: true, edit: 'text'}">積分</th>
        </tr>
    </thead>
</table>
layui.use('table', function(){
    var table = layui.table;

    // 監聽單元格編輯
    table.on('edit(demo)', function(obj){
        var value = obj.value // 獲得修改後的值
        ,data = obj.data // 獲得所在行全部鍵值
        ,field = obj.field; // 獲得字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改成：'+ value);
    });

});
數據表格的重載
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table>
layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 獲取jquery對象

    // 執行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
        ,url: 'user.json' // 數據接口
        ,page:true // 開啓分頁
        ,cols: [[  // 設置表頭
            {type: 'checkbox', fixed: 'left'} // 設置複選框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用戶名'}
            ,{field: 'sex', title: '性別'}
        ]]
    });  

    // 給指定元素綁定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 獲取搜索框對象
        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 設定異步數據接口的額外參數，任意設
                id: demoReload.val()
            }
            ,page: {
                // 讓條件查詢從第一頁開始查詢，不寫則從當前頁開始查詢，此頁以前的數據將不歸入條件篩選
                curr: 1 // 從新從第 1 頁開始
            }
        }); // 只重載數據
    });
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程