layui.table模块/数据表格文档

妖狐艹你老母 2021-09-15 08:04 473阅读 0赞

# Layui\_table模块/数据表格文档  #

> table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

> 创建一个table实例最简单的方式是，在页面放置一个元素 <table id="test"></table>，然后通过 table.render() 方法指定该容器，如下所示：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <link rel="stylesheet" href="/buddhism-heritage2/layui/css/layui.css">
      <script src="/buddhism-heritage2/layui/layui.js" charset="utf-8"></script>
      
    </head>
    <body>  
    <div style="margin-bottom: 5px;">          
    
    
     <table id="demo" lay-filter="demo"></table>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
                   
              
    
    
    <script>
    layui.use('table', function(){
      var table = layui.table;
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 'full-20'
        ,method:'post'
        ,skin:'row'
        ,even:true
     	,page: true //开启分页
        ,url: '/buddhism-heritage2/building/queryAll' //数据接口
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'name', title: '住房名称', width:80}
          ,{field: 'floor', title: '楼层', width:80, sort: true}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'num', title: '数量', width: 177}
          ,{field: 'money', title: '价格', width: 80, sort: true}
          ,{field: 'houseType', title: '房型', width: 80, }
          ,{field: 'size', title: '大小', width: 80, sort: true}
          ,{field: 'purpose', title: '用途'}
          ,{field: 'decorate', title: '装修'}
          ,{field: 'year', title: '楼龄', width: 135, sort: true}
          ,{fixed: 'right', title: '操作', width:178, align:'center', toolbar: '#barDemo'}
        ]]
      });
     
    }); 
    </script>
    
    
    </body>
    </html>

对应的Controller：

@Controller
    @RequestMapping("/building")
    public class BuildingController {
    	@Autowired
    	private BuildingService buildService;
    	private static ConcurrentMap<String, Object> concurrentMap = new ConcurrentHashMap<String,Object>();
    	@RequestMapping("/queryAll")
    	@ResponseBody
    	public  ConcurrentMap<String, Object> queryAllBuilding() {
    		Integer queryCount = buildService.queryCount();
    		List<Building> building = buildService.queryAll();
    		concurrentMap.put("count", queryCount);
    		concurrentMap.put("data", building);
    		concurrentMap.put("code", 0);
    		concurrentMap.put("msg", "成功");
    		return concurrentMap;
    	}
    }

后台传递的参数格式:

{
      code: 200,//数据状态的字段名称，默认：code
      msg: "",//状态信息的字段名称，默认：msg
      count: 1000,//数据总数的字段名称，默认：count
      data: []//数据列表的字段名称，默认：data
    }

![70][]

**三**种渲染方式

在上述“快速使用”的介绍中，你已经初步见证了 table 模块的信手拈来，但其使用方式并不止那一种。我们为了满足各种情况下的需求，对 table 模块做了三种初始化的支持，你可按照个人喜好和实际情况灵活使用。

<table style="border-spacing:0px;margin:10px 0px;width:898px;background-color:rgb(255,255,255);color:rgb(102,102,102);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', '微软雅黑', Tahoma, Arial, sans-serif;font-size:14px;">       
 <thead> 
  <tr style="background-color:rgb(242,242,242);"> 
   <th style="margin:0px;padding:9px 15px;font-weight:400;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">&nbsp;</th> 
   <th style="margin:0px;padding:9px 15px;font-weight:400;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">方式</th> 
   <th style="margin:0px;padding:9px 15px;font-weight:400;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">机制</th> 
   <th style="margin:0px;padding:9px 15px;font-weight:400;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">适用场景</th> 
  </tr> 
 </thead> 
 <tbody style="line-height:22px;"> 
  <tr> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">01.</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;"><a href="http://www.layui.com/doc/modules/table.html#methodRender" style="color:rgb(1,170,237);" rel="nofollow">方法渲染</a></td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">用JS方法的配置完成渲染</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">02.</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;"><a href="http://www.layui.com/doc/modules/table.html#autoRender" style="color:rgb(1,170,237);" rel="nofollow">自动渲染</a></td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">HTML配置，自动渲染</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">无需写过多 JS，可专注于 HTML 表头部分</td> 
  </tr> 
  <tr style="background-color:rgb(242,242,242);"> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">03.</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;"><a href="http://www.layui.com/doc/modules/table.html#parseTable" style="color:rgb(1,170,237);" rel="nofollow">转换静态表格</a></td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">转化一段已有的表格元素</td> 
   <td style="margin:0px;padding:9px 15px;border-color:rgb(230,230,230);min-height:20px;line-height:20px;">无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可</td> 
  </tr> 
 </tbody> 
