Layui:數據表格異步請求


數據的異步請求由以下幾個參數組成:

參數名 功能
url 接口地址。默認會自動傳遞兩個參數:?page=1&limit=30(該參數可通過 request 自定義)
page 代表當前頁碼、limit 代表每頁數據量
method 接口http請求類型,默認:get
where 接口的其它參數。如:where: {token: 'sasasas', id: 123}
contentType 發送到服務端的內容編碼類型。如果你要發送 json 內容,可以設置:contentType: 'application/json'
headers 接口的請求頭。如:headers: {token: 'sasasas'}
parseData

數據格式解析的回調函數,用於將返回的任意數據格式解析成 table 組件規定的數據格式。

table 組件默認規定的數據格式為(參考:/demo/table/user/):

默認規定的數據格式layui.code

  1. {
  2. "code": 0,
  3. "msg": "",
  4. "count": 1000,
  5. "data": [{}, {}]
  6. }

很多時候,您接口返回的數據格式並不一定都符合 table 默認規定的格式,比如:

假設您返回的數據格式layui.code

  1. {
  2. "status": 0,
  3. "message": "",
  4. "total": 180,
  5. "data": {
  6. "item": [{}, {}]
  7. }
  8. }

那么你需要借助 parseData 回調函數將其解析成 table 組件所規定的數據格式

codelayui.code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,parseData: function(res){ //res 即為原始返回的數據
  5. return {
  6. "code": res.status, //解析接口狀態
  7. "msg": res.message, //解析提示文本
  8. "count": res.total, //解析數據長度
  9. "data": res.data.item //解析數據列表
  10. };
  11. }
  12. //,…… //其他參數
  13. });

該參數非常實用,系 layui 2.4.0 開始新增

request 用於對分頁請求的參數:page、limit重新設定名稱,如:

codelayui.code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,request: {
  5. pageName: 'curr' //頁碼的參數名稱,默認:page
  6. ,limitName: 'nums' //每頁數據量的參數名,默認:limit
  7. }
  8. //,…… //其他參數
  9. });
那么請求數據時的參數將會變為:?curr=1&nums=30
response

您還可以借助 response 參數來重新設定返回的數據格式,如:

codelayui.code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,response: {
  5. statusName: 'status' //規定數據狀態的字段名稱,默認:code
  6. ,statusCode: 200 //規定成功的狀態碼,默認:0
  7. ,msgName: 'hint' //規定狀態信息的字段名稱,默認:msg
  8. ,countName: 'total' //規定數據總數的字段名稱,默認:count
  9. ,dataName: 'rows' //規定數據列表的字段名稱,默認:data
  10. }
  11. //,…… //其他參數
  12. });
那么上面所規定的格式為:

重新規定的數據格式layui.code

  1. {
  2. "status": 200,
  3. "hint": "",
  4. "total": 1000,
  5. "rows": []
  6. }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM