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/

 

 

目录:

  一、三种渲染表格的方式

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

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

  四、添加图片展示

 

最终效果图:

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

点击图片效果

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

 

点击编辑

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

 

一、三种初始化渲染方式

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

 

1,方法渲染:

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

 

java后台返回的json数据格式

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

 

 

 

  二,如何添加编辑按钮

 

 

 

 

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

 

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

 

 

 

2,使用 函数的方法

 

 

 

四、 展示图片

 

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

 

 

觉得好的话记得打赏赞助小灰灰哦,小灰灰灰更有动力的,谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0


    Warning: A non-numeric value encountered in /www/wwwroot/xiaohuihui.net.cn/wp-content/themes/begin/inc/function/comment-template.php on line 22
    • avatar shuodatong 1

      你的博客模版很漂亮,技术实力派