Layui数据表格的绑定

《Layui数据表格的绑定》
开发工具与关键技术:Visual Studio /.NET /layui插件
作者:肖春庆
撰写时间:2019年06月17日
在我们使用软件的过程当中有着许多数据在数据库里是需要我们进行数据的绑定,一般应用的是数据表格的绑定。并且显示给用户进行应用等等。我们知道数据在数据库里没有进行应用,那么数据库里的数据就是没有勇武之地,所以要进行数据表格的绑定。在这里我们应用layui致力于通过了分页逻辑,既可以轻松的进行绑定分页,也可以作为页面刷新分页的处理。
指定向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。把layui的插件进行引用。要引用css样式布局的插件,它自定义了一些视图布局,我们可以根据自己的需求进行调用即可,同时它还进行了JS一些功能的封装,同样我们只需要根据自己的需求进行调用。
在这里插入图片描述
把layui一些封装好的插件进行引用后。在中布局数据表格的样式,也就是说,把表格进行布局,并且给出一个唯一的id进行应用。我们需要进行对数据库里的数据查询调用。我们可以根据它的分页逻辑结合自己的需求进行应用。同时我们要注意Layui只负责分页本身的逻辑,具体的数据请求与渲染需要另外去完成。它不仅能应用在一般的异步分页上,还可直接对一段已知数据进行分页展现,更可以取代传统的超链接分页,它是JS动态生成的。
一般应用参数选项和说明。
Elem:指向存放分页的容器,值可以是容器ID、DOM对象。
Count:数据总数。一般通过服务端得到。
Limit :每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
Limits:每页条数的选择项。参数开启了limit,则会出现每页条数的select选择。
Layout:自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、limit(条目选项区域)、refresh(页面刷新区域。)
theme:自定义主题。支持传入:颜色值,或任意普通字符
curr:起始页。一般用于刷新类型的跳页以及跳页。
jump - 切换分页的回调当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)。
要应用数据库里的数据必须把数据库里的数据查询出来才可以进行下一步的操作,同时要对数据进行渲染。声明一个变量使它进行分页操作。现在我们要将数据进行查询,首先声明一张大表然后将需要应用的数据进行关联。自定义一张航班表然后进行使它对应数据库里的航班表。进行多表查询,自定义一张城市表使它对应数据库里的城市表。根据自己的需要将数据进行有自序的排列。把需要应用到的字段进行一一筛选出来,然后进行数据的调用。
通过返回系列中的元素数量来获取数据的总行数。通过之前的查询的数据提供列表进行搜索等等。获取当前的数据页码,给出一页多少行数据内容,确定分页开始序号和分页结束序号。
在这里插入图片描述
声明一个接受数据表格的表格,并且保存layui模块以便全局使用。确定页面载入事件通过方法的渲染,指定视图布局的表格元素选择器。确定视图与控制器关联的数据接口,一般以链接的形式把控制器的数据传递的视图当中。同时可以根据自己的需求应用参数选项选项,比如设定页面显示多少条数据信息,也可以在视图中选择页面显示多少条数据信息,注意插件初始值为显示十条数据。
确定数据接口后就可以把查询出来的数据进行一一接受数据了。通过field获取控制器传递的数据,title确定列表的名称。可以把接收的数据进行样式的布局,比如设定字体的大小和表格的宽高等等。当然你可以自定义一些属性在表格当中,这个时候我们要应用templet:setOperate来自定义属性。setOperate只是一个变量。
在这里插入图片描述
Layui的表格数据绑定的样式可以自己进行布局,它默认是样式和数据库里表格的样式一致。当我们给数据进行表格的绑定的时候,我们就可以应用里面的数据进行调用了。
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值