使用layui渲染table数据表格(实例)


本文摘自PHP中文网,作者尚,侵删。

table 模块是layui框架最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。

支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。

尽管如此,我们仍将对其进行完善,在控制代码量和性能的前提下,不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

layui渲染table数据表格示例:

1、引入layui的css和js文件

1

2

link rel="stylesheet" href="lib/layui/css/layui.css">

<script src="lib/layui/layui.js"></script>

2、在页面放置一个table元素

1

<table class="layui-hide" id="test" lay-filter='test3'></table>

3、通过 table.render() 方法指定该容器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

layui.use('table', function(){

            var table = layui.table;

//            var playerName;

//            if(item != undefined) {

//                playerName=item;

//            }

            table.render({

                elem: '#test'  table 容器的选择器或 DOM

                ,url:'http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds'

                ,method:'post'

                ,where:{tourId:tourIds,rounds:rounds,playerName:item}

                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

                ,cols: [[

                    {field:'tourPlayerId', width:80, title: 'ID1', sort: true}

                    ,{field:'playerName', width:80, title: '姓名'}

                    ,{field:'hole1',  title: '1',edit: 'text'}

                    ,{field:'hole2', title: '2',edit: 'text'}

                    ,{field:'hole3', title: '3',edit: 'text'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增

                    ,{field:'hole4', title: '4',edit: 'text'}

                    ,{field:'hole5', title: '5',edit: 'text'}

                    ,{field:'hole6', title: '6',edit: 'text'}

                    ,{field:'hole7', title: '7',edit: 'text'}

                    ,{field:'hole8', title: '8',edit: 'text'}

                    ,{field:'hole9', title: '9',edit: 'text'}

                    ,{field:'hole10', title: '10',edit: 'text'}

                    ,{field:'hole11', title: '11',edit: 'text'}

                    ,{field:'hole12', title: '12',edit: 'text'}

                    ,{field:'hole13', title: '13',edit: 'text'}

                    ,{field:'hole14', title: '14',edit: 'text'}

                    ,{field:'hole15', title: '15',edit: 'text'}

                    ,{field:'hole16', title: '16',edit: 'text'}

                    ,{field:'hole17', title: '17',edit: 'text'}

                    ,{field:'hole18', title: '18',edit: 'text'}

                    ,{field:'add', title: '操作', width:177,toolbar:"#barDemo"}

4、这个时候你的页面差不多就是以下这个样子了

阅读剩余部分

相关阅读 >>

如何解决layui时间控件闪退问题

layui是软件吗

layui中如何获取表格数据

html的table鼠标拖拽排序该如何实现

layui底层方法介绍

layui怎么关闭弹出层

layui组件有哪些

bootstrap table 查询实现

layui框架常用输入框介绍

layui使用iconfont的方法介绍

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...