<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table Examples</title>
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
    <link rel="stylesheet" href="/assets/examples.css">
    <script src="/assets/jquery.min.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="/assets/bootstrap-table/src/bootstrap-table-zh-CN.js"></script>
    <script src="/assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>

    <script src="/assets/ga.js"></script>
    <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
    <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="toolbar">
        <button class="btn btn-primary" >
            <i class="glyphicon glyphicon-ok"></i> 导入
        </button>
        <button id="remove" class="btn btn-danger" disabled>
            <i class="glyphicon glyphicon-remove"></i> 删除
        </button>
    </div>
    <table id="table"
           data-toggle="table"
           data-toolbar="#toolbar"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-show-export="true"
           data-minimum-count-columns="2"
           data-pagination="true"
           data-id-field="id"
           data-show-footer="false"
           data-url="/getData">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true" data-align="center" data-valign="middle"></th>
            <th data-field="xm" data-title="姓名" data-valign="middle" data-editable="true"
                data-sortable="true" data-footerFormatter="totalTextFormatter"></th>
            <th data-field="sfzh" data-title="身份证号" data-valign="middle" data-editable="true"
                data-sortable="true" data-footerFormatter="totalTextFormatter"></th>
            <th data-field="xb" data-title="性别" data-valign="middle" data-editable="true"
                data-sortable="true" data-footerFormatter="totalTextFormatter"></th>
        </tr>
        </thead>
    </table>
</div>

<script>
    var $table = $('#table'),
        $remove = $('#remove'),
        selections = [];

//    function initTable() {
//        $table.bootstrapTable({
//            height: getHeight(),
//            columns: [
//                [
//                    {
//                        field: 'state',
//                        checkbox: true,
//                        rowspan: 2,
//                        align: 'center',
//                        valign: 'middle'
//                    }, {
//                        title: 'Item ID',
//                        field: 'id',
//                        rowspan: 2,
//                        align: 'center',
//                        valign: 'middle',
//                        sortable: true,
//                        footerFormatter: totalTextFormatter
//                    }, {
//                        title: 'Item Detail',
//                        colspan: 3,
//                        align: 'center'
//                    }
//                ],
//                [
//                    {
//                        field: '身份证号',
//                        title: 'Item Name',
//                        sortable: true,
//                        editable: true,
//                        footerFormatter: totalNameFormatter,
//                        align: 'center'
//                    }, {
//                        field: 'price',
//                        title: 'Item Price',
//                        sortable: true,
//                        align: 'center',
//                        editable: {
//                            type: 'text',
//                            title: 'Item Price',
//                            validate: function (value) {
//                                value = $.trim(value);
//                                if (!value) {
//                                    return 'This field is required';
//                                }
//                                if (!/^\$/.test(value)) {
//                                    return 'This field needs to start width $.'
//                                }
//                                var data = $table.bootstrapTable('getData'),
//                                    index = $(this).parents('tr').data('index');
//                                console.log(data[index]);
//                                return '';
//                            }
//                        },
//                        footerFormatter: totalPriceFormatter
//                    }, {
//                        field: 'operate',
//                        title: 'Item Operate',
//                        align: 'center',
//                        events: operateEvents,
//                        formatter: operateFormatter
//                    }
//                ]
//            ]
//        });
//         sometimes footer render error.
//        setTimeout(function () {
//            $table.bootstrapTable('resetView');
//        }, 200);
//        $table.on('check.bs.table uncheck.bs.table ' +
//                'check-all.bs.table uncheck-all.bs.table', function () {
//            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

//             save your data, here just save the current page
//            selections = getIdSelections();
//             push or splice the selections if you want to save all data selections
//        });
//        $table.on('expand-row.bs.table', function (e, index, row, $detail) {
//            if (index % 2 == 1) {
//                $detail.html('Loading from ajax request...');
//                $.get('LICENSE', function (res) {
//                    $detail.html(res.replace(/\n/g, '<br>'));
//                });
//            }
//        });
//        $table.on('all.bs.table', function (e, name, args) {
//            console.log(name, args);
//        });
//        $remove.click(function () {
//            var ids = getIdSelections();
//            $table.bootstrapTable('remove', {
//                field: 'id',
//                values: ids
//            });
//            $remove.prop('disabled', true);
//        });
//        $(window).resize(function () {
//            $table.bootstrapTable('resetView', {
//                height: getHeight()
//            });
//        });
//    }
//
//    function getIdSelections() {
//        return $.map($table.bootstrapTable('getSelections'), function (row) {
//            return row.id
//        });
//    }
//
//    function responseHandler(res) {
//        $.each(res.rows, function (i, row) {
//            row.state = $.inArray(row.id, selections) !== -1;
//        });
//        return res;
//    }
//
//    function detailFormatter(index, row) {
//        var html = [];
//        $.each(row, function (key, value) {
//            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
//        });
//        return html.join('');
//    }
//
//    function operateFormatter(value, row, index) {
//        return [
//            '<a class="like" href="javascript:void(0)" title="Like">',
//            '<i class="glyphicon glyphicon-heart"></i>',
//            '</a>  ',
//            '<a class="remove" href="javascript:void(0)" title="Remove">',
//            '<i class="glyphicon glyphicon-remove"></i>',
//            '</a>'
//        ].join('');
//    }
//
//    window.operateEvents = {
//        'click .like': function (e, value, row, index) {
//            alert('You click like action, row: ' + JSON.stringify(row));
//        },
//        'click .remove': function (e, value, row, index) {
//            $table.bootstrapTable('remove', {
//                field: 'id',
//                values: [row.id]
//            });
//        }
//    };

//    function totalTextFormatter(data) {
//        return 'Total';
//    }
//
//    function totalNameFormatter(data) {
//        return data.length;
//    }
//
//    function totalPriceFormatter(data) {
//        var total = 0;
//        $.each(data, function (i, row) {
//            total += +(row.price.substring(1));
//        });
//        return '$' + total;
//    }
//
//    function getHeight() {
//        return $(window).height() - $('h1').outerHeight(true);
//    }
//
//    $(function () {
//        var scripts = [
//                location.search.substring(1) || '/assets/bootstrap-table/src/bootstrap-table.js',
//                '/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
//                'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
//                '/assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
//                'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
//            ],
//            eachSeries = function (arr, iterator, callback) {
//                callback = callback || function () {};
//                if (!arr.length) {
//                    return callback();
//                }
//                var completed = 0;
//                var iterate = function () {
//                    iterator(arr[completed], function (err) {
//                        if (err) {
//                            callback(err);
//                            callback = function () {};
//                        }
//                        else {
//                            completed += 1;
//                            if (completed >= arr.length) {
//                                callback(null);
//                            }
//                            else {
//                                iterate();
//                            }
//                        }
//                    });
//                };
//                iterate();
//            };
//
//        eachSeries(scripts, getScript, initTable);
//    });
//
//    function getScript(url, callback) {
//        var head = document.getElementsByTagName('head')[0];
//        var script = document.createElement('script');
//        script.src = url;
//
//        var done = false;
//        script.onload = script.onreadystatechange = function() {
//            if (!done && (!this.readyState ||
//                    this.readyState == 'loaded' || this.readyState == 'complete')) {
//                done = true;
//                if (callback)
//                    callback();
//
//                script.onload = script.onreadystatechange = null;
//            }
//        };
//
//        head.appendChild(script);
//
//        return undefined;
//    }
</script>
</body>
</html>
