使用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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
js css+html实现简单的日历
Jul 14 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
js 数组 fill() 填充方法
Nov 02 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实现学生管理系统
2020/03/21 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
品质主管岗位职责
2014/03/16 职场文书
文明生主要事迹
2014/05/25 职场文书
领导干部保密承诺书
2014/08/30 职场文书
领导班子整改措施
2014/10/24 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS