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…

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

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

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

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

JavaOne 2012:观察与印象

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

用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…

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

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

JavaOne 2012:在JVM上诊断应用程序

值得参加Staffan Larsen &#xff08;Oracle Java Serviceability Architect&#xff09;的演讲“ 在JVM上诊断应用程序 ”&#xff08;Hilton Plaza A / B&#xff09;&#xff0c;只是为了学习Oracle JVM 7随附的新jcmd命令行工具。该演示对我来说是“奖金”&#xff0c;这对…

文档词频矩阵_论文理解:从词嵌入到文档距离

论文作者简介本论文第一作者Matt J. Kusner是牛津大学的副教授&#xff0c;致力于设计适应现实世界问题需求的新机器学习模型&#xff08;例如&#xff0c;fair algorithms, discrete generative models, document distances, privacy, dataset compression, budgeted learning…

c语言主调函数和被调函数,在C语言中,何为主调函数和被调函数,他们之 – 手机爱问...

2007-08-30请详细一些~最好举出例子你好。评价宝宝的标准基本上是&#xff1a;技能>资质>成长因为宝宝的评价是一项 仁者见仁的活儿&#xff0c;但其中有些规律我想是可以具体话的&#xff0c;希望能对你有帮助&#xff1a;1&#xff1a;技能&#xff1a;技能的意义有多大…

学习关于display :flex 布局问题!

很多人不明白这个display:flex是到底是什么东西&#xff0c;如何使用的 。 1.什么是display&#xff1a;flex呢&#xff1f; 答&#xff1a;flex是 flexible box的缩写&#xff0c;意为弹性布局 &#xff1b;这个东西的引入&#xff0c;为盒模型提供了最大的灵活性&#xf…

note同步不及时 one_一辆理想ONE又“跪了”?理想官方紧急发文回应

汽车行业关注(autochat.com.cn)10月16日报道——10月15日&#xff0c;有网友在社交媒体上发布视频&#xff0c;从视频可以看到&#xff0c;一辆理想ONE在遭遇事故后&#xff0c;左前轮脱落在车外疑似断轴,从视频未能判定是断轴引起的事故&#xff0c;还是事故引起的断轴。针对该…

Skywalking 中 Agent 自动同步配置源码解析

文章目录 前言正文实现架构实现模型OAP 同步 ApolloConfigWatcherRegisterConfigChangeWatcher Agent 侧 前言 本文代码 OAP 基于 v9.7&#xff0c;Java Agent 基于 v9.1&#xff0c;配置中心使用 apollo。 看本文需要配合代码“食用”。 正文 Skywalking 中就使用这种模型…

华为5720设置静态路由不通_【干货分享】交换机与路由器在环路中的处理机制了解一下!...

点击蓝字关注我们-今天小盟带大家来讨论一下交换机与路由器在环路中的处理机制-01基础配置1---如图配置路由器各接口地址&#xff0c;AR-2为PC-1的网关路由器2---AR-1配置静态默认路由&#xff0c;下一跳地址指向AR-2&#xff1b;[AR-1]ip route-static 0.0.0.0 0 12.1.1.2AR-2…

VisualVM介绍使用

1 打开VisualVM&#xff08;这个工具放在JDK安装目录的bin目录下&#xff0c;双击jvisualvm.exe即可打开&#xff09;&#xff0c;如下图所示 以VisualVM自身为例&#xff0c;VisualVM本身也是一个java程序&#xff0c;当然也而已用VisualVM来分析 2 概述页面主要显示程序…

Java功能的适用性

Java语言和标准库功能强大&#xff0c;但功能强大&#xff0c; 责任重大 。 一方面看到很多用户代码滥用或滥用稀有的Java功能&#xff0c;另一方面却完全忘记了大多数基本功能之后&#xff0c;我决定撰写此摘要。 这不是每个Java开发人员都应该探索&#xff0c;了解和使用的要…