Layui—表格-table(重点)

01-16 45670阅读 0评论

温馨提示:

文章最后更新时间2021年01月16日,若内容或图片失效,请留言反馈!

表格-table(重点)

在layui中,使用表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.

表格基础参数

参数类型说明示例值
elemString/DOM指定原始 table 容器的选择器或 DOM,方法渲染方式必填"#demo"
colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
url(等)-异步数据接口相关参数。其中 url 参数为必填项详见异步接口
toolbarString/DOM/Boolean开启表格头部工具栏区域,该参数支持四种类型值:toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: 'xxx' //直接传入工具栏模板字符toolbar: true //仅开启工具栏,不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板注意: 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数false
defaultToolbarArray该参数可自由配置头部工具栏右侧的图标按钮详见头工具栏图标
widthNumber设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。1000
heightNumber/String设定容器高度详见height
cellMinWidthNumber(layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth100
doneFunction数据渲染完的回调。你可以借此做一些其它的操作详见done回调
dataArray直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。[{}, {}, {}, {}, …]
totalRowBoolean是否开启合计行区域。layui 2.4.0 新增false
pageBoolean/Object开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外){theme: '#c00'}
limitNumber每页显示的条数(默认:10)。值务必对应 limits 参数的选项。 注意:优先级低于 page 参数中的 limit 参数30
limitsArray每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数[30,60,90]
loadingBoolean是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式false
titleString定义 table 的大标题(在文件导出等地方会用到)layui 2.4.0 新增"用户表"
textObject自定义文本,如空数据时的异常提示等。注:layui 2.2.5 开始新增。详见自定义文本
autoSortBoolean默认 true,即直接由 table 组件在前端自动处理排序。 若为 false,则需自主排序,通常由服务端直接返回排序好的数据。 注意:该参数为 layui 2.4.4 新增详见监听排序
initSortObject初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。详见初始排序
idString设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从中的 id 参数中获取。test
skin(等)-设定表格各种外观、尺寸等详见表格风格

表头参数

参数类型说明示例值
fieldString设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,其值是JSON数据中keyusername
titleString设定标题名称,显示标题用户名
widthNumber/String设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。200 30%
minWidthNumber局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth100
typeString设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列,layui 2.4.0 新增)numbers(序号列)space(空列)任意一个可选值
LAY_CHECKEDBoolean是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。true
fixedString固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。left(同 true) right
hideBoolean是否初始隐藏列,默认:false。layui 2.4.0 新增true
totalRowBoolean是否开启该列的自动合计功能,默认:false。layui 2.4.0 新增true
totalRowTextString用于显示自定义的合计文本。layui 2.4.0 新增"合计:"
sortBoolean是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此。true
unresizeBoolean是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。false
editString单元格编辑类型(默认不开启)目前只支持:text(输入框)text
eventString自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理任意字符
styleString自定义单元格样式。即传入 CSS 样式background-color: #5FB878; color: #fff;
alignString单元格排列方式。可选值有:left(默认)、center(居中)、right(居右)center
colspanNumber单元格所占列数(默认:1)。一般用于多级表头3
rowspanNumber单元格所占行数(默认:1)。一般用于多级表头2
templetString自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等详见自定义模板
toolbarString行工具栏详见行工具事件

异步数据接口参数

数据的异步请求由以下几个参数组成:

参数名功能
url接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义) page 代表当前页码、limit 代表每页数据量
method接口http请求类型,默认:get
where接口的其它参数。如:where: {token: 'sasasas', id: 123}
contentType发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
headers接口的请求头。如:headers: {token: 'sasasas'}
parseData数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配. img
request用于对分页请求的参数:page、limit重新设定名称,如:
response如果你想重新规定返回的数据格式,那么可以借助 response 参数,如: img

在layui中,渲染表格存在两种方式:

方式一:自动渲染

