使用layui渲染table数据表格的实例代码资源-CSDN文库

6 浏览量 2020-12-29 21:12:45 上传评论收藏 89KB PDF 举报

资源推荐

资源详情

资源评论

使用使用layui 渲染渲染table数据表格的实例代码数据表格的实例代码

先上最终效果图：先上最终效果图：

1，引入，引入layui的的css和和js文件文件

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

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

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

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

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38656400

粉丝: 2
资源: 917

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip