- 首先定义两个全局的layui的模块
2.tabAirport用来存放表格初始化后的数据,初始化之后,将数据存放到tabAirport中。
3.function是一个页面加载,然后再去加载layer和table,如图所示:
4.(1)图标一中的tabAirport=layuiTable.render:它是一个执行渲染的将渲染好的表格数据存放到tabAirport中。
(2)SystemMaintenance是区域名称,TCCMaintain是控制器名称,通过这个方式将表格数据传递到控制器中并接收。接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义)
page 代表当前页码、limit 代表每页数据量
(3)cols设置表头,值是一个二维数组,方法渲染方式必填。Numbers是一个序号列。设置表头的序号如:1,2,3,4等。
(4)airportID是容器唯一的id,id是对表格的数据操作方法上必要的传递条件,它是表格容器的索引。
hide: 是否初始化隐藏列,默认为false.
(5)field:设定字段名,字段名的设定非常重要,和表格数据列的唯一标识,看图片中的第五个注释。
Width:设定容器的宽度,table容器的默认宽度是跟随他的父元素铺满,可以去设定一个固定的值,会自动出现横向滚动条。
(6)图片注释六中标注着自定义列,自定列是去设置一些删除,修改,查看的按钮的。
(7)elem:指定原始table容器的选择或DOM,方法渲染方式必须要写的
示例:elem:“#tabAirport”,
Page:开启分页,代表当前的页码。
Limits:代表的是每页显示的条数,默认是10,可自己定义。
(1)这里是控制器部分的一个表查询与表的分页。Public:修饰符,ActionResult:返回数据,SelectAirport:方法,将视图的数据传递到这里。括号内LayuiTablePage的是一个分页所需要的实体类,用存放一些实体。layuiTablePage:声明的对象。
List:代表的是一个列表,要指定一个泛型 示例:List<S_Airport>
(2)Orderby是序号的一个排序,在删除当前的一条数据时,进行排序,序号不会乱,如:1,2,3,4,5等。
(5)下面是一个单表的查询,所以是直接全部查询了。
(4) 以下两个
跳过前面页数的数据
.Skip(layuiTablePage.GetStartIndex())
查询本页数据的条数
.Take(layuiTablePage.limit)
.ToList:将查询出来的表数据转换成数据列表。返回集合
以下就是查询出数据的总条数。
准备Layui table所需要的数据格式(泛型)
以下就是表格的初始化结果,