所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。你需要关注的是以下三点:

  1. 带有 标签。

  2. *对标签设置属性 *lay-data=""* 用于配置一些基础参数

  3. 在标签中设置属性*lay-data=""*用于配置表头信息

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=UTF-8>
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
      <!-- 自动渲染 -->
      <!-- lay-data属性配置基础参数信息 -->
      <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
          <thead>
              <tr>
                  <th lay-data="{field:'id', width:80}">用户ID</th>
                  <th lay-data="{field:'username', width:120}">用户名称</th>
                  <th lay-data="{field:'sex', width:50}">性别</th>
                  <th lay-data="{field:'city', width:80}">城市</th>
                  <th lay-data="{field:'sign', width:80}">签名</th>
                  <th lay-data="{field:'experience', width:80}">积分</th>
                  <th lay-data="{field:'score', width:80}">评分</th>
                  <th lay-data="{field:'wealth',sort:true}">财富</th>
                  <th lay-data="{field:'classify', width:80}">职业</th>
              </tr>
          </thead>
      </table>
      <!-- 引入layui中JS -->
      <script type=text/javascript src=layui/layui.js></script>
      <script type=text/javascript>
          //初始化layui模块
          layui.use(['jquery', 'table' ], function() {
              var $ = layui.jquery;
              var table = layui.table;
      });
      </script>
    </body>
    </html>

方式二:方法渲染

方法级渲染”将基础参数的设定放在了JS代码中",页面只需要定义一个table,然后在JS中找到table进行绑定.然后将这个table进行数据渲染。

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
  <!-- 自动渲染 -->
  <!-- lay-data属性配置基础参数信息 -->
