master

分支 (1)

标签 (1)

管理

管理

master

v2.0

layui-official-website-static
/
table-1.html



<!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, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <script>
  ;!function(){self!==parent&&(location.href="https://www.baidu.com/")}();
  </script>
  <link rel="stylesheet" href="layui.css"   media="all">
  <link rel="stylesheet" href="global.css"  media="all">
</head>
<body>
  <style>
    .site-dir{
      z-index: 19891016;
    position: fixed;
    top: 35%;
    left: 88%;
    margin-left: -15px;
      display: block;
      box-shadow: none;
    border: 1px solid #d2d2d2;
    padding: 0.5%;
    }

    </style>

<div class="layui-header header header-doc">
  <div class="layui-container">
    <a class="logo" href="#" tppabs="https://www.layui.com/">
      <img src="logo.png" tppabs="https://res.layui.com/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>

    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item layui-this">
        <a href="index.html" tppabs="https://www.layui.com/doc/">文档</a>
      </li>
      <li class="layui-nav-item ">
        <a href="demo/index.htm" >示例</a>
      </li>


    </ul>
  </div>
</div>

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<ul class="site-dir">
    <div class="layui-layer-title" style="cursor: move;">目录</div>
  <li><a href="#use"><cite>快速使用</cite></a></li>

  <li><a href="#init"><cite>渲染方式</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#methodRender">方法渲染</a></li>
    <li><a href="#autoRender">自动渲染</a></li>
    <li><a href="#parseTable">转换静态表格</a></li>
  </ul>

  <li><a href="#options"><cite>基础参数一览表</cite> <span class="layui-badge-dot"></span></a></li>
  <li><a href="#cols"><cite>表头参数一览表</cite> <span class="layui-badge-dot"></span></a></li>

  <li><a href="#async"><cite>异步数据参数</cite> <span class="layui-badge-dot"></span></a></li>
  <li><a href="#templet"><cite>自定义模板</cite> <span class="layui-badge-dot"></span></a></li>
  <li><a href="#toolbar"><cite>绑定列工具条</cite> </a></li>

  <li><a href="#method"><cite>基础方法</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#checkStatus">获取选中行</a></li>
    <li><a href="#ontoolCallback"><cite>删除/修改行</cite></a></li>
    <li><a href="#reload"><cite>表格重载</cite> <span class="layui-badge-dot"></span></a></li>
    <li><a href="#method-resize"><cite>重置表格尺寸结构</cite></a></li>
    <li><a href="#export"><cite>导出任意数据</cite></a></li>
    <li><a href="#method">其它方法</a></li>
  </ul>
  <li><a href="#on"><cite>事件</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#ontoolbar">头工具栏事件 <span class="layui-badge-dot"></span></a></li>
    <li><a href="#oncheckbox">复选框</a></li>
    <li><a href="#onradio">单选框</a></li>
    <li><a href="#onedit">单元格编辑</a></li>
    <li><a href="#onrow">行单双击事件 <span class="layui-badge-dot"></span></a></li>
    <li><a href="#ontool">行工具事件</a></li>
    <li><a href="#onsort">排序切换</a></li>
  </ul>
</ul>
<div class="layui-container layui-row">

<div class="layui-col-md3">
  <div class="layui-panel site-menu">
    <ul class="layui-menu layui-menu-lg">
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          基础说明
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="index.html" tppabs="https://www.layui.com/doc/">
                <span>开始使用 </span>
                <span class="layui-font-12 layui-font-gray">Getting Started</span>
              </a>

            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="infrastructure.html" tppabs="https://www.layui.com/doc/base/infrastructure.html">
                <span>底层方法 </span>
                <span class="layui-font-12 layui-font-gray">基础支撑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element.html" tppabs="https://www.layui.com/doc/base/element.html">
                <span>页面元素 </span>
                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="modules.html" tppabs="https://www.layui.com/doc/base/modules.html">
                <span>模块规范 </span>
                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="faq.html" tppabs="https://www.layui.com/doc/base/faq.html">
                <span>常见问题 </span>
                <span class="layui-font-12 layui-font-gray">FAQ</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="changelog.html" tppabs="https://www.layui.com/doc/base/changelog.html">
                <span>更新日志 </span>
                <span class="layui-font-12 layui-font-gray">changelog</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
        </ul>
      </li>

      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          页面元素
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layout.html" tppabs="https://www.layui.com/doc/element/layout.html">
                <span>布局 </span>
                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="color.html" tppabs="https://www.layui.com/doc/element/color.html">
                <span>颜色 </span>
                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="icon.html" tppabs="https://www.layui.com/doc/element/icon.html">
                <span>图标 </span>
                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="anim.html" tppabs="https://www.layui.com/doc/element/anim.html">
                <span>动画 </span>
                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="button.html" tppabs="https://www.layui.com/doc/element/button.html">
                <span>按钮 </span>
                <span class="layui-font-12 layui-font-gray">button</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form.html" tppabs="https://www.layui.com/doc/element/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="nav.html" tppabs="https://www.layui.com/doc/element/nav.html">
                <span>导航 </span>
                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="menu.html" tppabs="https://www.layui.com/doc/element/menu.html">
                <span>菜单 </span>
                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tab.html" tppabs="https://www.layui.com/doc/element/tab.html">
                <span>选项卡 </span>
                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="progress.html" tppabs="https://www.layui.com/doc/element/progress.html">
                <span>进度条 </span>
                <span class="layui-font-12 layui-font-gray">progress</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="panel.html" tppabs="https://www.layui.com/doc/element/panel.html">
                <span>面板 </span>
                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="table.html" tppabs="https://www.layui.com/doc/element/table.html">
                <span>表格 </span>
                <span class="layui-font-12 layui-font-gray">静态 table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="badge.html" tppabs="https://www.layui.com/doc/element/badge.html">
                <span>徽章 </span>
                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="timeline.html" tppabs="https://www.layui.com/doc/element/timeline.html">
                <span>时间线 </span>
                <span class="layui-font-12 layui-font-gray">timeline</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="auxiliar.html" tppabs="https://www.layui.com/doc/element/auxiliar.html">
                <span>辅助 </span>
                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
              </a>
            </div>
          </li>
        </ul>
      </li>

      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          内置模块
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layer.html" tppabs="https://www.layui.com/doc/modules/layer.html">
                <span>弹出层 </span>
                <span class="layui-font-12 layui-font-gray">layer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laydate.html" tppabs="https://www.layui.com/doc/modules/laydate.html">
                <span>日期与时间选择 </span>
                <span class="layui-font-12 layui-font-gray">laydate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laypage.html" tppabs="https://www.layui.com/doc/modules/laypage.html">
                <span>分页 </span>
                <span class="layui-font-12 layui-font-gray">laypage</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laytpl.html" tppabs="https://www.layui.com/doc/modules/laytpl.html">
                <span>模板引擎 </span>
                <span class="layui-font-12 layui-font-gray">laytpl</span>
              </a>
            </div>
          </li>
          <li class="layui-menu-item-checked2">
            <div class="layui-menu-body-title">
              <a href="table-1.html" tppabs="https://www.layui.com/doc/modules/table.html">
                <span>数据表格 </span>
                <span class="layui-font-12 layui-font-gray">table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form-1.html" tppabs="https://www.layui.com/doc/modules/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="upload.html" tppabs="https://www.layui.com/doc/modules/upload.html">
                <span>文件上传 </span>
                <span class="layui-font-12 layui-font-gray">upload</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="dropdown.html" tppabs="https://www.layui.com/doc/modules/dropdown.html">
                <span>下拉菜单 </span>
                <span class="layui-font-12 layui-font-gray">dropdown</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="transfer.html" tppabs="https://www.layui.com/doc/modules/transfer.html">
                <span>穿梭框 </span>
                <span class="layui-font-12 layui-font-gray">transfer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tree.html" tppabs="https://www.layui.com/doc/modules/tree.html">
                <span>树形组件 </span>
                <span class="layui-font-12 layui-font-gray">tree</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="colorpicker.html" tppabs="https://www.layui.com/doc/modules/colorpicker.html">
                <span>颜色选择器 </span>
                <span class="layui-font-12 layui-font-gray">colorpicker</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element-1.html" tppabs="https://www.layui.com/doc/modules/element.html">
                <span>常用元素操作 </span>
                <span class="layui-font-12 layui-font-gray">element</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="slider.html" tppabs="https://www.layui.com/doc/modules/slider.html">
                <span>滑块 </span>
                <span class="layui-font-12 layui-font-gray">slider</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="rate.html" tppabs="https://www.layui.com/doc/modules/rate.html">
                <span>评分 </span>
                <span class="layui-font-12 layui-font-gray">rate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="carousel.html" tppabs="https://www.layui.com/doc/modules/carousel.html">
                <span>轮播 </span>
                <span class="layui-font-12 layui-font-gray">carousel</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="flow.html" tppabs="https://www.layui.com/doc/modules/flow.html">
                <span>流加载 </span>
                <span class="layui-font-12 layui-font-gray">flow</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="util.html" tppabs="https://www.layui.com/doc/modules/util.html">
                <span>工具组件 </span>
                <span class="layui-font-12 layui-font-gray">util</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="code.html" tppabs="https://www.layui.com/doc/modules/code.html">
                <span>代码高亮显示 </span>
                <span class="layui-font-12 layui-font-gray">code</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="layui-hide-v"> - </div>
