zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表格扩展</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #xTable2 + .layui-table-view .layui-table-click, #xTable2 + .layui-table-view .layui-table-hover, #xTable2 + .layui-table-view .layui-table tbody tr:hover {
            background: transparent;
        }
    </style>
</head>
<body>

<!-- 页面加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 5px;">
            <div class="layui-tab layui-tab-brief" lay-filter="tableXTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">前端分页 | 搜索 | 排序</li>
                    <li>合并单元格</li>
                    <li>后端排序 | 鼠标右键</li>
                </ul>
                <div class="layui-tab-content" style="padding-left: 0;padding-right: 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form toolbar">
                            <div class="layui-form-item text-right">
                                <div class="layui-inline pull-left">
                                    <button class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                                    <button class="layui-btn layui-btn-danger icon-btn"><i
                                            class="layui-icon">&#xe640;</i>删除
                                    </button>
                                </div>
                                <div class="layui-inline">
                                    <input tb-search="xTable1" class="layui-input icon-search" type="text"/>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-btn-group">
                                        <button tb-export="xTable1" class="layui-btn layui-btn-primary icon-btn">
                                            <i class="layui-icon">&#xe67d;</i>
                                        </button>
                                        <button tb-refresh="xTable1" class="layui-btn layui-btn-primary icon-btn">
                                            <i class="layui-icon">&#xe9aa;</i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <table id="xTable1" lay-filter="xTable1"></table>
                    </div>
                    <div class="layui-tab-item ">
                        <table id="xTable2" lay-filter="xTable2"></table>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form toolbar">
                            <blockquote class="layui-elem-quote">
                                点击排序会传递“sort”和“order”字段给接口，导出数据会使用templet格式化，
                                <button class="layui-btn layui-btn-xs" id="btnExport3">
                                    <i class="layui-icon">&#xe67d;</i>导出
                                </button>
                                ，对表格行绑定
                                <button class="layui-btn layui-btn-xs" style="margin-left: 0;">鼠标右键</button>
                                菜单。
                            </blockquote>
                        </div>
                        <table id="xTable3" lay-filter="xTable3"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 表格状态列 -->
<script type="text/html" id="tableState">
    <input type="checkbox" lay-filter="ckState" value="{{d.userId}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
    <!-- export-show用于前端搜索和导出数据使用 -->
    <div class="export-show">{{d.state==0?'正常':'锁定'}}</div>
</script>

<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=315"></script>
<script>
    layui.use(['layer', 'element', 'util', 'table', 'tableX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var util = layui.util;
        var table = layui.table;
        var tableX = layui.tableX;

        // 前端分页
        tableX.renderFront({
            elem: '#xTable1',
            url: '../../../json/userAll.json',
            page: {groups: 6},
            cellMinWidth: 100,
            title: '用户表',
            cols: [[
                {type: 'checkbox'},
                {field: 'nickName', title: '用户名', sort: true},
                {field: 'sex', title: '性别', sort: true},
                {field: 'phone', title: '手机号', sort: true},
                {
                    templet: function (d) {
                        var str = '';
                        for (var i = 0; i < d.roles.length; i++) {
                            str += ('<span class="layui-badge-rim">' + d.roles[i].roleName + '</span>');
                            if (i != d.roles.length - 1) {
                                str += '<span class="layui-badge-rim layui-hide">，</span>';
                            }
                        }
                        return str;
                    }, title: '角色', sort: true
                },
                {field: 'state', templet: '#tableState', title: '状态', sort: true},
                {
                    field: 'createTime', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间', sort: true
                }
            ]]
        });

        // 合并单元格
        table.render({
            elem: '#xTable2',
            url: '../../../json/tablex1.json',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'parentName', title: '模块名称', sort: true},
                {field: 'authorityName', title: '菜单名称', sort: true},
                {field: 'authority', title: '权限标识', sort: true},
                {
                    templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间', sort: true
                }
            ]],
            done: function () {
                tableX.merges('xTable2', [1]);
            }
        });

        // 排序自动传递sort和order
        var insTb3 = tableX.render({
            elem: '#xTable3',
            url: '../../../json/user.json',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'nickName', title: '用户名', sort: true},
                {field: 'sex', title: '性别', sort: true},
                {field: 'phone', title: '手机号', sort: true},
                {
                    field: 'roleId', templet: function (d) {
                        var str = '';
                        for (var i = 0; i < d.roles.length; i++) {
                            str += ('<span class="layui-badge-rim">' + d.roles[i].roleName + '</span>');
                            if (i != d.roles.length - 1) {
                                str += '<span class="layui-badge-rim layui-hide">,</span>';
                            }
                        }
                        return str;
                    }, title: '角色', sort: true
                },
                {field: 'state', templet: '#tableState', title: '状态', sort: true},
                {
                    field: 'createTime', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间', sort: true
                }
            ]],
            done: function () {
                // 绑定鼠标右键
                tableX.bindCtxMenu('xTable3', [{
                    icon: 'layui-icon layui-icon-edit',
                    name: '修改用户',
                    click: function (d) {
                        layer.msg('点击了修改，userId：' + d.userId);
                    }
                }, {
                    icon: 'layui-icon layui-icon-unlink',
                    name: '冻结用户',
                    click: function (d) {
                        layer.msg('点击了冻结，userId：' + d.userId);
                    }
                }, {
                    icon: 'layui-icon layui-icon-close text-danger',
                    name: '<span class="text-danger">删除用户</span>',
                    click: function (d) {
                        layer.msg('点击了删除，userId：' + d.userId);
                    }
                }]);
            }
        });

        // 导出数据包含templet
        $('#btnExport3').click(function () {
            tableX.exportData({
                cols: insTb3.config.cols,
                data: table.cache.xTable3,
                fileName: '用户表'
            });
        });

        // 切换Tab重置表格尺寸
        element.on('tab(tableXTab)', function (data) {
            var tableIds = ['xTable1', 'xTable2', 'xTable3'];
            table.resize(tableIds[data.index]);
        });

        setTimeout(function () {
            table.resize('xTable1');
        }, 200);

    });
</script>
</body>
</html>