Layui数据表格的引用

对于一些编程插件的引用，相信大多数的编程人员都不会感觉到陌生，因为在对程序开发和项目开发的过程中往往都会需要引用到插件，那么至于插件呢，也有很多种，比如：

bootstrap
jquery
layui

当然，插件是有很多种的，上面几种只是比较常见的插件而已，那么对于插件，我们如何引用呢？

对于引用插件，我们就引用layui插件里面的表格来进行说明：

第一步：最主要的第一步就是先从网上下载插件文件，

第二步：插件的文件下载完成之后，我们就把它添加到我们的代码里面，如下图所示

这插件一般有2种，第一种就是css插件，这css的插件，我们一般是引用在页面标题下面，至于另外一种，那就是js插件，这种的插件我们一般是引用在结束body的上面，当然，也可以引用在css插件的那个地方，它们引用的位置是不固定的，

第三步：当插件引用完成之后，我们就开始搭建页面，等页面搭建完成，或者已经搭建好了的页面，我们找到需要添加引用layui插件数据表格的那个table标签的ID名称。

第四部：找到需要添加引用layui插件数据表格的那个table标签的ID名称之后，我们就开始创建脚本，亦或者在页面上直接创建一个script的脚本标签，如下图

第五步：当脚本创建完成之后，就可以在里面进行编写代码，调用插件的功能到程序或者项目上，比如我们现在是要进行layui插件里的数据表格的引用，首先我们得在刚刚创建的js脚本里面，先自定义一个layui的数据表格的名称，然后再定义一个layui的模块，以便全局都可以使用这个插件，如下图：

第六步：按照layui文档里面的数据表格的使用方法，进行使用，首先进行layui数据表格的渲染,比如说，我们需要引用layui表格的那个table的那个元素的ID名称就是：FlightInformation，那么引用的它的代码如下：

layui.use(['layer', 'table'], function () {

layer = layui.layer, layuiTable = layui.table;

TabAchievementInfor = layuiTable.render({

elem: "#FlightInformation",//table的ID HTML元素的ID

url: "/AirTicketMarket/OnLineBook/SeekFlight",

cols: [[

{ title: '航班ID', field: 'FlightID', align: 'center' },

{ title: '航空公司', field: 'Airline', align: 'center' },

{ title: '航班', field: 'FlightNumber', align: 'center' },

{ title: '机型', field: 'FlightType', align: 'center' },

{ title: '起飞机场', field: 'DepartCity', align: 'center' },

{ title: '降落机场', field: 'ArriveCity', align: 'center' },

{ title: '起飞时间', field: 'DepartTime', align: 'center' },

{ title: '降落时间', field: 'ArriveTime', align: 'center' },

{ title: '是否经停', field: 'Transit', align: 'center' },

{ title: '是否配餐', field: 'Catering', align: 'center' },

{ title: '头等舱', field: 'Ffares', align: 'center' },

{ title: '公务舱', field: 'Cfares', align: 'center' },

{ title: '经济舱', field: 'Yfares', align: 'center' },

{ title: '最低价', field: 'Vfares', align: 'center' },

{ title: '更多', templet: setOperatea, align: 'center' },

]],

page: {

limit: 5,//指定每页显示的条数

limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

}//开启分页

});

上面整个代码都是进行表格的渲染，接下来解析一下上面的参数，首先第一第二行都是固定的，第三行也可以说是固定的，因为第三行的=符号前面的是表格的名称，也就是刚刚创建完脚本就定义好的表格名称TabAchievementInfor，第四行参数elem:后面填写的是需要存放表格的table标签的ID，也就是表格容器的ID，第五行url:后面填写的是表格数据的来源的路径，然后到第六行cols：后面的[[]]符号里面填写的是数据表格表头的样式，至于它的表头样式，是很丰富的，这里我就不做详细介绍，需要了解的可以去layui文档的数据表格的表头样式一览表里面进行了解，我现在只介绍常用的，也就是上面的几种，首先是title：‘’它是用于设置表头表头名称的，field:’’它是用于设定字段名称，对于表格来说，字段名的设定是非常有重要性的，因为它是表格数据列的唯一标识，至于后面的align:’’它是用于让每一个数据格子里面的文字进行居中显示的，接下来再到下面的page: {}它是用于让表格的数据进行分页的，limit：后面的数值代表的是每一个页显示的数据的条数，而limits:的后面是一个类似于下拉框的选项功能，可以对里面的数字进行选择，每一个数字代表的是每一个页显示的条数，这里是用于选择每页显示的条数。

这样一来，整个的layui的数据表格就完成了引用。

Layui数据表格的引用相关推荐

layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
Layui数据表格的绑定
<Layui数据表格的绑定> 开发工具与关键技术:Visual Studio /.NET /layui插件作者:肖春庆撰写时间:2019年06月17日在我们使用软件的过程当中有着许多 ...
在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 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息 tableCols = [[{field: 'id', title: 'ID', width:80,align:'cent ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题样式(layui.css)文件中增加: .layui-table-cell .layui-form-checkbox[lay-skin="primar ...

Layui数据表格的引用

Layui数据表格的引用相关推荐

最新文章

热门文章