</div>


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


    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="use">快速使用</a></legend>
    </fieldset>
    <div class="site-text">
      <p>创建一个table实例最简单的方式是，在页面放置一个元素 <em>&lt;table id="demo">&lt;/table></em>，然后通过 <em>table.render()</em> 方法指定该容器，如下所示：</p>
    </div>
    <table id="demo" lay-filter="test"></table>
    <div class="site-text">
      <p>上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式。下面就是它对应的代码：</p>
      <pre class="layui-code" lay-title="对应的代码">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;table模块快速使用&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/layui/css/layui.css&quot; media=&quot;all&quot;&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table id="demo" lay-filter="test"&gt;&lt;/table&gt;

&lt;script src=&quot;/layui/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
layui.use(&#x27;table&#x27;, function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80}
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });

});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
      <p>一切都并不会陌生：绑定容器、设置数据接口、在表头设定对应的字段，剩下的…就交给 layui 吧。你的牛刀是否早已饥渴难耐？那么不妨现在就去小试一波吧。数据接口可参考：<a href="javascript:if(confirm('https://www.layui.com/demo/table/user/?page=1&limit=30  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.layui.com/demo/table/user/?page=1&limit=30'" tppabs="https://www.layui.com/demo/table/user/?page=1&limit=30" target="_blank">返回的数据</a>，规则在下文也有讲解。</p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="init">三种初始化渲染方式</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在上述“快速使用”的介绍中，你已经初步见证了 table 模块的信手拈来，但其使用方式并不止那一种。我们为了满足各种情况下的需求，对 table 模块做了三种初始化的支持，你可按照个人喜好和实际情况灵活使用。</p>
    </div>
    <table class="layui-table">
      <colgroup>
        <col width="50">
        <col width="120">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th></th>
          <th>方式</th>
          <th>机制</th>
          <th>适用场景</th>
        </tr>
      </thead>
      <tbody class="layui-text">
        <tr>
          <td>01.</td>
          <td><a href="#methodRender">方法渲染</a></td>
          <td>用JS方法的配置完成渲染</td>
          <td>（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。</td>
        </tr>
        <tr>
          <td>02.</td>
          <td><a href="#autoRender">自动渲染</a></td>
          <td>HTML配置，自动渲染</td>
          <td>无需写过多 JS，可专注于 HTML 表头部分</td>
        </tr>
        <tr>
          <td>03.</td>
          <td><a href="#parseTable">转换静态表格</a></td>
          <td>转化一段已有的表格元素</td>
          <td>无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可</td>
        </tr>
      </tbody>
    </table>
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="methodRender">方法渲染</a></legend>
    </fieldset>
    <div class="site-text">
      <p>其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 <em>选择器</em>：</p>
    </div>
    <pre class="layui-code" lay-title="HTML">

&lt;table id="demo" lay-filter="test"&gt;&lt;/table&gt;
    </pre>
    <pre class="layui-code" lay-title="JavaScript">
var table = layui.table;

