layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)


 

表格展示神器之一:layui表格

前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap tablelayui table、easyUI table等.... 

博主个人比较倾向于layui,layui极简,却又不失饱满的内在,体积轻盈,组件丰盈。使用简单引用模块便捷,有丰富的扩展功能。

 

layui官网:https://www.layui.com/

bootstrap datatable中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

 

 

目录:

  一、三种渲染表格的方式

  二、在表格中添加编辑等按钮

  三、在表格中添加 表单控件

  四、添加图片展示

  

   最终效果图:

    

  点击图片效果

    

  

   点击编辑

           

 

  一、三种初始化渲染方式

 我先从最简单的初始化表格写起,如果我直接把全部代码帖出来,你们可能会看得头晕

 

1,方法渲染:

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

 

 

var table = layui.table,form = layui.form;layui.use('table', function () {  // 引入 table模块table.render({id:"dataTable",//elem: '#layui_table_id',//指定表格元素url: '/menu/menuList.ajax',  //请求路径cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增,skin: 'line ' //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)//,even: true    //隔行换色,page: true  //开启分页,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。,limit: 10 //每页默认显示的数量,method:'post'  //提交方式
           ,cols: [[{type:'checkbox'}, //开启多选框{field: 'menuId', //json对应的keytitle: 'ID',   //列名sort: true   // 默认为 false,true为开启排序}]]});});    

 java后台返回的json数据格式

{
code: 0,
count: 8, //总行数
data: [,…], //表格数据
msg: ""
}

 2,自动渲染方法 (以下代码由官方提供,自动渲染的方法 适合复杂行头时使用,一般建议使用上面的方法渲染)

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"><thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th><th lay-data="{field:'username', width:80}">用户名</th><th lay-data="{field:'sex', width:80, sort: true}">性别</th><th lay-data="{field:'city'}">城市</th><th lay-data="{field:'sign'}">签名</th><th lay-data="{field:'experience', sort: true}">积分</th><th lay-data="{field:'score', sort: true}">评分</th><th lay-data="{field:'classify'}">职业</th><th lay-data="{field:'wealth', sort: true}">财富</th></tr></thead>
</table>

 

 

  二,如何添加编辑按钮

  

var table = layui.table,form = layui.form;layui.use('table', function () {  // 引入 table模块
        table.render({id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素url: '/menu/menuList.ajax',  //请求路径cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增,skin: 'line ' //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)//,even: true    //隔行换色,page: true  //开启分页,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。,limit: 10 //每页默认显示的数量,method:'post'  //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件//调用示例layer.photos({//点击图片弹出photos: '.layer-photos-demo',anim: 1 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    });//如果是异步请求数据方式,res即为你接口返回的信息。//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);//得到当前页码
    console.log(curr);//得到数据总量
    console.log(count);
},cols: [[ {type:'checkbox'}, //开启多选框  { field: 'menuId', //json对应的key title: 'ID', //列名 sort: true // 默认为 false,true为开启排序  },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //绑定按钮组 } ]] }); });
//监听工具条
table.on('tool(dataTable)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"var data = obj.data //获得当前行数据,layEvent = obj.event; //获得 lay-event 对应的值if(layEvent === 'detail'){layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
        layer.msg(data.attrId);} else if(layEvent === 'del'){layer.msg('删除' data.menuId);console.log(table)} else if(layEvent === 'edit'){});}
});

 

 

<script type="text/html" id="barDemo">  // id和toolbar 属性绑定<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

 

 

三,如何在表格中添加表单组件(以下我将推荐2种)

  

  1,使用模块引擎的方式(这种方法比较麻烦,个人推荐第二种)

  

<!--  是否显示 -->
<script type="text/html" id="isShow">  // 请注意 id之间的关联{{#  if(d.menuDisplay === 'Y'){ }}<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>{{#  } else { }}<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >{{#  } }}
</script>

 

{   //在表格对象cols属性中添加field: 'menuDisplay',  /title: '是否显示',templet: '#isShow', //模板关联以上定义的unresize: true,filter: "isShow",sort: false
}

 

 

  2,使用 函数的方法

 

{field: 'menuDisplay',title: '是否显示',unresize: true,filter: "isShow",sort: false,templet: function (d) {if (d.menuDisplay == ‘Y’) {return` <input type = "checkbox"name = "menuDisplay"value = "` d.menuId `"lay - skin = "switch"lay - text = "显示|隐藏"lay - filter = "isShow" > `;} else {return` <input type = "checkbox"name = "menuDisplay"value = "` d.menuId `"lay - skin = "switch"lay - text = "显示|隐藏"lay - filter = "isShow"checked > `;}}
}

 

 

 

四、 展示图片

        {field: 'img',title: '图片',unresize: true,sort: false,//style:'height:100px;',templet:function (d) {return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;"><img layer-pid="图片id,可以不写"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名"></div>`;
                    }}

 

 当表格数据加载完后再绑定属性

 

 

 代码以提交码云:https://gitee.com/gezi441/layui-table

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h0h2kab&title=layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法设计与分析_算法设计与分析(第2版)第2章分治策略回顾

YI时间&#xff5c;外刊&#xff5c;MM-DFW&#xff5c;机器学习系列点击上方蓝字&#xff0c;关注给你写干货的松子茶分治策略是通用算法设计技术之一&#xff0c;很多有效的算法是它的特殊实现,顾名思义就是分而治之。一个问题能够用分治法求解的要素是问题能够按照某种方式分…

2017-2018-1 Java演绎法 第三周 作业

团队任务&#xff1a;团队展示与选题团队展示 队员学号及姓名 学号  姓名  主要负责工作  20162315  马军  日常统计&#xff0c;项目部分代码  20162316  刘诚昊  项目部分代码&#xff0c;代码质量测试  20162317  袁逸灏  组长 项目 主要 代码  201…

linux开机启动roscore,树莓派ubuntuMate系统中开机自启动ROS的launch文件

0x00 为何需要开机自启动launch文件在ROS开发后期阶段由于功能已经趋于稳定&#xff0c;因此就需要系统在一上电启动后就自动把ROS下的各节点程序加载运行&#xff0c;这样就省去了我们还得手动输入roslaunch命令来加载bringup的launch文件的操作。经过我的实际测试目前有两种方…

Oracle ADF移动世界! 你好!

您好&#xff0c;ADF Mobile&#xff0c;世界&#xff01; 您可能已经知道... ADF Mobile在这里&#xff01; 以下是一些链接&#xff0c;这些链接会让您有宾至如归的感觉。 ADF Mobile主页&#xff1a; http://www.oracle.com/technetwork/developer-tools/adf/overview/ad…

Bootstrap里的文件分别代表什么意思及其引用方法

关于Bootstrap打包的文件分别代表什么意思&#xff0c;官网也没有给出一个明确的解释&#xff0c;在网上查了一些资料&#xff0c;总价归纳了如下&#xff1a; bootstrap/ <!--主目录--> ├── css/ <!--CSS样式文件--> │ ├── bootstrap.css <!…

css 小知识点:inline/inline-block/line-height

inline: 此元素会被显示为内联元素&#xff0c;元素前后没有换行符。因此&#xff1a;无法设置宽度和高度&#xff5e; inline-block: 行内块元素。元素前后没有换行符&#xff08;CSS2.1 新增的值&#xff09; 用通俗的话讲&#xff0c;就是不独占一行的块级元素。然后拥有…

Linux外域递送邮件,求助:外域邮件发送不了 (页 1) - iRedMail 技术支持 - iRedMail 开源邮件服务解决方案...

必填信息。没有填写将不予回复 - iRedMail 版本号&#xff1a; v0.9.5-1- 使用哪个数据库存储用户帐号(OpenLDAP&#xff0c;MySQL&#xff0c;PostgreSQL)&#xff1a; v0.6.1 (MySQL)- 使用的 Linux/BSD 发行版名称及版本号&#xff1a;CentOS 6.5- 与您的问题相关的日志…

协同过滤算法_机器学习 | 简介推荐场景中的协同过滤算法,以及SVD的使用

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是机器学习专题的第29篇文章&#xff0c;我们来聊聊SVD在上古时期的推荐场景当中的应用。推荐的背后逻辑有没有思考过一个问题&#xff0c;当我们在淘宝或者是某东这类电商网站购物的时候…

JavaOne 2012:观察与印象

当我坐在旧金山国际机场等待登上飞机返回家中时&#xff0c;我一次又一次令人满意但累人的JavaOne&#xff08;2012&#xff09;体验&#xff0c;我正在开始写这篇特别的博客文章。 自上周日的主题演讲以来&#xff0c;在会议上疯狂地撰写了约30篇博客文章之后&#xff0c;很难…

less学习三---父选择器

引用父选择器需要用到“&”符号 &#xff06;运算符表示嵌套规则的父选择器&#xff0c;并且在修改类或伪类选择器的应用中非常普遍 ul{li{&:nth-child(2) a {color: red;&:hover {color: yellow;}}} }//编译为 ul li:nth-child(2) a {color: red; } ul li:nth-ch…

SaltStack匹配target-第六篇

练习内容 Salt远程执行中目标选择常用的模式 1.通配符匹配 2.正则表达式匹配 3.List支持 4.Grains匹配 5.IP地址匹配 6.混合匹配 7.Node groups 远程执行格式 target就是我们要选择的minion salt <target> <function> [arguments] 一&#xff0c;通配符匹配&#x…

heartbeat+drbd+mysql

配置heartbeat接管drbd服务 配置heartbeat接管drbd服务&#xff08;延续之前heartbeat及drbd博文内容&#xff09;1、两端确认都建立好 /data目录2、关闭drbd服务,关闭heartbeat服务&#xff0c;自启动全部关闭3、两端配置haresourcesdata-1-1 IPaddr::192.168.0.191/24/eth0 d…

在linux下dns绑定域名,在Linux系统中,使用Bind搭建DNS域名解析服务

DNS域名解析服务(DomainNameSystem)是用于解析域名与IP地址对应关系的服务作用为维护着一个地址数据库&#xff0c;记录着各种主机域名与IP地址的对应关系&#xff0c;以便为客户提供正向或反向的地址查询服务&#xff0c;即正向解析与反向解析。正向解析&#xff1a;将制定的域…

用imspost制作catia后处理_新产品开发需要做原型验证,怎么样成型制作才省钱?...

有一天一个朋友拿着一个公仔机器人的项目过来找我&#xff0c;说做200套外壳&#xff0c;问我如何省成本用最少的钱做好产品。类似一下图片的机器人一样。组装起来高200mm左右&#xff0c;内外配件总共是62个。我当时看到产品小估算重量也很轻&#xff0c;就跟他说用3D打印有快…

如何把大段文字转为带html标签的文字

开发网页的时候&#xff0c;有时候会遇到大段的隐私声明&#xff0c;用户协议等等&#xff0c;我们呀要复制粘贴展示出来&#xff0c;必须加大量的p标签&#xff0c;h1,h2&#xff0c;空格符&#xff0c;br标签&#xff0c;这对我们来说无疑是泪崩的&#xff0c;有个很好的办法…

使用MongoDB进行事件流

MongoDB是一个非常出色的“ NoSQL”数据库&#xff0c;具有广泛的应用程序。 在SoftwareMill开发的一个项目中&#xff0c;我们将其用作复制的事件存储&#xff0c;然后将事件从事件流传输到其他组件。 介绍 基本思想非常简单&#xff08;另请参阅Martin Fowler关于Event Sou…

hihocoder-Week173--A Game

hihocoder-Week173--A Game A Game 时间限制:10000ms单点时限:1000ms内存限制:256MB描述 Little Hi and Little Ho are playing a game. There is an integer array in front of them. They take turns (Little Ho goes first) to select a number from either the beginning …

php打乱数组二维数组、多维数组

//这个是针对二维数组的!下面针对多维数组的乱序方法<?php function shuffle_assoc($list) { if (!is_array($list)) return $list; $keys array_keys($list); shuffle($keys); $random array(); foreach ($keys as $key) $random[$key] $list[$key]; ret…

明明一样的程序为啥有的系统就报错有的就正常运行呢_SurfaceGo Android系统折腾笔记...

Surface Go平板在Win10系统下的表现我认为还是比较出色的&#xff0c;x86架构CPU意味着不考虑性能的情况下&#xff0c;台式机上能跑的程序&#xff0c;这台平板也能跑&#xff0c;新Galgame一出就能直接安装上躺床上玩&#xff0c;妙哉。但遗憾的是现实世界还是要考虑性能问题…

c语言实训作业总结,c语言程序设计上机实践心得报告

c语言程序设计上机实践心得报告 班级:11 电信 2 姓名:莫金波 学号:1107032242012.12.28 惠州学院 HUIZHOU UNIVERSITY 我们专业的学生在专业老师的带领下进行了 c 语言设计基础教程的 实践学习。在这之前&#xff0c;我们已经对 c 语言这门课程学习了差不多一 个学期&#xff0…