layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
表格展示神器之一:layui表格
前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table、layui 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数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)相关推荐
- Android App开发基础篇—数据存储(SQLite数据库)
Android App开发基础篇-数据存储(SQLite数据库) 前言:Android中提供了对SQLite数据库的支持.开发人员可以在应用中创建和操作自己的数据库来存储数据,并对数据进行操作. 一. ...
- activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点
背景 Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则.通过封装,让前端校验更方便.具体使用过程中 ...
- Vant-UI 表单组件(Field组件):验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
- Bootstrap之表格,按钮,表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式 本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
- 数据科学指南#基础篇 Matplotlib 入门
今天分享一个数据可视化的库:https://matplotlib.org/ Matplotlib是什么? matplotlib 是一个数据可视化的 Python 库.它提供了 plot(二维关系图)和 ...
- 大数据课程00——[基础篇]大数据学习入门
文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 前置知识 一.编程语言 至少应该掌握一门编程语言,计算机专业的同学大多学的第一门编程语言是 C语言, ...
- asp.net接受表单验证格式后再提交数据_看滴普科技大前端如何玩转el-form-renderer 表单渲染器1.14.0
DEEPEXI 大前端 常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...
- 微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六 前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件 前言 实战篇内容参考: ...
- Bootstrap ——排版、表格、表单、图片、button 学习博客(二)
Bootstrap中的排版 1. 排版 标题部分 文本部分 对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
最新文章
- 如何选购晨检机器人_扫地机器人好不好用?如何选购?答案在这
- C语言经典算法100例-037-给10个数排序
- poj 2299 Ultra-QuickSort
- 电影特效用到什么计算机知识,后期影视特效处理知识普及
- 旋流式沉砂池计算_旋流沉砂池设计方法
- java鸟和翅膀组合关系怎么写_关联、聚合、组合和依赖之间区别
- 【clickhouse】基于ClickHouse的海量数据交互式OLAP分析场景实践
- c# Aspose.Words插入饼图PieChart
- 【CentOS 7笔记43】,防火墙和iptables filter表#
- Python爬虫进阶七之设置ADSL拨号服务器代理
- android后厨打印机漏单,后厨打印丢单解决方案
- 再多的非标电气设计也不怕了
- 魔兽争霸如何修改快捷键
- python3中eval函数用法简介_python3中eval函数用法使用简介
- 2020美容师(初级)模拟考试及美容师(初级)复审模拟考试
- 后台管理使用微信扫码登录(小程序登录)
- Windows远程桌面无法最大化问题
- Flume 数据采集组件
- 【日志】学习笔记之看图玩转LTM
- 商业图表案例3-CO2排放量与人均GDP
热门文章
- redis 能不能监听特定的key失效_php监听redis key失效触发回调事件
- 微服务(Microservices)和服务网格(Service Mesh)架构概念整理
- Html.RenderPartial和Html.Partial在Razor视图中的区别
- 常用个人密码管理软件
- java=====Striing date 转化
- [转]JavaScript面向对象的特性
- Java中使用log4j记录日志
- matlab 的cat函数
- PyMongo--非关系型数据库mongodb入门(一步一步 版)
- GIS工具篇(一):2000大地坐标系转换指南