//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
    </pre>
    <div class="site-text">
      <p>事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。</p>
      <p>备注：<em>table.render()</em>方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：<a href="#reload">表格重载</a></p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="autoRender">自动渲染</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：
        <br><br>1) 带有 <em>class="layui-table"</em> 的 <em>&lt;table></em> 标签。
        <br>2) 对标签设置属性 <em>lay-data=""</em> 用于配置一些基础参数
        <br>3) 在 <em>&lt;th></em> 标签中设置属性<em>lay-data=""</em>用于配置表头信息
      </p>
    </div>
    <div class="site-text">
      <p>按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：</p>
    </div>
    <pre class="layui-code">
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{height:315, url:&#x27;/demo/table/user/&#x27;, page:true, id:&#x27;test&#x27;}&quot; lay-filter=&quot;test&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th lay-data=&quot;{field:&#x27;id&#x27;, width:80, sort: true}&quot;&gt;ID&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;username&#x27;, width:80}&quot;&gt;用户名&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;sex&#x27;, width:80, sort: true}&quot;&gt;性别&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;city&#x27;}&quot;&gt;城市&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;sign&#x27;}&quot;&gt;签名&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;experience&#x27;, sort: true}&quot;&gt;积分&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;score&#x27;, sort: true}&quot;&gt;评分&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;classify&#x27;}&quot;&gt;职业&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;wealth&#x27;, sort: true}&quot;&gt;财富&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;
    </pre>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="parseTable">转换静态表格</a></legend>
    </fieldset>
    <div class="site-text">
      <p>假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：</p>
    </div>
    <table lay-filter="parse-table-demo" style="border: 1px solid #e2e2e2;">
      <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>
    <button class="layui-btn" onclick="layui.table.init('parse-table-demo');layui.jquery(this).addClass('layui-btn-disabled')" style="margin: 10px 0;">转换上述表格</button>
    <div class="site-text">
      <p>通过上面的小例子，你已经初步见识了这一功能的实际意义。尝试在你的静态表格的 <em>th</em> 标签中加上 <em>lay-data=""</em> 属性，代码如下：</p>
    </div>
    <pre class="layui-code" lay-title="HTML" lay-height="200px">
&lt;table lay-filter=&quot;demo&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th lay-data=&quot;{field:&#x27;username&#x27;, width:100}&quot;&gt;昵称&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;experience&#x27;, width:80, sort:true}&quot;&gt;积分&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;sign&#x27;}&quot;&gt;签名&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;贤心1&lt;/td&gt;
      &lt;td&gt;66&lt;/td&gt;
      &lt;td&gt;人生就像是一场修行a&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;贤心2&lt;/td&gt;
      &lt;td&gt;88&lt;/td&gt;
      &lt;td&gt;人生就像是一场修行b&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;贤心3&lt;/td&gt;
      &lt;td&gt;33&lt;/td&gt;
      &lt;td&gt;人生就像是一场修行c&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
    </pre>
    <div class="site-text">
      <p>然后执行用于转换表格的JS方法，就可以达到目的了：</p>
    </div>
    <pre class="layui-code" lay-title="JavaScript">
var table = layui.table;

//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //<span style="color: #FF5722">注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致</span>
  //支持所有基础参数
});
    </pre>
    <div class="site-text">
      <p>在前面的“方法渲染”和“自动渲染”两种方式中，你的数据都来源于异步的接口，这可能并不利于所谓的seo（当然是针对于前台页面）。而在这里，你的数据已和页面同步输出，却仍然可以转换成动态表格，是否感受到一丝惬意呢？</p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="options">基础参数一览表</a></legend>
    </fieldset>
    <div class="site-text">
      <p>基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：</p>
      <pre class="layui-code">
场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: '/api/data'
});

场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
&lt;table lay-data="{height:300, url:'/api/data'}" lay-filter=&quot;demo&quot;&gt; …… &lt;/table&gt;

