转换静态表格

最新推荐文章于 2024-04-02 18:12:43 发布

东南西北中瓜

最新推荐文章于 2024-04-02 18:12:43 发布

阅读量161

点赞数

分类专栏： layui笔记

本文链接：https://blog.csdn.net/xonmao2008/article/details/109703581

版权

layui笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>立即转化为数据表格</title>
  <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet" />
  <script src="https://lib.baomitu.com/jquery/3.1.0/jquery.min.js "></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>
<body>
    
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
  <button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
</div>
 
<table lay-filter="parse-table-demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:200}">昵称</th>
      <th lay-data="{field:'joinTime', width:150}">加入时间</th>
      <th lay-data="{field:'sign', minWidth: 180}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>2016-11-28</td>
      <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>2016-11-30</td>
      <td>人生就像是一场修行 C</td>
    </tr>
  </tbody>
 <thead>
</table>

<script>
layui.use('table', function(){
  var table = layui.table;
 
  var $ = layui.$, active = {
    parseTable: function(){
      table.init('parse-table-demo', { //转化静态表格
        //height: 'full-500'
        //支持所有基础参数
      }); 
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>
</body>
</html>

东南西北中瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转换静态表格

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>立即转化为数据表格</title> <link href="https://www.layuicdn.com/l.
复制链接

扫一扫

专栏目录