layui数据表格的使用

（作者：郭鑫撰写时间：2019年5月13号）

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常方便，在开发的时候会经常用到，特别是里面的数据表格，既方便又不失美观。用这个数据表格就四个步骤：“引用插件——创建一个装表格的“画板”——“画”表格——查数据，放到数据表格”。

第一步：引用；

引用一共要引用两个插件，一个是构建CSS样式的css文件，一个是表格功能的JS文件，引用如下

CSS引用：<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

JS 引用：<script src="~/Plugins/layui/layui.js"></script>

第二步：在页面上构建一个盒子，存放接下来要生成的表格；

就使用一个table标签存放即可，其余两div只是限制一下，在table标签里面还有放有两个内容，一个是Id，一个是lay-filter。Id是为了把数据绑定到数据表格，lay-filter是事件过滤器。可以在很多地方看到看到这个属性，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器。Id值和lay-filter值可以相同也可以不同。

第三步：“画表格”；

画板已经有了，如果想画画的话，那你必须还要有一支画笔才行。首先要定义两个两变量。

LayuiTable是用来加载数据表格模块的，tabOrganization是用来存放表格的

然后在加载事件里面加载layui的数据表格模块，下面就是加载的方法，table为加载的模块名称，加载完成后就放到前面声明好的layuiTable中，以便与接下来的使用。

画笔准备好后就可以开始做表格了，对表格进行初始化。tabOrganization就是前面声明存放表格的变量，layuiTable则是上面加载模块时的存放的变量，render就是初始化表格的方法。

初始化表格的方法里面有一般有三个值，elem、cols、url(或data)。elem是用来绑定存放这个数据表格的容器，就是绑定页面上那个table标签；cols是用来设置表头行数据的；url和data都是用来放数据的，只是用url是要请求控制器查询数据库查询数据，data是直接为表格数据赋值。如果数据多的，还可以使用分页，分页用的是page；page里面有两参数：一个是limit，limit: 10，就是指定每一页显示10条数据；一个是limits:[5,10]，表示的是每页的条数分组，在页面上是可以选择每页的条数的，这就是设置每页分组条数的地方。如果不分组，那就是默认显示10条数据，分页也是每10条数据的往上加。

接着就是表头了，表头的内容放在cols里面，需要用两个中括号包裹着，一般数据表格前面都会有一个单选框或者复选框，然后就是列的序号，接着才是数据的内容。

选择框和序号用的是type，type可选的值有5个，分别是：

normal（常规列，无需设定）

checkbox（复选框列）

radio（单选框列）

numbers（序号列）

space（空列）

内容项用的是field，field是用来设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识，{ field: 'ChineseName', title: '中文名称' },

field后面紧跟着的是放入数据时对应的名称，不再页面上显示；

title是设定需要显示在页面上的字段，就是表头内容了；

主要的就是这几个内容了，其它的还有一些属性，例如

fixed：意思是将该列数据固定，有两个可选值left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。

align：也是固定的意思，不过align是固定文字，即单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）。

hide：隐藏，默认值为false（不隐藏），可设定为true（隐藏）。

width：设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
请结合实际情况，对不同列做不同设定。

效果如下：

这样子表格就做好了，但是也就只是把表格显示了出来，如果要对表格点击操作的话还要对表格进行监听，监听用的就是table标签里面的lay-filter属性值了，也就是这里的tabOrganization。layuiTable依旧是加载的数据表格模块，row监听的是单击事件，rowDouble监听的是双击事件，监听事件里最重要的就是获取到所点击行的数据，获取数据直接就是回调函数的参数点出来就行。obj.data就获取到点击行的数据了。还有就是要让用户知道已经选中了该行，就要给这一行添加一些样式，顺便把选择框选上。这样，一个简单的数据表格就做好了。

layui数据表格的使用相关推荐

在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
如何修改layui数据表格绑定的开关事件？
首先搭建layui 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息 tableCols = [[{field: 'id', title: 'ID', width:80,align:'cent ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题样式(layui.css)文件中增加: .layui-table-cell .layui-form-checkbox[lay-skin="primar ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...

layui数据表格的使用

layui数据表格的使用相关推荐

最新文章

热门文章