更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格
      </pre>
      <p>下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看</p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col width="100">
          <col>
          <col width="150">
        </colgroup>
        <thead>
          <tr>
            <th>参数</th>
            <th>类型</th>
            <th>说明</th>
            <th>示例值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>elem</td>
            <td>String/DOM</td>
            <td>指定原始 table 容器的选择器或 DOM，方法渲染方式必填</td>
            <td>"#demo"</td>
          </tr>
          <tr>
            <td>cols</td>
            <td>Array</td>
            <td>设置表头。值是一个二维数组。方法渲染方式必填</td>
            <td><a href="#cols">详见表头参数</a></td>
          </tr>
          <tr>
            <td>url（等）</td>
            <td>-</td>
            <td>异步数据接口相关参数。其中 url 参数为必填项</td>
            <td><a href="#async">详见异步参数</a></td>
          </tr>
          <tr>
            <td>toolbar</td>
            <td>String/DOM/Boolean</td>
            <td class="layui-text">
              <a name="toolbar"> </a>
              开启表格头部工具栏区域，该参数支持四种类型值：
              <ul>
                <li>toolbar: '#toolbarDemo' <em>//指向自定义工具栏模板选择器</em></li>
                <li>toolbar: '&lt;div&gt;xxx&lt;/div&gt;' <em>//直接传入工具栏模板字符</em></li>
                <li>toolbar: true <em>//仅开启工具栏，不显示左侧模板</em></li>
                <li>toolbar: 'default' <em>//让工具栏左侧显示默认的内置模板</em></li>
              </ul>
              <div style="color: #FF5722;">
                注意：
                <br>1. 该参数为 layui 2.4.0 开始新增。
                <br>2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
              </div>
            </td>
            <td>false</td>
          </tr>
          <tr>
            <td>defaultToolbar</td>
            <td>Array</td>
            <td class="layui-text">
              该参数可自由配置头部工具栏右侧的图标按钮
            </td>
            <td>
              <a href="#defaultToolbar">详见头工具栏图标</a>
            </td>
          </tr>
          <tr>
            <td>width</td>
            <td>Number</td>
            <td>设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。</td>
            <td>1000</td>
          </tr>
          <tr>
            <td>height</td>
            <td>Number/String</td>
            <td>设定容器高度</td>
            <td><a href="#height">详见height</a></td>
          </tr>
          <tr>
            <td>cellMinWidth</td>
            <td>Number</td>
            <td>（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth</td>
            <td>100</td>
          </tr>
          <tr>
            <td>done</td>
            <td>Function</td>
            <td>数据渲染完的回调。你可以借此做一些其它的操作</td>
            <td><a href="#done">详见 done 回调</a></td>
          </tr>
          <tr>
            <td>error</td>
            <td>Function</td>
            <td>

              数据请求失败的回调，返回两个参数：错误对象、内容
              <br> <span class="layui-font-red">layui 2.6.0 新增</span>
            </td>
            <td>-</td>
          </tr>
          <tr>
            <td>data</td>
            <td>Array</td>
            <td>直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。</td>
            <td>[{}, {}, {}, {}, …]</td>
          </tr>
          <tr>
            <td>escape</td>
            <td>Boolean</td>
            <td>是否开启 xss 字符过滤（默认 false）<span class="layui-font-red">layui 2.6.8 新增</span></td>
            <td>true</td>
          </tr>
          <tr>
            <td>totalRow</td>
            <td>Boolean/String</td>
            <td>是否开启合计行区域</td>
            <td>false</td>
          </tr>
          <tr>
            <td>page</td>
            <td>Boolean/Object</td>
            <td>开启分页（默认：false）。支持传入一个对象，里面可包含 <a href="laypage.html#options" tppabs="https://www.layui.com/doc/modules/laypage.html#options">laypage</a> 组件所有支持的参数（jump、elem除外）</td>
            <td>{theme: '#c00'}</td>
          </tr>
          <tr>
            <td>limit</td>
            <td>Number</td>
            <td>
              每页显示的条数（默认 10）。值需对应 limits 参数的选项。
              <br>注意：<em>优先级低于 page 参数中的 limit 参数</em>
            </td>
            <td>30</td>
          </tr>
          <tr>
            <td>limits</td>
            <td>Array</td>
            <td>
              每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
              <br>注意：<em>优先级低于 page 参数中的 limits 参数</em>
            </td>
            <td>[30,60,90]</td>
          </tr>
          <tr>
            <td>loading</td>
            <td>Boolean</td>
            <td>是否显示加载条（默认 true）。若为 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式</td>
            <td>false</td>
          </tr>
          <tr>
            <td>title</td>
            <td>String</td>
            <td>定义 table 的大标题（在文件导出等地方会用到）</td>
            <td>"用户表"</td>
          </tr>
          <tr>
            <td>text</td>
            <td>Object</td>
            <td>自定义文本，如空数据时的异常提示等。</td>
            <td><a href="#text">详见自定义文本</a></td>
          </tr>
          <tr>
            <td>autoSort</td>
            <td>Boolean</td>
            <td>
              默认 true，即直接由 table 组件在前端自动处理排序。
              <br>若为 false，则需自主排序，即由服务端返回排序好的数据
            </td>
            <td><a href="#onsort">详见事件排序</a></td>
          </tr>
          <tr>
            <td>initSort</td>
            <td>Object</td>
            <td>
              初始排序状态。<br>用于在数据表格渲染完毕时，默认按某个字段排序。
            </td>
            <td><a href="#initSort">详见初始排序</a></td>
          </tr>
          <tr>
            <td>id</td>
            <td>String</td>
            <td>
              <a name="id"></a>
              设定容器唯一 id。id  是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。
              <br><br>另外，若该参数未设置，则默认从 <em>&lt;table id="test">&lt;/table></em> 中的 id 属性值中获取。
            </td>
            <td>test</td>
          </tr>
          <tr>
            <td>skin（等）</td>
            <td>-</td>
            <td>设定表格各种外观、尺寸等</td>
            <td><a href="#skin">详见表格风格</a></td>
          </tr>
        </tbody>
      </table>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="cols">cols - 表头参数一览表</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        相信我，在你还尚无法驾驭 layui table 的时候，你的所有焦点都应放在这里，它带引领你完成许多可见和不可见甚至你无法想象的工作。如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在 <em>&lt;th></em> 标签上
      </p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col width="100">
          <col>
          <col width="150">
        </colgroup>
        <thead>
          <tr>
            <th>参数</th>
            <th>类型</th>
            <th>说明</th>
            <th>示例值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>field</td>
            <td>String</td>
            <td>设定字段名。非常重要，且是表格数据列的唯一标识</td>
            <td>username</td>
          </tr>
          <tr>
            <td>title</td>
            <td>String</td>
            <td>设定标题名称</td>
            <td>用户名</td>
          </tr>
          <tr>
            <td>width</td>
            <td>Number/String</td>
            <td>
              设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比。
              <br>请结合实际情况，对不同列做不同设定。
            </td>
            <td>200<br>30%</td>
          </tr>
          <tr>
            <td>minWidth</td>
            <td>Number</td>
            <td>局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth</td>
            <td>100</td>
          </tr>
          <tr>
            <td>type</td>
            <td>String</td>
            <td class="layui-text">
              设定列类型。可选值有：
              <ul>
                <li>normal（常规列，无需设定）</li>
                <li>checkbox（复选框列）</li>
                <li>radio（单选框列，<span style="color:#FF5722;">layui 2.4.0 新增</span>）</li>
                <li>numbers（序号列）</li>
                <li>space（空列）</li>
              </ul>
            </td>
            <td>任意一个可选值</td>
          </tr>
          <tr>
            <td>LAY_CHECKED</td>
            <td>Boolean</td>
            <td>是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。</td>
            <td>true</td>
          </tr>
          <tr>
            <td>fixed</td>
            <td>String</td>
            <td>固定列。可选值有：<em>left</em>（固定在左）、<em>right</em>（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
            <br>
            注意：<em>如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。</em></td>
            <td>left（同 true）<br>right</td>
          </tr>
          <tr>
            <td>hide</td>
            <td>Boolean</td>
            <td>是否初始隐藏列，默认：false。<span style="color:#FF5722;">layui 2.4.0 新增</span></td>
            <td>true</td>
          </tr>
          <tr><td colspan="4"><a name="totalRow"> </a></td></tr>
          <tr>
            <td>
              <span>totalRow</span>
            </td>
            <td>Boolean/String</td>
            <td>
              <div class="layui-text">
                <ul>
                  <li>是否开启该列的自动合计功能，默认：false。</li>
                  <li>当开启时，则默认由前端自动合计当前行数据。<span style="color:#FF5722;">从 layui 2.5.6 开始：</span> 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：</li>
                </ul>
              </div>
              <pre class="layui-code" lay-skin="notepad" lay-height="90px">
{
  "code": 0,
  "totalRow": {
    "score": "666"
    ,"experience": "999"
  },
  "data": [{}, {}],
  "msg": "",
  "count": 1000
}
              </pre>
              <p>
                如上，在 totalRow 中返回所需统计的列字段名和值即可。
                <br>另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。
              </p>
              <div class="layui-text">
                <ul>
                  <li><span class="layui-font-red">从 layui 2.6.3 开始</span>，如果 totalRow 为一个 string 类型，则可解析为合计行的动态模板，如：</li>
                </ul>
              </div>
              <pre class="layui-code">
