快捷導(dǎo)航

layui異步加載table表中某一列數(shù)據(jù)的例子

更新時(shí)間：2019年09月16日 09:21:43 作者：My_Way666

今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

layui中table加載數(shù)據(jù)時(shí) 如果數(shù)據(jù)存放在不同數(shù)據(jù)表中那樣一個(gè)請(qǐng)求拼接每行表格數(shù)據(jù) 然后統(tǒng)一返回太慢

//頁(yè)面加載時(shí)請(qǐng)求 另一張表的數(shù)據(jù)
 var slotGroup;
  admin.req({
    url: '請(qǐng)求地址'
    , method: 'POST'
    , dataType: "json"
    , async: false
    , success: function (res) {
      slotGroup = res.data;
      console.log(slotGroup)
    }
  });

  table.render({
    elem: '#LAY-ad_pass-list'
    ,url: '請(qǐng)求地址' //模擬接口
    ,cols: [[
      {field: 'id', title: 'ID', sort: true}
      ,{field: 'pass_name', title: '通道名稱'}
      ,{field: 'pass_code', title: '通道code'}
//注意：：此處使用function 返回此列需要展示的數(shù)據(jù)
      ,{field: 'remark', title: '描述',templet: function (d) {
        return getRemark(d.id)
      } }
      ,{field: 'adState', title: '狀態(tài)'}
      ,{field: 'updateTime', title: '時(shí)間'}
      ,{title: '操作',width: 200, align: 'center', fixed: 'right', toolbar: '#table-forum-list'}
    ]]
    ,page: false
    , text: {
      none: '暫無(wú)相關(guān)數(shù)據(jù)'
    }
    , done: function(res, curr, count){
      // console.log(res);
    }
  });

//遍歷展示一開始的數(shù)據(jù)
  function getRemark(v) {
    var showGroup = '';
    if (v == null || v == undefined) return showGroup;
    if (slotGroup != null && slotGroup != undefined) {
      for (var i = 0; i < slotGroup.length; i++) {
        if ( parseInt(slotGroup[i].id)== parseInt(v)) {
          showGroup = slotGroup[i].pass_name;
          return showGroup;
        }
      }
    }
    return showGroup;
  }

以上這篇layui異步加載table表中某一列數(shù)據(jù)的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

探索JavaScript函數(shù)的無(wú)限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念，它允許我們封裝可重用的代碼塊，并在需要時(shí)進(jìn)行調(diào)用，本文將深入介紹JavaScript函數(shù)的各個(gè)方面，包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見的函數(shù)應(yīng)用場(chǎng)景，感興趣的朋友一起看看吧
2023-08-08
JavaScript必看小技巧(必看)
下面小編就為大家?guī)?lái)一篇JavaScript必看小技巧(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
ES6新特性二：Iterator(遍歷器)和for-of循環(huán)詳解
這篇文章主要介紹了ES6新特性二：Iterator(遍歷器)和for-of循環(huán),結(jié)合實(shí)例形式分析了ES6中Iterator(遍歷器)和for-of循環(huán)遍歷操作的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2017-04-04
基于js原生和ajax的get和post方法以及jsonp的原生寫法實(shí)例
下面小編就為大家?guī)?lái)一篇基于js原生和ajax的get和post方法以及jsonp的原生寫法實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
js基于cookie記錄來(lái)賓姓名的方法
這篇文章主要介紹了js基于cookie記錄來(lái)賓姓名的方法,涉及javascript使用cookie針對(duì)方可信息的存儲(chǔ)與讀取顯示相關(guān)技巧,需要的朋友可以參考下
2016-07-07
JavaScript 代碼壓縮工具小結(jié)
為了使頁(yè)面更快的完成加載，經(jīng)常需要對(duì)javascript/css代碼進(jìn)行壓縮以減小體積，這里簡(jiǎn)單列一下用過(guò)的壓縮工具，同時(shí)也作為存檔
2012-02-02
微信小程序canvas實(shí)現(xiàn)刮刮樂(lè)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)刮刮樂(lè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
async/await讓異步操作同步執(zhí)行的方法詳解
這篇文章主要給大家介紹了關(guān)于async/await讓異步操作同步執(zhí)行的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用async/await具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
特想搞點(diǎn)新的創(chuàng)意出來(lái)-立體方塊
特想搞點(diǎn)新的創(chuàng)意出來(lái)-立體方塊...
2007-06-06
js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組實(shí)例代碼
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09