iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >layui-table如何对返回的数据进行转变显示
  • 222
分享到

layui-table如何对返回的数据进行转变显示

2024-04-02 19:04:59 222人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关layui-table如何对返回的数据进行转变显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在使用layui表格时,在ajax请求回来的数

这篇文章将为大家详细讲解有关layui-table如何对返回的数据进行转变显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示

1.比如性别sex这个字段,后台可能返回的是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.比如后台返回了一个时间段是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名就对应你们表格里的字段,添加的自定工具条,如下图

layui-table如何对返回的数据进行转变显示

3.在一个,表格中有很多按钮(修改,删除,等等),再做不同权限登录时,对应的角色要显示对应的按钮

从后台获取按钮权限

var PAGE_BUTTON_AUTH = {
  "add": false,
  "edit": false,
  "delete": false
};
$(function () {
  //按钮权限验证
  var url = window.location.href.replace("//", "");
  var relUrl = url.substring(url.lastIndexOf("/") + 1);
  //去掉参数部分
  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如何对返回的数据进行转变显示”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: layui-table如何对返回的数据进行转变显示

本文链接: https://www.lsjlt.com/news/68138.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • layui-table如何对返回的数据进行转变显示
    这篇文章将为大家详细讲解有关layui-table如何对返回的数据进行转变显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在使用layui表格时,在ajax请求回来的数...
    99+
    2024-04-02
  • layui如何对table中的数据进行判断(0、1)转换为提示信息
    小编给大家分享一下layui如何对table中的数据进行判断(0、1)转换为提示信息,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • layui如何实现对工具条进行选择性的显示功能
    这篇文章主要介绍layui如何实现对工具条进行选择性的显示功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!layui工具栏根据状态动态显示代码<script typ...
    99+
    2024-04-02
  • 详解SpringMVC如何进行数据回显
    基本介绍数据回显:模型数据导向视图(模型数据 ---> Controller ---> 视图)说明:SpringMVC在调用方法前会创建一个隐含的模型对象,作为模型数据的存储容器(隐含模型)一、ModelAndView@Requ...
    99+
    2023-05-31
    springmvc 数据回显 如何进行
  • 如何解决Layui数据表格显示无数据提示的问题
    这篇文章主要为大家展示了“如何解决Layui数据表格显示无数据提示的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Layui数据表格显示无数据提示的...
    99+
    2024-04-02
  • Layui中的table组件如何进行初始化加载数据、数据刷新表格、传参数
    这篇文章给大家分享的是有关Layui中的table组件如何进行初始化加载数据、数据刷新表格、传参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。出现的问题:1、使用 Layui ...
    99+
    2024-04-02
  • 使用mybatis进行数据插入时如何返回自增的id
    如何解决问题 具体问题解决办法注意点 具体问题 当我们存储数据时,有时候id是选择让数据库自增的 。但前端如果需要当前添加数据的id时,我们在代码上就无法返回了。 解决办法 在 MyBatis 中,可以通过配置来确保数据库操...
    99+
    2023-08-21
    mybatis java 数据库
  • 关于vue二进制转图片显示问题后端返回的是byte[]数组
    目录二进制转图片显示 后端返回的是byte[]数组1.二进制转图片显示问题2.byte[]数组可显示关于返回二进制图片的处理二进制转图片显示 后端返回的是byte[]数组 1.二进制...
    99+
    2024-04-02
  • Win10如何对扩展显示屏进行操作的
    这篇文章主要讲解了“Win10如何对扩展显示屏进行操作的”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Win10如何对扩展显示屏进行操作的”吧!具体方法:驱动安装后,电脑的任务栏会出现一个电...
    99+
    2023-06-27
  • 如何实现基于layui下拉列表的数据回显方法
    小编给大家分享一下如何实现基于layui下拉列表的数据回显方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!静态网页+layui...
    99+
    2024-04-02
  • JavaScript什么时候会对变量的数据类型进行转换
    小编给大家分享一下JavaScript什么时候会对变量的数据类型进行转换,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般存在四...
    99+
    2024-04-02
  • 如何解决layui数据表格Date日期格式的回显Object的问题
    这篇文章主要为大家展示了“如何解决layui数据表格Date日期格式的回显Object的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决layui数据...
    99+
    2024-04-02
  • 如何解决layui table表单提示数据接口请求异常的问题
    这篇文章给大家分享的是有关如何解决layui table表单提示数据接口请求异常的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题一:直接拿别人的文件放在本地打开如下图原因...
    99+
    2024-04-02
  • vue如何将后台返回的数字转换成对应的文字
    目录将后台返回的数字转换成对应的文字下面跟大家分享一下我的方法vue数字转汉字效果如图将后台返回的数字转换成对应的文字 今天遇到一个问题就是性别一栏后台返回我的是数字,但是前端展示的...
    99+
    2022-11-13
    vue后台返回数字 数字转换文字 vue数字转换文字
  • vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)
    目录vue项目中字符串换行显示处理方法踩坑记录(记得抽空瞄一眼,很重要!) vue字符串换行问题及vue路由跳转传参总结vue项目中字符串换行显示 在vue项目中,请求后端...
    99+
    2023-05-17
    vue字符串 vue字符串换行 vue字符串换行显示
  • ASP 中如何对响应数组进行有效的数据类型转换?
    在 ASP 中,响应数组是一种非常常见的数据结构。它可以用于存储多个值,并且可以方便地进行访问和操作。然而,在处理响应数组时,我们有时需要将数组中的数据类型进行转换,以便更好地满足我们的需求。本文将介绍 ASP 中如何对响应数组进行有效的...
    99+
    2023-09-10
    数据类型 响应 数组
  • 如何使用 STL 函数对象来进行数据验证和转换?
    使用 stl 函数对象可简化数据验证和转换。验证函数对象返回布尔值,表示数据是否有效;转换函数对象返回新值。这些函数对象可应用于数据容器,实现数据验证和转换,例如验证是否大于 10 并将...
    99+
    2024-04-25
    stl 函数对象
  • Facebook是如何对大数据进行分析的
    这篇文章主要介绍“Facebook是如何对大数据进行分析的”,在日常操作中,相信很多人在Facebook是如何对大数据进行分析的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Facebook是如何对大数据进行...
    99+
    2023-06-10
  • 如何解决linux wget下载进度条变成多行显示的问题
    如何解决linux wget下载进度条变成多行显示的问题,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在之前为了 解决Putty客户端连接到CentOS之后显示乱码 的问题...
    99+
    2023-06-13
  • 前端如何更好的展示后端返回的十万条数据
    目录前置工作后端搭建前端页面直接渲染setTimeout分页渲染requestAnimationFrame文档碎片 + requestAnimationFrame懒加载今天跟大家来唠...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作