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


Posted in Javascript onAugust 19, 2018

先上最终效果图:

使用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'}
          ,{field:'hole17', title: '17',edit: 'text'}
          ,{field:'hole18', title: '18',edit: 'text'}
          ,{field:'add', title: '操作', width:177,toolbar:"#barDemo"}
        ]],
      });
      });

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

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

5,正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染

方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,

layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post,

6,容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你妹配置后台数据格式

response: {
  statusName: 'code' //数据状态的字段名称,默认:code
  ,statusCode: 200 //成功的状态码,默认:0
  ,msgName: 'msg' //状态信息的字段名称,默认:msg
  ,countName: 'count' //数据总数的字段名称,默认:count
  ,dataName: 'data' //数据列表的字段名称,默认:data
}

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

以上这篇使用layui 渲染table数据表格的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
layui获取选中行数据的实例讲解
Aug 19 #Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 #Javascript
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
基于layui数据表格以及传数据的方式
Aug 19 #Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
很好用的PHP数据库类
2009/05/27 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
python matlibplot绘制3D图形
2018/07/02 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
如何基于Python按行合并两个txt
2020/11/03 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
商务英语求职信范文
2015/03/19 职场文书
投诉信回复范文
2015/07/03 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python