使用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 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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
PHP积分兑换接口实例
2015/02/09 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
金智子午JAVA面试题
2015/09/04 面试题
信息学院毕业生自荐信范文
2014/03/04 职场文书
保密承诺书范文
2014/03/27 职场文书
保护环境倡议书300字
2014/05/19 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android