totalRow: '{{ d.TOTAL_NUMS }} 单位'
//还比如只取整：'{{ parseInt(d.TOTAL_NUMS) }}'
              </pre>
            </td>
            <td>true</td>
          </tr>
          <tr>
            <td>totalRowText</td>
            <td>String</td>
            <td>用于显示自定义的合计文本。<span style="color:#FF5722;">layui 2.4.0 新增</span></td>
            <td>"合计："</td>
          </tr>
          <tr><td colspan="4"><a name="totalRow"> </a></td></tr>
          <tr>
            <td>sort</td>
            <td>Boolean</td>
            <td>
              是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
              <p>
                注意：<em>不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对</em>。比如：<em>'贤心' &gt; '2' &gt; '100'</em>，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。
              </p>
            </td>
            <td>true</td>
          </tr>
          <tr>
            <td>unresize</td>
            <td>Boolean</td>
            <td>
              是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
            </td>
            <td>false</td>
          </tr>
          <tr>
            <td>edit</td>
            <td>String</td>
            <td>单元格编辑类型（默认不开启）目前只支持：<em>text</em>（输入框）</td>
            <td>text</td>
          </tr>
          <tr>
            <td>event</td>
            <td>String</td>
            <td>自定义单元格点击事件名，以便在 <a href="#ontool">tool</a> 事件中完成对该单元格的业务处理</td>
            <td>任意字符</td>
          </tr>
          <tr>
            <td>style</td>
            <td>String</td>
            <td>自定义单元格样式。即传入 CSS 样式</td>
            <td>background-color: #5FB878; color: #fff;</td>
          </tr>
          <tr>
            <td>align</td>
            <td>String</td>
            <td>单元格排列方式。可选值有：<em>left</em>（默认）、<em>center</em>（居中）、<em>right</em>（居右）</td>
            <td>center</td>
          </tr>
          <tr>
            <td>colspan</td>
            <td>Number</td>
            <td>单元格所占列数（默认：1）。一般用于多级表头</td>
            <td>3</td>
          </tr>
          <tr>
            <td>rowspan</td>
            <td>Number</td>
            <td>单元格所占行数（默认：1）。一般用于多级表头</td>
            <td>2</td>
          </tr>
          <tr>
            <td>templet</td>
            <td>String</td>
            <td>自定义列模板，模板遵循 <a href="laytpl.html" tppabs="https://www.layui.com/doc/modules/laytpl.html" target="_blank">laytpl</a> 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等</td>
            <td><a href="#templet">详见自定义模板</a></td>
          </tr>
          <tr>
            <td>toolbar</td>
            <td>String</td>
            <td>绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮</td>
            <td><a href="#onrowtool">详见行工具事件</a></td>
          </tr>
        </tbody>
      </table>
      <p>下面是一些方法渲染和自动渲染的配置方式：</p>
      <pre class="layui-code">
//方法渲染：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
});

它等价于自动渲染：
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{基础参数}&quot; lay-filter=&quot;test&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th lay-data=&quot;{checkbox:true}&quot;&gt;&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;id&#x27;, width:80}&quot;&gt;ID&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;username&#x27;, width:180}&quot;&gt;用户名&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;
      </pre>
      <p>以下是一个二级表头的例子：</p>
      <pre class="layui-code">
JS：
table.render({
  cols:  [[ //标题栏
    {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: 'amount', title: '金额', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '详细', width: 300}
  ]]
});

