layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例
在使用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è)參考,也希望大家多多支持腳本之家。
- 解決layui table表單提示數(shù)據(jù)接口請求異常的問題
- 解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題
- layui異步加載table表中某一列數(shù)據(jù)的例子
- layui-table表復(fù)選框勾選的所有行數(shù)據(jù)獲取的例子
- layui 對table中的數(shù)據(jù)進(jìn)行轉(zhuǎn)義的實(shí)例
- layui table數(shù)據(jù)修改的回顯方法
- 解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題
- layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁功能(ajax異步)
- 解決layui中table異步數(shù)據(jù)請求不支持自定義返回?cái)?shù)據(jù)格式的問題
- layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子
相關(guān)文章
javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼,需要的朋友可以參考下2014-02-02了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面小編就和大家一起來學(xué)習(xí)下吧2019-06-06postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解
Postman是一款功能強(qiáng)大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁HTTP請求的Chrome插件。這篇文章主要給大家介紹postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解,感興趣的朋友一起看看吧2019-04-04微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能,結(jié)合實(shí)例形式分析了微信小程序wx.setClipboardData接口實(shí)現(xiàn)操作粘貼板進(jìn)行復(fù)制操作的相關(guān)使用技巧,需要的朋友可以參考下2019-04-04