快捷導(dǎo)航

layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例

更新時(shí)間：2019年09月04日 20:17:23 作者：yufengaotian

今天小編就為大家分享一篇layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

在使用layui表格時(shí)，在ajax請求回來的數(shù)據(jù)，有時(shí)候需要我們處理之后顯示

1.比如性別sex這個(gè)字段，后臺(tái)可能返回的是1.或者 2；那我們總不能顯示1.和 2，我們需要顯示男和女，這里就用到了自定義模板了

 <script type="text/html" id="barDemo">
    {{#if (d.sex == 1) { }}
     <span>男</span>
    {{# }else if(d.sex == 2){ }}
    <span>女</span>
    {{# } }}
  </script>

2.比如后臺(tái)返回了一個(gè)時(shí)間段是2018-08-24 15:15:55 ，但是我們只需要顯示年月日，這里我們就需要截取字符串

 <script type="text/html" id="cTime">
  {{# 
   var fn = function(data){
   return data.substring(0,10);
   }; 
   }}
  {{ fn(d.cTime) }}
</script>

上面的id名就對應(yīng)你們表格里的字段，添加的自定工具條，如下圖

3.在一個(gè)，表格中有很多按鈕（修改，刪除，等等），再做不同權(quán)限登錄時(shí)，對應(yīng)的角色要顯示對應(yīng)的按鈕

從后臺(tái)獲取按鈕權(quán)限

var PAGE_BUTTON_AUTH = {
  "add": false,
  "edit": false,
  "delete": false
};
$(function () {
  //按鈕權(quán)限驗(yàn)證
  var url = window.location.href.replace("http://", "");
  var relUrl = url.substring(url.lastIndexOf("/") + 1);
  //去掉參數(shù)部分
  if (relUrl.indexOf("?") !== -1) {
    relUrl = relUrl.split("?")[0];
  }
  $.getJSON(weburl + "/menu/buttons",
    { "platform": platform, "url": relUrl },
    function (data) {
      if (data.status === 1) {
        PAGE_BUTTON_AUTH = data.data;
    }
<script type="text/html" id="barDemo">
    {{#if (PAGE_BUTTON_AUTH.edit) { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    {{# }else{ }}
    <span>- </span>
    {{# } }}
    {{#if (PAGE_BUTTON_AUTH.delete) { }}
    <a class="layui-btn layui-btn-xs" lay-event="delete">刪除</a>
    {{# }else{ }}
    <span>- </span>
    {{# } }}
  </script>

以上這篇layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

layui自定義ajax左側(cè)三級菜單
這篇文章主要為大家詳細(xì)介紹了layui自定義ajax左側(cè)三級菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
詳解如何利用JavaScript繪制堆疊柱狀圖
堆疊柱狀圖將每個(gè)柱子進(jìn)行分割以顯示相同類型下各個(gè)數(shù)據(jù)的大小情況。可以形象得展示一個(gè)大分類包含的每個(gè)小分類的數(shù)據(jù)，以及各個(gè)小分類的占比，顯示的是單個(gè)項(xiàng)目與整體之間的關(guān)系。本文將利用JavaScript實(shí)現(xiàn)堆疊柱狀圖的繪制，需要的可以參考一下
2022-03-03
javascript自執(zhí)行函數(shù)之偽命名空間封裝法
比較之后，我們可以發(fā)現(xiàn)，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。
2010-12-12
javascript模擬鼠標(biāo)點(diǎn)擊事件原理和實(shí)現(xiàn)方法
本文詳細(xì)介紹了JS模擬鼠標(biāo)點(diǎn)擊事件的原理以及應(yīng)用場景,并提供了模擬鼠標(biāo)左鍵點(diǎn)擊事件、右鍵點(diǎn)擊事件、滾輪事件和移動(dòng)事件的代碼實(shí)現(xiàn),了解JS模擬鼠標(biāo)點(diǎn)擊事件的原理和實(shí)現(xiàn)方法對于開發(fā)人員非常重要,這對于許多面向用戶的web應(yīng)用程序的開發(fā)和測試都具有很重要的意義
2023-09-09
webpack中的代理配置詳解
本文主要介紹了webpack中的代理配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
微信公眾號服務(wù)器驗(yàn)證Token步驟圖解
這篇文章主要介紹了微信公眾號服務(wù)器驗(yàn)證Token步驟圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
實(shí)現(xiàn)div可編輯的常見方法總結(jié)
實(shí)現(xiàn)div可編輯的常見方法總結(jié)...
2007-04-04
利用JS進(jìn)行圖片的切換即特效展示圖片
做網(wǎng)頁時(shí)需要利用JS進(jìn)行特效展示圖片，下面是利用JS簡單制作的圖片的切換，需要的朋友可以了解下
2013-12-12
Javascript中async與await的捕捉錯(cuò)誤詳解
這篇文章主要為大家詳細(xì)介紹了Javascript中async與await的捕捉錯(cuò)誤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法
這篇文章主要介紹了小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04