它等价于：
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{基础参数}&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th lay-data=&quot;{field:&#x27;username&#x27;, width:80}&quot; rowspan=&quot;2&quot;&gt;联系人&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;amount&#x27;, width:120}&quot; rowspan=&quot;2&quot;&gt;金额&lt;/th&gt;
      &lt;th lay-data=&quot;{align:&#x27;center&#x27;}&quot; colspan=&quot;3&quot;&gt;地址&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th lay-data=&quot;{field:&#x27;province&#x27;, width:80}&quot;&gt;省&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;city&#x27;, width:120}&quot;&gt;市&lt;/th&gt;
      &lt;th lay-data=&quot;{field:&#x27;county&#x27;, width:300}&quot;&gt;详细&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;
      </pre>
      <p>需要说明的是，table 组件支持无限极表头，你可按照上述的方式继续扩充。核心点在于 <em>rowspan</em> 和 <em>colspan</em> 两个参数的使用。</p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="templet">templet - 自定义列模板</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>String</em>，默认值：<em>无</em></p>
      <p>在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。</p>
      <blockquote class="layui-elem-quote layui-quote-nm layui-text" style="margin: 20px 0;">
        templet 提供了三种使用方式，请结合实际场景选择最合适的一种：
        <ul>
          <li>如果自定义模版的字符量太大，我们推荐你采用【方式一】；</li>
          <li>如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；</li>
          <li>如果自定义模板的字符量很小，我们推荐你采用【方式三】</li>
        </ul>
      </blockquote>

      <p><strong>方式一：绑定模版选择器。</strong></p>
      <pre class="layui-code">
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
&lt;th lay-data=&quot;{field:'title', width: 200, templet: '#titleTpl'}&quot;&gt;文章标题&lt;/th&gt;
&lt;th lay-data=&quot;{field:'id', width:100}&quot;&gt;ID&lt;/th&gt;
      </pre>
      <p>下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 <a href="laytpl.html" tppabs="https://www.layui.com/doc/modules/laytpl.html" target="_blank">laytpl</a> 语法，可读取到返回的所有数据</p>
      <pre class="layui-code" lay-title="HTML">
&lt;script type="text/html" id="titleTpl"&gt;
  &lt;a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}&lt;/a>
&lt;/script>

<span class="layui-font-red">注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：<br>     序号：{{ d.LAY_INDEX }} <br>     当前列的表头信息：{{ d.LAY_COL }} （layui 2.6.8 新增）</span>

由于模板遵循 laytpl 语法（建议细读 <em>laytpl文档</em> ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
&lt;script type="text/html" id="titleTpl"&gt;
  {{#  if(d.id < 100){ }}
    &lt;a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}&lt;/a>
  {{#  } else { }}
    {{d.title}}(普通用户)
  {{#  } }}
&lt;/script>
      </pre>
      <p><strong>方式二：函数转义。</strong>templet 若未函数，则返回一个参数 d（包含当前行数据及特定的额外字段）。如下所示：</p>
      <pre class="layui-code">
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        console.log(d.LAY_INDEX); //得到序号。一般不常用
        console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用

        //得到当前行数据，并拼接成自定义模板
        return 'ID：'+ d.id +'，标题：&lt;span style="color: #c00;">'+ d.title +'&lt;/span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});
      </pre>


      <p><strong>方式三：直接赋值模版字符。</strong>事实上，templet 也可以直接是一段 html 内容，如：</p>
      <pre class="layui-code">

templet: '&lt;div>&lt;a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}&lt;/a>&lt;/div>'

注意：这里一定要被一层 <em>&lt;div>&lt;/div></em> 包裹，否则无法读取到模板
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="onrowtool">toolbar - 绑定工具条模板</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>String</em>，默认值：<em>无</em></p>
      <p>通常你需要在表格的每一行加上 <em>查看</em>、<em>编辑</em>、<em>删除</em> 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。<strong>tool 参数和 templet 参数的使用方式完全类似</strong>，通常接受的是一个选择器，也可以是一段HTML字符。</p>
      <pre class="layui-code">
table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});

等价于：
&lt;th lay-data=&quot;{field:'id', width:100}&quot;&gt;ID&lt;/th&gt;
&lt;th lay-data=&quot;{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}&quot;&gt;&lt;/th&gt;
      </pre>
      <a name="ontool"></a>
      <p>下述是 toolbar 对应的模板，它可以存放在页面的任意位置：</p>
      <pre class="layui-code"" lay-title="HTML">
&lt;script type="text/html" id="barDemo"&gt;
  &lt;a class="layui-btn layui-btn-xs" lay-event="detail">查看&lt;/a>
  &lt;a class="layui-btn layui-btn-xs" lay-event="edit">编辑&lt;/a>
  &lt;a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除&lt;/a>

  &lt;!-- 这里同样支持 laytpl 语法，如： --&gt;
  {{#  if(d.auth > 2){ }}
    &lt;a class="layui-btn layui-btn-xs" lay-event="check">审核&lt;/a>
  {{#  } }}
&lt;/script>

注意：属性 <em>lay-event=""</em> 是模板的关键所在，值可随意定义。
      </pre>
      <p>接下来我们可以借助 table模块的工具条事件，完成不同的操作功能：</p>
      <a name="ontoolCallback"></a>
      <pre class="layui-code">
//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（<em style="color: #FF5722;">也可以是表头的 event 参数对应的值</em>）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //<span style="color: #FF5722;">删除对应行（tr）的DOM结构，并更新缓存</span>
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something

    //<span style="color: #FF5722;">同步更新缓存对应的值</span>
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="async">异步数据参数</a></legend>
    </fieldset>
    <div class="site-text">
      <p>数据的异步请求由以下几个参数组成：</p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>参数名</th>
            <th>功能</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>url</td>
            <td>
              接口地址。默认会自动传递两个参数：<em>?page=1&limit=30</em>（该参数可通过 request 自定义）
              <br><em>page</em> 代表当前页码、<em>limit</em> 代表每页数据量
           </td>
          </tr>
          <tr>
            <td>method</td>
            <td>接口http请求类型，默认：get</td>
          </tr>
          <tr>
            <td>where</td>
            <td>接口的其它参数。如：<em>where: {token: 'sasasas', id: 123}</em></td>
          </tr>
          <tr>
            <td>contentType</td>
            <td>发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：<em>contentType: 'application/json'</em></td>
          </tr>
          <tr>
            <td>headers</td>
            <td>接口的请求头。如：<em>headers: {token: 'sasasas'}</em></td>
          </tr>
          <tr><td colspan="4"><a name="parseData"> </a></td></tr>
          <tr>
            <td><strong>parseData</strong></td>
            <td>
              <p>数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。</p>
              <p>table 组件默认规定的数据格式为（参考：<a href="javascript:if(confirm('https://www.layui.com/demo/table/user/?page=1&limit=30  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.layui.com/demo/table/user/?page=1&limit=30'" tppabs="https://www.layui.com/demo/table/user/?page=1&limit=30" target="_blank">/demo/table/user/</a>）：</p>
              <pre class="layui-code" lay-title="默认规定的数据格式" lay-skin="notepad">
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
}
              </pre>
              <p>很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：</p>
              <pre class="layui-code" lay-skin="notepad" lay-title="假设您返回的数据格式">
{
  "status": 0,
  "message": "",
  "total": 180,
  "data": {
    "item": [{}, {}]
  }
}
              </pre>
              <p>那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式</p>
              <pre class="layui-code">
table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});
              </pre>
              <p><span style="color:#FF5722;">该参数非常实用，系 layui 2.4.0 开始新增</span></p>
            </td>
          </tr>
          <tr>
            <td>request</td>
            <td>
              用于对分页请求的参数：page、limit重新设定名称，如：
              <pre class="layui-code">
table.render({
  elem: '#demp'
  ,url: ''
  ,request: {
    pageName: 'curr' //页码的参数名称，默认：page
    ,limitName: 'nums' //每页数据量的参数名，默认：limit
  }
  //,…… //其他参数
});
              </pre>
              那么请求数据时的参数将会变为：<em>?curr=1&nums=30</em>
            </td>
          </tr>
          <tr>
            <td>response</td>
            <td>
              <a name="response"> </a>
              <p>您还可以借助 response 参数来重新设定返回的数据格式，如：</p>
              <pre class="layui-code">
table.render({
  elem: '#demp'
  ,url: ''
  ,response: {
    statusName: 'status' //规定数据状态的字段名称，默认：code
    ,statusCode: 200 //规定成功的状态码，默认：0
    ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
    ,countName: 'total' //规定数据总数的字段名称，默认：count
    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
  }
  //,…… //其他参数
});
              </pre>
              那么上面所规定的格式为：
              <pre class="layui-code" lay-title="重新规定的数据格式" lay-skin="notepad">
{
  "status": 200,
  "hint": "",
  "total": 1000,
  "rows": []
}
              </pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>注意：<em>request 和 response 参数均为 layui 2.1.0 版本新增</em></p>
      <p>调用示例：</p>
      <pre class="layui-code">
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  url: '/api/data/'
  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
  //method: 'post' //如果无需自定义HTTP类型，可不加该参数
  //request: {} //如果无需自定义请求参数，可不加该参数
  //response: {} //如果无需自定义数据响应名称，可不加该参数
});

等价于（“自动化渲染”配置方式）
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{url:'/api/data/'}&quot; lay-filter=&quot;test&quot;&gt; …… &lt;/table&gt;
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="done">done - 数据渲染完的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>Function</em>，默认值：<em>无</em></p>
      <p>无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。</p>
      <pre class="layui-code">
table.render({ //其它参数在此省略
  done: function(res, curr, count){
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);

    //得到当前页码
    console.log(curr);

    //得到数据总量
    console.log(count);
  }
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="defaultToolbar">defaultToolbar - 头部工具栏右侧图标</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>Array</em>，默认值：<em>["filter","exports","print"]</em></p>
      <div class="layui-text">
        该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：
        <ul>
          <li>filter: <em>显示筛选图标</em></li>
          <li>exports: <em>显示导出图标</em></li>
          <li>print: <em>显示打印图标</em></li>
        </ul>
      </div>
      <blockquote class="layui-elem-quote layui-quote-nm">
        <p>可根据值的顺序显示排版图标，如：</p>
        <em>defaultToolbar: ['filter', 'print', 'exports']</em>
      </blockquote>
      <p>另外你还可以无限扩展图标按钮（<span style="color: #FF5722;">layui 2.5.5 新增</span>）：</p>
      <pre class="layui-code">
table.render({ //其它参数在此省略
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});
      </pre>
      <p>扩展的图标可通过 toolbar 事件回调（<a href="#ontoolbar">详见行工具事件</a>），其中 <em>layEvent</em> 的值会在事件的回调参数中返回，以便区分不同的触发动作。</p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="text">text - 自定义文本</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>Object</em></p>
      <p>table 模块会内置一些默认的文本信息，如果想修改，你可以设置以下参数达到目的。</p>
      <pre class="layui-code">
table.render({ //其它参数在此省略
  text: {
    none: '暂无相关数据' //默认：无数据。
  }
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="initSort">initSort - 初始排序</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>Object</em>，默认值：<em>无</em></p>
      <p>用于在数据表格渲染完毕时，默认按某个字段排序。注：<em>该参数为 layui 2.1.1 新增</em></p>
      <pre class="layui-code">
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  initSort: {
    field: 'id' //排序字段，对应 cols 设定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
  }
});

等价于（“自动化渲染”配置方式）
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{initSort:{field:'id', type:'desc'}}&quot; lay-filter=&quot;test&quot;&gt; …… &lt;/table&gt;
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="height">height - 设定容器高度</a></legend>
    </fieldset>
    <div class="site-text">
      <p>类型：<em>Number/String</em>，可选值如下：</p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col>
          <col width="150">
        </colgroup>
        <thead>
          <tr>
            <th>可选值</th>
            <th>说明</th>
            <th>示例</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>不填写</td>
            <td>默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条</td>
            <td>-</td>
          </tr>
          <tr>
            <td>固定值</td>
            <td>设定一个数字，用于定义容器高度，当容器中的内容超出了该高度时，会自动出现纵向滚动条</td>
            <td>height: 315</td>
          </tr>
          <tr>
            <td>full-差值</td>
            <td>
              高度将始终铺满，无论浏览器尺寸如何。这是一个特定的语法格式，其中 <em>full</em> 是固定的，而 <em>差值</em> 则是一个数值，这需要你来预估，比如：表格容器距离浏览器顶部和底部的距离“和”
              <br>PS：<em>该功能为 layui 2.1.0 版本中新增 </em>
            </td>
            <td>height: 'full-20'</td>
          </tr>
        </tbody>
      </table>
      <p>示例：</p>
      <pre class="layui-code">
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  height: 315 //固定值
});
table.render({ //其它参数在此省略
  height: 'full-20' //高度最大化减去差值
});

等价于（“自动化渲染”配置方式）
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{height:315}&quot; lay-filter=&quot;test&quot;&gt; …… &lt;/table&gt;
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{height:'full-20'}&quot; lay-filter=&quot;test&quot;&gt; …… &lt;/table&gt;
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="skin">设定表格外观</a></legend>
    </fieldset>
    <div class="site-text">
      <p>控制表格外观的主要由以下参数组成：</p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>参数名</th>
            <th>可选值</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>skin</td>
            <td>
              line （行边框风格）
              <br>row （列边框风格）
              <br>nob （无边框风格）
            </td>
            <td>用于设定表格风格，若使用默认风格不设置该属性即可</td>
          </tr>
          <tr>
            <td>even</td>
            <td>true/false</td>
            <td>若不开启隔行背景，不设置该参数即可</td>
          </tr>
          <tr>
            <td>size</td>
            <td>
              sm （小尺寸）
              <br>lg （大尺寸）
            </td>
            <td>用于设定表格尺寸，若使用默认尺寸不设置该属性即可</td>
          </tr>
        </tbody>
      </table>
      <pre class="layui-code">
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  skin: 'line' //行边框风格
  ,even: true //开启隔行背景
  ,size: 'sm' //小尺寸的表格
});

等价于（“自动化渲染”配置方式）
&lt;table class=&quot;layui-table&quot; lay-data=&quot;{skin:'line', even:true, size:'sm'}&quot; lay-filter=&quot;test&quot;&gt; …… &lt;/table&gt;
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="method">基础方法</a></legend>
    </fieldset>
    <div class="site-text">
      <p>基础用法是table模块的关键组成部分，目前所开放的所有方法如下：</p>
      <pre class="layui-code">
> table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：<a href="#parseTable">转换静态表格</a>
> table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：<a href="#methodRender">方法级渲染</a>
> table.reload(id, options, deep); //表格重载
> table.resize(id); //重置表格尺寸
> table.exportFile(id, data, type); //导出数据
> table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="checkStatus">获取选中行</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        该方法可获取到表格所有的选中行相关数据
        <br>语法：<em>table.checkStatus('ID')</em>，其中 <em>ID</em> 为基础参数 id 对应的值（见：<a href="#id">设定容器唯一ID</a>），如：
      </p>
      <pre class="layui-code" lay-title="渲染方式">
【自动化渲染】
&lt;table class="layui-table" lay-data="{id: 'idTest'}"&gt; …… &lt;/table&gt;

【方法渲染】
table.render({ //其它参数省略
  id: 'idTest'
});
      </pre>
      <pre class="layui-code" lay-title="调用">
var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值

console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="method-resize">重置表格尺寸</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        该方法可重置表格尺寸和结构，其内部完成了：<em>固定列高度平铺</em>、<em>动态分配列宽</em>、<em>容器滚动条宽高补丁</em> 等操作。它一般用于特殊情况下（如“非窗口 resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能友好展示。
      </p>
      <p>语法：<em>table.resize('ID')</em>，其中 <em>ID</em> 为基础参数 id 对应的值（见：<a href="#id">设定容器唯一ID</a>），如：
      </p>
      <pre class="layui-code">
table.render({ //其它参数省略
  ,elem: '#demo'
  //,…… //其它参数
  ,id: 'idTest'
});

//执行表格“尺寸结构”的重置，一般写在对应的事件中
table.resize('idTest');
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="reload">表格重载</a></legend>
    </fieldset>
    <div class="site-text">
      <p>很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。</p>
      <table class="layui-table">
        <colgroup>
          <col width="220">
          <col>
          <col width="150">
        </colgroup>
        <thead>
          <tr>
            <td>语法</td>
            <td>说明</td>
            <td>适用场景</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>table.reload(ID, options, deep)</td>
            <td>
              参数 <em>ID</em> 即为基础参数id对应的值，见：<a href="#id">设定容器唯一ID</a>
              <br>参数 <em>options</em> 即为各项基础参数
              <br>参数 <em>deep</em>：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false
              <br><span class="layui-font-red">注意：deep 参数为 layui 2.6.0 开始新增。</span>
            </td>
            <td>所有渲染方式</td>
          </tr>
          <tr>
            <td>tableIns.reload(options, deep)</td>
            <td>
              参数同上
              <br>tableIns 可通过  var tableIns = table.render() 得到
           </td>
            <td>仅限方法级渲染</td>
          </tr>
        </tbody>
      </table>

      <blockquote class="layui-elem-quote">
        <span class="layui-font-red">请注意：如果你在 2.6.0 之前版本已经习惯深度重载模式的</span>，现在请在第三个参数中，加上 true，如：</p>

        <blockquote class="layui-elem-quote">
table.reload(ID, options, <span class="layui-font-red">true</span>); //这样就跟 <span class="layui-font-red">v2.5.7</span> 及之前版本处理机制完全一样。或者您也可以像下面这样做：
        </blockquote>
        <pre>
//由于 2.6.0 之前的版本是采用深重载，
//所以如果您之前真实采用了深重载机制，那么建议将以下代码放入您的全局位置，从而可对老项目起到兼容作用
var tableReload = table.reload;
table.reload = function(){
  var args = [];
  layui.each(arguments, function(index, item){
    args.push(item);
  });
  args[2] === undefined && (args[2] = true);
  return tableReload.apply(null, args);
};
//<span class="layui-font-red">但如果你之前没有采用深重载机制，也可以不放。不放甚至可以解决你之前因为多次 reload 而带来的各种参数重叠问题 </span>
        </pre>
      </blockquote>

      <p>重载示例：</p>

      <pre class="layui-code" lay-title="示例1：自动化渲染的重载">
【HTML】
&lt;table class="layui-table" lay-data="{id: 'idTest'}"&gt; …… &lt;/table&gt;

【JS】
table.reload('idTest', {
  url: '/api/table/search'
  ,where: {} //设定异步数据接口的额外参数
  //,height: 300
});
      </pre>

      <pre class="layui-code" lay-title="示例2：方法级渲染的重载">
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
  elem: '#id'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
});

