怎么利用layui美化table数据表格


当前第2页 返回上一页

1

2

3

4

5

6

7

response: {

    statusName: 'code' //数据状态的字段名称,默认:code

    ,statusCode: 200 //成功的状态码,默认:0

    ,msgName: 'msg' //状态信息的字段名称,默认:msg

    ,countName: 'count' //数据总数的字段名称,默认:count

    ,dataName: 'data' //数据列表的字段名称,默认:data

}

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

35

36

37

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"}

                ]],

            });

            });

这个时候表格一般已经是出来了,记得,后台提供的数据格式,和layui提供的一样最好,这一点要切记,这一点大家可以去官网上看下,不做说明。

相关推荐:layui

以上就是怎么利用layui美化table数据表格的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html中的table详解

layui和easyui的区别是什么?

layui数据表格url是什么

layui输入框如何设置禁止输入

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

layui下拉选中的值怎么回填

layui怎么加图标

layui怎么弹出form

layui自定义字体图标图文教程

html里table是什么

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




打赏

取消

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

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

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

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

评论

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