</table>

1.方法渲染:

var table = layui.table;
     
    //执行渲染
    table.render({
      elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
      ,height: 315 //容器高度
      ,cols: [{}] //设置表头
      //,…… //更多参数参考右侧目录：基本参数选项
    });

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：[表格重载][Link 1]

2.自动渲染

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

1) 带有 class="layui-table" 的 <table> 标签。   
2) 对标签设置属性 lay-data="" 用于配置一些基础参数   
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例

### 3.转换静态表格:    ###

<table lay-filter="demo">
      <thead>
        <tr>
          <th lay-data="{field:'username', width:100}">昵称</th>
          <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
          <th lay-data="{field:'sign'}">签名</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>贤心1</td>
          <td>66</td>
          <td>人生就像是一场修行a</td>
        </tr>
        <tr>
          <td>贤心2</td>
          <td>88</td>
          <td>人生就像是一场修行b</td>
        </tr>
        <tr>
          <td>贤心3</td>
          <td>33</td>
          <td>人生就像是一场修行c</td>
        </tr>
      </tbody>
    </table>

var table = layui.table;
     
    //转换静态表格
    table.init('demo', {
      height: 315 //设置高度
      ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
      //支持所有基础参数
    });

![70 1][]![70 2][]

分页的情况：<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <link rel="stylesheet" href="/buddhism-heritage2/layui/css/layui.css">
      <script src="/buddhism-heritage2/layui/layui.js" charset="utf-8"></script>
      
    </head>
    <body>  
    <div style="margin-bottom: 5px;">          
    
    
     <table id="demo" lay-filter="demo"></table>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
                   
              
    
    
    <script>
    layui.use('table', function(){
      var table = layui.table;
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 'full-20'
        ,method:'post'
        ,skin:'row'
        ,even:true
      ,page: true //开启分页
        ,url: '/buddhism-heritage2/building/queryAll' //数据接口
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'name', title: '住房名称', width:80}
          ,{field: 'floor', title: '楼层', width:80, sort: true}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'num', title: '数量', width: 177}
          ,{field: 'money', title: '价格', width: 80, sort: true}
          ,{field: 'houseType', title: '房型', width: 80, }
          ,{field: 'size', title: '大小', width: 80, sort: true}
          ,{field: 'purpose', title: '用途'}
          ,{field: 'decorate', title: '装修'}
          ,{field: 'year', title: '楼龄', width: 135, sort: true}
          ,{fixed: 'right', title: '操作', width:178, align:'center', toolbar: '#barDemo'}
        ]]
      });
      //监听表格复选框选择
      table.on('checkbox(demo)', function(obj){
        console.log(obj)
      });
      //监听工具条
      table.on('tool(demo)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
          layer.msg('ID：'+ data.id + ' 的查看操作');
        } else if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            obj.del();
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
          layer.alert('编辑行：<br>'+ JSON.stringify(data))
        }
      });
      
      var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        }
        ,getCheckLength: function(){ //获取选中数目
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
          var checkStatus = table.checkStatus('idTest');
          layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
      };
      
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    }); 
    </script>
    
    
    </body>
    </html>

@Controller
    @RequestMapping("/building")
    public class BuildingController {
     
     @Autowired
     private BuildingService buildService;
     
     private static ConcurrentMap<String, Object> concurrentMap = new ConcurrentHashMap<String,Object>();
     
     @RequestMapping("/queryAll")
     @ResponseBody
     public  ConcurrentMap<String, Object> queryAllBuilding(Integer page,Integer limit) {
     Integer queryCount = buildService.queryCount();
     System.out.println("进入当前展示商品列表的controller");
     List<Building> buildings = buildService.pagePlug(page, limit);
     concurrentMap.put("count", queryCount);
     concurrentMap.put("data", buildings);
     concurrentMap.put("code", 0);
     concurrentMap.put("msg", "成功");
     return concurrentMap;
     }
    }

![70 3][]

[70]: /images/20210813/9dee08c596eb41aba7756b7d3c8415c8.png
[Link 1]: http://www.layui.com/doc/modules/table.html#reload
[70 1]: https://img-blog.csdn.net/20180427152941941?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ3MDQ5Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20210813/66f8ec5bd17644d2b852b4792e139379.png
[70 3]: /images/20210813/8bf7d43efffd420bbeb8163a3a48d86d.png