//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
}); //只重载数据
      </pre>
      <p>注意：<em>这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取</em></p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="export">导出任意数据</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        尽管 table 的工具栏内置了数据导出按钮，但有时你可能需要通过方法去导出任意数据，那么可以借助以下方法：
        <br>语法：<em>table.exportFile(id, data, type)</em>
      </p>
      <pre class="layui-code">
var ins1 = table.render({
  elem: '#demo'
  ,id: 'test'
  //,…… //其它参数
})

//将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据
      </pre>
      <p>事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：</p>
      <pre class="layui-code">
table.exportFile(['名字','性别','年龄'], [
  ['张三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="on">事件</a></legend>
    </fieldset>
    <div class="site-text">
      <p>
        语法：<em>table.on('event(filter)', callback);</em>
        <br>注：event 为内置事件名，filter 为容器 lay-filter 设定的值
        <br>目前所支持的所有事件见下文
      </p>
      <p>
        默认情况下，事件所触发的是全部的table模块容器，但如果你只想触发某一个容器，使用事件过滤器即可。
        <br>假设原始容器为：<em>&lt;table class="layui-table" lay-filter="test">&lt;/table></em> 那么你的事件写法如下：
      </p>
      <pre class="layui-code">
//以复选框事件为例
table.on('checkbox(test)', function(obj){
  console.log(obj)
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="ontoolbar">触发头部工具栏事件</a></legend>
    </fieldset>
    <div class="site-text">
      <p>点击头部工具栏区域设定了属性为 <em>lay-event=""</em> 的元素时触发（<span style="color:#FF5722;">该事件为 layui 2.4.0 开始新增</span>）。如：</p>
      <pre class="layui-code">
原始容器
&lt;table id=&quot;demo&quot; lay-filter=&quot;test&quot;&gt;&lt;/table&gt;

工具栏模板：
&lt;script type=&quot;text/html&quot; id=&quot;toolbarDemo&quot;&gt;
  &lt;div class=&quot;layui-btn-container&quot;&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;add&quot;&gt;添加&lt;/button&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;delete&quot;&gt;删除&lt;/button&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;update&quot;&gt;编辑&lt;/button&gt;
  &lt;/div&gt;
&lt;/script&gt;

&lt;script;&gt;
//JS 调用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他参数
});

//触发事件
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
&lt;/script&gt;
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="oncheckbox">触发复选框选择</a></legend>
    </fieldset>
    <div class="site-text">
      <p>点击复选框时触发，回调函数返回一个 object 参数：</p>
      <pre class="layui-code">
table.on('checkbox(test)', function(obj){
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="onradio">触发单选框选择</a></legend>
    </fieldset>
    <div class="site-text">
      <p>点击表格单选框时触发，回调函数返回一个 object 参数，携带的成员如下：</p>
      <pre class="layui-code">
table.on('radio(test)', function(obj){ //test 是 table 标签对应的 lay-filter 属性
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="onedit">触发单元格编辑</a></legend>
    </fieldset>
    <div class="site-text">
      <p>单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：</p>
      <pre class="layui-code">
table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.value); //得到修改后的值
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.data); //所在行的所有相关数据
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="onrow">触发行单双击事件</a></legend>
    </fieldset>
    <div class="site-text">
      <p>点击或双击行时触发。<span style="color:#FF5722;">该事件为 layui 2.4.0 开始新增</span></p>
      <pre class="layui-code">
//触发行单击事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});

//触发行双击事件
table.on('rowDouble(test)', function(obj){
  //obj 同上
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend>触发行中工具条点击事件</legend>
    </fieldset>
    <div class="site-text">
      <p>具体用法见：<a href="#ontool">绑定工具条</a></p>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="onsort">触发排序切换</a></legend>
    </fieldset>
    <div class="site-text">
      <p>点击表头排序时触发，它通用在基础参数中设置 autoSort: false 时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个 object 参数，携带的成员如下：</p>
      <pre class="layui-code">
//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
  elem: '#id'
  ,autoSort: false //禁用前端自动排序。<span style="color: #FF5722;">注意：该参数为 layui 2.4.4 新增</span>
  //,… //其它参数省略
});

//触发排序事件
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象

  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
  table.reload('idTest', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field //排序字段
      ,order: obj.type //排序方式
    }
  });

  layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
      </pre>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="docend">结语</a></legend>
    </fieldset>
    <div class="site-text">
      <p>table 模块自推出以来，因某些功能的缺失，一度饱受非议，也背负了各种莫须有的锅，然而我始终未曾放弃对它的优化。为了迎合 layui 开箱即用的理念，我的工作并不是那么轻松。无论是从代码，还是文档和示例的撰写上，我都进行了多次调整，为的只是它能被更多人认可。——贤心</p>
    </div>

    <div class="layui-elem-quote">
  <p>layui - 在每一个细节中，用心与你沟通</p>
</div>

  </div>
</div>


<div class="layui-footer footer footer-doc">
    <p>致敬layui</p>


</div>
<script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>


<script>
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: 'demo/tabledata.json' //数据接口
    ,page: true //开启分页
    ,cols: [[
      {field:'id', title: 'ID', width:80, sort: true}
      ,{field:'username', title: '用户名', width:80}
      ,{field:'sex', title: '性别', width:80, sort: true}
      ,{field:'city', title: '城市'} //如果未设定列宽，宽度将会自动分配
      ,{field:'sign', title: '签名'}
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', title: '财富', sort: true}
    ]]
  });
});
</script>
</body>
</html>