Layui快速入门之第七节表格

最新推荐文章于 2024-05-03 10:08:27 发布

渊婉

最新推荐文章于 2024-05-03 10:08:27 发布

阅读量1.5k

点赞数 1

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132875170

版权

这篇博客介绍了Layui框架中表格组件的基本用法，包括基本案例、静态表格配置、模板渲染、数据渲染及自定义模板。通过实例展示了如何在网页中使用Layui表格，提供丰富的API以满足各种交互需求。

摘要由CSDN通过智能技术生成

一：基本用法

表格组件 table 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求

基本案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 组件综合演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;"> 
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
    <button class="layui-btn layui-btn-sm" id="dropdownButton">
      下拉按钮 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
      重载测试 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
      <span>{
  {= d.lineStyle ? '多行' : '单行' }}模式</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
  </div>
</script>
<script type="text/html" id="cityTpl">
  <select id="demoCity1" class="layui-border" lay-ignore>
    <option value="浙江杭州">浙江杭州</option>
    <option value="江西南昌">江西南昌</option>
    <option value="湖北武汉">湖北武汉</option>
    <option value="湖南长沙">湖南长沙</option>
  </select>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多 
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>  
<script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
<script>
layui.use(['table', 'dropdown'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  
  // 创建渲染实例
  table.render({
    elem: '#test'
    ,url:'/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,height: 'full-35' // 最大高度减去其他容器已占有的高度差
    ,css: [ // 重设当前表格样式
      '.layui-table-tool-temp{padding-right: 145px;}'
    ].join('')
    ,cellMinWidth: 80
    ,totalRow: true // 开启合计行
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'}
      ,{field:'username', width:80, title: '用户'}
      ,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
        // console.log(obj)
        // 处理该字段的导出数据
        var td = obj.td(this.field); // 获取当前 td
        return td.find('select').val();
      }}
      ,{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;', totalRow: '人物：<span class="layui-badge-rim">唐代：{
  {= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{
  {= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{
  {= d.TOTAL_ROW.era.xian }}</span>'}
      ,{field:'experience', width: 100, title: '积分', sort: true, totalRow: '{
  {= d.TOTAL_NUMS }} 😊'} 
      ,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{
  {= parseInt(d.TOTAL_NUMS) }} 次'}
      ,{field:'ip', title:'IP', width: 120}
      ,{field:'joinTime', title:'加入时间', width: 120}
      ,{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
    ]]
    ,done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例
        ,data: [{
          id: 'add',
          title: '添加'
        },{
          id: 'update',
          title: '编辑'
        },{
          id: 'delete',
          title: '删除'
        }]
        // 菜单被点击的事件
        ,click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'update':
              if(data.length !== 1) return layer.msg('请选择一行');
              layer.open({
                title: '编辑',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'delete':
              if(data.length === 0){
                return layer.msg('请选择一行');
              }
              layer.msg('delete event');
            break;
          }
        }