cwwweb_admin-KeTuoDongBiaoGe
/
index.html

<!DOCTYPE>
<html>

<head>
    <title>Bootstrap table</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-table.min.css"> </head>
<link rel="stylesheet" href="./css/dragtable.css">
<style>
img {
    max-width: 50px;
    max-height: 50px;
}

.bootstrap-table {
    height: 500px;
}

.rc-handle-container {
    position: relative;
}

.rc-handle {
    position: absolute;
    width: 7px;
    cursor: ew-resize;
    margin-left: -3px;
    z-index: 2;
}

#table  tr td:last-child, #table  tr th:last-child{
    border-right: 1px solid #ddd;
}
table {
    width: auto!important;
}

table.rc-table-resizing {
    cursor: ew-resize;
}

table.rc-table-resizing thead,
table.rc-table-resizing thead>th,
table.rc-table-resizing thead>th>a {
    cursor: ew-resize;
}

table th {
    position: relative;
}

table th .drag-line {
    position: absolute;
    height: 100px;
    width: 20px;
    background: red;
    top: 0;
    right: -10px;
    z-index: 88;
    opacity: 0
}

table th .drag-line:hover {
    cursor: ew-resize;
}
</style>

<body>
    <table id="table" data-reorderable-columns="true" data-show-export="true"></table>
</body>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-table2.js"></script>
<script src="./js/bootstrap-table-reorder-columns.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/jquery.dragtable.js"></script>
<script src="./js/localforage.min.js"></script>
<script src="./js/FileSaver.min.js"></script>
<script src="./js/tableExport.min.js"></script>
<script src="./js/bootstrap-table-export.js"></script>
<script src="./js/cache.js"></script>
<script src="./js/test1.js"></script>
<script>
window.onload = function() {
    var saveName = 'userTable';
    getRemember(saveName, function(data) {
        var tableConfig = data || {
            sortable: true,
            cache: false,
            sortName: 'memberType',
            // sortClass: '用户名',
            sidePagination: 'client',
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [15, 50, 100],
            showColumns: true,
            search: true,
            clickToSelect: true,
            columns: [{
                checkbox: true,
                title: '选择'
            }, {
                field: 'headImage',
                title: '头像<div class="drag-line" data-name="headImage"></div>'
            }, {
                field: 'nickName',
                title: '用户名<div class="drag-line" data-name="nickName"></div>',
                align: 'center',
                sortable: true
            }, {
                field: 'webStoreTypeStr',
                title: '等级<div class="drag-line" data-name="webStoreTypeStr"></div>',
                sortable: true
            }, {
                field: 'memberType',
                title: '用户级别<div class="drag-line" data-name="memberType"></div>',
                sortable: true
            }],
            data: []
        }
        tableConfig.onColumnSwitch = function(field, checked) {
            let list = data || tableConfig;
            list.columns.forEach(function(item) {
                if(item.field == field) {
                    item.visible = checked;
                    updateTable(saveName, list)
                }
            })
        }
        tableConfig.onReorderColumn = function(name) {
            let list = data || tableConfig;
            let _list = [];
            list.columns.forEach(function(item, index) {
                if(item.field) {
                    let x = list.columns.filter(function(a) {return a.field == name[index]})
                    name[index] = x[0];
                } else {
                   name[index] = item;
                }
            })
            list.columns = name;
            updateTable(saveName, list)
        }
        tableConfig.onClickRow = function(row, $element) {
            $('#table').bootstrapTable('uncheckAll')
        }
        $.ajax({
            url: './date1.json',
            data: null,
            type: 'GET',
            success: function(res) {
                var datas = res.data.datas;
                datas.forEach(function(item) {
                    item.headImage = '<img src="' + item.headImage + '">'
                })
                tableConfig.data = datas;
                $('#table').bootstrapTable(tableConfig);
                initTable(tableConfig);
                // $("#table1").bootstrapTable('resetWidth')
                // $("#table1").colResizable({
                //     liveDrag: true,
                //     flush: true,
                //     postbackSafe: true,
                //     resizeMode: 'overflow'
                // });
            },
            dataType: 'json'
        });
    })

    function initTable(config) {
        ResizableColumns(config, saveName);
    }
}
</script>

</html>