<!--   <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
      <thead>
          <tr>
              <th lay-data="{field:'id', width:80}">用户ID</th>
              <th lay-data="{field:'username', width:120}">用户名称</th>
              <th lay-data="{field:'sex', width:50}">性别</th>
              <th lay-data="{field:'city', width:80}">城市</th>
              <th lay-data="{field:'sign', width:80}">签名</th>
              <th lay-data="{field:'experience', width:80}">积分</th>
              <th lay-data="{field:'score', width:80}">评分</th>
              <th lay-data="{field:'wealth',sort:true}">财富</th>
              <th lay-data="{field:'classify', width:80}">职业</th>
          </tr>
      </thead>
  </table> -->
  <!-- 方法渲染 -->
  <table class="layui-table" id="myTable"></table>
   
  <script type=text/html id="titleTpl">
      {{# if(d.sex == '男'){ }}
          <font color='red'>GG</font>
      {{# } else if(d.sex == '女') { }}
          <font color='green'>MM</font>
      {{# } }}
  </script>
  <script type=text/html id="headBtns">
      <div class="layui-btn-group">
          <button type=button class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe654;</i>
          </button>
          <button type=button class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe640;</i>
          </button>
      </div>
  </script>
  <script type=text/html id="rowBtns">
      <div class="layui-btn-group">
          <button type=button class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe642;</i>
          </button>
          <button type=button class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe640;</i>
          </button>
      </div>
  </script>
  <!-- 引入layui中JS -->
  <script type=text/javascript src=layui/layui.js></script>
  <script type=text/javascript>
      //初始化layui模块
      layui.use(['jquery', 'table' ], function() {
          var $ = layui.jquery;
          var table = layui.table;
          //渲染表格 且返回该表格对象
          var t = table.render({
              id:'myTableId', //容器对象的唯一标识
              elem:"#myTable",// 绑定的table容器
              url:'data/data01.json',//数据接口
              page:true,//开启分页
              toolbar:"#headBtns",//开启表头工具栏 默认会开启右侧默认工具栏
              defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出   filter 筛选   print 打印    
              width:1200, //设置table容器宽度 只支持像素
              height:520, //设置table容器的高度 只支持像素
              cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
              done:function(res, curr, count){ //表格渲染完成后进行回调
                  console.log(res); // 返回的数据
                  console.log(curr);//当前页
                  console.log(count);//总数据条数
              },
              parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
                  return {
                      "code":rs.code,
                      "msg":rs.msg,
                      "count":rs.count,
                      "data":rs.data.data
                  }
                   
              },
              response: {// 为响应的数据进行别名
                  //statusName: 'status' //规定数据状态的字段名称,默认:code
                  statusCode: 200 //规定成功的状态码,默认:0
                  //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
                  //,countName: 'total' //规定数据总数的字段名称,默认:count
                  //,dataName: 'rows' //规定数据列表的字段名称,默认:data
                } ,
                request: {//对默认请求参数进行别名
                      pageName: 'currentPage', //页码的参数名称,默认:page
                      limitName: 'pageSize' //每页数据量的参数名,默认:limit
              },
              where:{'name':'张三'},
              totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
              limit:20,//每页显示的条数
              limits:[20,50,100],//每页条数的选择项
              loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
              title:'用户表',//在数据导出时 用于设置文件的名称
              text:{
                  none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
                },
              autoSort:false,// 是否前端进行排序
              //skin:'nob', //边框风格
              even:true,// 隔行背景
              cols:[[
                  {type:'checkbox',width:80,LAY_CHECKED:true},
                  {field:'id',title:'ID', width:80},
                  {field:'username',title:'用户名', width:80},
              /* {field:'sex',title:'性别', width:80,templet:function(d){
                      var sex = d.sex;
                      if(sex =='男'){
                          return "<font color='red'>GG</font>";
                      }else if(sex =='女'){
                          return "<font color='green'>MM</font>";
                      }
                  }}, */
                  {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
                  {field:'city',title:'城市', width:80},
                  {field:'sign',title:'签名',edit:'text', width:80},
                  {field:'experience',title:'积分',width:80},
                  {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
                  {field:'wealth',title:'财富',totalRow:true,align:'center'},
                  {field:'classify',title:'职业', width:80,style:'color:red'},
                  {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
              ]] //设置表头
               
          });
  });
  </script>
</body>
</html>

table中的方法

方法名说明
reader()渲染一个table
table.checkStatus('ID')获取选中的行,id为初始化的ID值
row.del()删除行
row.update({username: '123' ,title: 'xxx'});修改行
reload("初始化ID",option)或者初始化对象.reload(option)重载表格

事件监听

事件类型说明
table.on('toolbar('table的lay-filter值')', function(obj){});监听头工具栏事件
table.on('checkbox('table的lay-filter值')', function(obj){});监听复选框选择事件
table.on('edit('table的lay-filter值')', function(obj){});监听单元格编辑事件
table.on('row(test)', function(obj){});监听行单击事件
table.on('tool(test)', function(obj){});监听行工具栏事件

注意: 在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分.

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
  <!-- 自动渲染 -->
  <!-- lay-data属性配置基础参数信息 -->
  <!-- <table lay-data="{url:'data/data01.json',page:true}">
    <thead>
      <tr>
        <th lay-data="{field:'id', width:80}">用户ID</th>
        <th lay-data="{field:'username', width:120}">用户名称</th>
        <th lay-data="{field:'sex', width:50}">性别</th>
        <th lay-data="{field:'city', width:80}">城市</th>
        <th lay-data="{field:'sign', width:80}">签名</th>
        <th lay-data="{field:'experience', width:80}">积分</th>
        <th lay-data="{field:'score', width:80}">评分</th>
        <th lay-data="{field:'wealth',sort:true}">财富</th>
        <th lay-data="{field:'classify', width:80}">职业</th>
      </tr>
    </thead>
  </table> -->
  <input type=text id="name"/>
  
  <button id="searchBtn" >搜索</button>
  <!-- 方法渲染 -->
  <table id="myTable" lay-filter="myTableFilter"></table>
  
  <script type=text/html id="titleTpl">
    {{# if(d.sex == '男'){ }}
      <font color='red'>GG</font>
    {{# } else if(d.sex == '女') { }}
      <font color='green'>MM</font>
    {{# } }}
  </script>
  <script type=text/html id="headBtns">
    <div >
      <button type=button lay-event='add'>
        <i ></i>
      </button>
      <button type=button lay-event='del'>
        <i ></i>
      </button>
    </div>
  </script>
  <script type=text/html id="rowBtns">
    <div >
      <button type=button lay-event='update'>
        <i ></i>
      </button>
      <button type=button lay-event='del'>
        <i ></i>
      </button>
    </div>
  </script>
  <!-- 引入layui中JS -->
  <script type=text/javascript src=layui/layui.js></script>
  <script type=text/javascript>
    //初始化layui模块
    layui.use(['layer','jquery', 'table' ], function() {
      var $ = layui.jquery;
      var table = layui.table;
      var layer = layui.layer;
      // 渲染表格 且返回该表格对象
      var t = table.render({
        id:'myTableId', // 容器对象的唯一标识
        elem:"#myTable",// 绑定的table容器
        url:'data/data01.json',//数据接口
        page:true,// 开启分页
        toolbar:"#headBtns",// 开启表头工具栏 默认会开启右侧默认工具栏
        defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出  filter 筛选  print 打印  
        width:1200, // 设置table容器宽度 只支持像素
        height:520, // 设置table容器的高度 只支持像素
        cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
        done:function(res, curr, count){ //表格渲染完成后进行回调
          console.log(res); // 返回的数据
          console.log(curr);// 当前页
          console.log(count);// 总数据条数
        },
        parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
          return {
            "code":rs.code,
            "msg":rs.msg,
            "count":rs.count,
            "data":rs.data.data
          }
          
        },
        response: {// 为响应的数据进行别名
          //statusName: 'status' //规定数据状态的字段名称,默认:code
          statusCode: 200 //规定成功的状态码,默认:0
          //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
          //,countName: 'total' //规定数据总数的字段名称,默认:count
          //,dataName: 'rows' //规定数据列表的字段名称,默认:data
         } ,
         request: {//对默认请求参数进行别名
            pageName: 'currentPage', //页码的参数名称,默认:page
            limitName: 'pageSize' //每页数据量的参数名,默认:limit
        },
        where:{'name':'张三'},
        totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
        limit:20,//每页显示的条数
        limits:[20,50,100],//每页条数的选择项
        loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
        title:'用户表',//在数据导出时 用于设置文件的名称
        text:{
          none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
         },
        autoSort:false,// 是否前端进行排序
        //skin:'nob', //边框风格
        even:true,// 隔行背景
        cols:[[
          {type:'checkbox',width:80,LAY_CHECKED:false},
          {field:'id',title:'ID', width:80},
          {field:'username',title:'用户名', width:80},
        /* {field:'sex',title:'性别', width:80,templet:function(d){
            var sex = d.sex;
            if(sex =='男'){
              return "<font color='red'>GG</font>";
            }else if(sex =='女'){
              return "<font color='green'>MM</font>";
            }
          }}, */
          {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
          {field:'city',title:'城市', width:80},
          {field:'sign',title:'签名',edit:'text', width:80},
          {field:'experience',title:'积分',width:80},
          {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
          {field:'wealth',title:'财富',totalRow:true,align:'center'},
          {field:'classify',title:'职业', width:80,style:'color:red'},
          {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
        ]] //设置表头
        
      });
      //===========事件监听=============
      //头工具栏事件监听
      table.on('toolbar(myTableFilter)', function(obj){
        console.log(obj);
        //获取事件类型
        var event = obj.event;
        if(event == 'add'){
          console.log("触发添加");
        }else if(event == 'del'){
          console.log("触发删除");
          //获取选中的数据
          var data = table.checkStatus('myTableId');
          console.log(data);//选中的数据
          console.log(data.data);// 选中的具体数据
          console.log(data.isAll);//是否全选  true 全选 false 不是全选
        }
      });
      //==========表格行监听事件 ============
      table.on('tool(myTableFilter)', function(obj){
        console.log(obj);
        //获取事件类型
        var event = obj.event; 
        console.log(event);
        var data = obj.data;// 获取该行数据
        console.log(data);
        if(event == 'update'){
          console.log("修改业务");
          //修改数据
          obj.update({
            'id':'UID',
            'username':'韩梅梅'
          });
        }else if(event == 'del'){
          console.log("删除业务");
          //方法: 删除该行
          obj.del(); 
        }
      });
    //=========复选框选择监听事件=============
    table.on('checkbox(myTableFilter)', function(obj){
      console.log(obj);
      console.log(obj.checked);//复选框的选中状态
      console.log(obj.data);//所在行的数据
    });
    //==========单元格编辑事件============
    table.on('edit(myTableFilter)', function(obj){
      console.log(obj);
      console.log(obj.value);//单元格编辑后的新值
      console.log(obj.data);//修改后的行数据
      console.log(obj.field);//被修改的字段
    });
    //=============行单击事件=============
    table.on('row(myTableFilter)', function(obj){
      console.log(obj);
      console.log(obj.data);
      layer.msg(JSON.stringify(obj.data));
    });
    // 重新渲染表格
    $("#searchBtn").click(function(){
      t.reload({
          where:{
            'name':$("#name").val(),
            'minAge':18,
            'maxAge':30
          }
      })
    });
  });
  </script>
</body>
</html>

文章版权声明:除非注明,否则均为阿灿博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,45670人围观)

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码