layui-soul-table_1
/
demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui-soul-table 表格扩展</title>
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="layui,table,表头筛选,tablefilter,tableChild,子表,表格筛选"/>
    <meta name="description" content="layui表头筛选,tablefilter,tableChild,子表,表格筛选"/>
    <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">
    <link rel="stylesheet" href="//www.layuicdn.com/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="soulTable.css" media="all"/>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
        .site-h1 {
            margin: 0 0 20px 20px;
            line-height: 60px;
            padding-bottom: 10px;
            color: #393D49;
            border-bottom: 1px solid #eee;
            font-size: 28px;
            font-weight: 300;
        }
        .layui-tab-item {
            height: calc(100vh - 345px);
        }
    </style>
</head>
<body class="childrenBody">
<h1 class="site-h1">给layui的table注入点灵魂</h1>
<blockquote class="layui-elem-quote">
    github地址：<a style="color: deepskyblue;" href="https://github.com/yelog/layui-soul-table" target="_blank">https://github.com/yelog/layui-soul-table</a>， 当前使用的layui版本：<b>2.4.5</b><br>
    功能点：<br>
    <ul>
        <li>1. 表头筛选、自定义条件（支持前台筛选、后台筛选[mysql|oracle]）</li>
        <li>2. 拖动列调整顺序、隐藏显示列</li>
        <li>3. excel导出（根据筛选条件和列顺序导出）</li>
        <li>4. 子表（表中表、无限层级、子表同样支持前3个功能）</li>
    </ul>
</blockquote>
<div class="layui-tab layui-tab-brief" lay-filter="tableClass">
    <ul class="layui-tab-title">
        <li class="layui-this">更新日志</li>
        <li>前台分页</li>
        <li>不分页</li>
        <li>子表</li>
        <li>后台分页</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show"><iframe src="log.html?v=v1.8.0"></iframe></div>
        <div class="layui-tab-item"><iframe data-src="font-table-page.html?v=v1.8.0"></iframe></div>
        <div class="layui-tab-item"><iframe data-src="font-table.html?v=v1.8.0"></iframe></div>
        <div class="layui-tab-item"><iframe data-src="font-table-child.html?v=v1.8.0"></iframe></div>
        <div class="layui-tab-item"><iframe data-src="http://47.98.40.63:8080?v=v1.8.0"></iframe></div>
    </div>
</div>
<script type="text/javascript" src="//www.layuicdn.com/layui/layui.js"></script>
<script>

    layui.use(['element'], function () {
        var element = layui.element,
            $ = layui.$;

        element.on('tab(tableClass)', function(){
            var curIframe = $('.layui-tab-content>.layui-tab-item:eq('+$(this).index()+')>iframe');
            if (!curIframe.attr('src')) {
                curIframe.attr('src', curIframe.data('src'));
            }
        });

    })
</script>
<a target="_blank" href="https://github.com/yelog/layui-soul-table"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</body>
</html>