http://issues.wenzhixin.net.cn/bootstrap-table/

<!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="ga.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">

    <h1>Bootstrap Table Examples <a href="https://github.com/wenzhixin/bootstrap-table-examples" class="btn btn-primary" role="button" target="_blank">Learn more &raquo;</a></h1>

    <div id="toolbar">

        <button id="remove" class="btn btn-danger" disabled>

            <i class="glyphicon glyphicon-remove"></i> Delete

        </button>

    </div>

    <table id="table"

           data-toolbar="#toolbar"

           data-search="true"

           data-show-refresh="true"

           data-show-toggle="true"

           data-show-columns="true"

           data-show-export="true"

           data-detail-view="true"

           data-detail-formatter="detailFormatter"

           data-minimum-count-columns="2"

           data-show-pagination-switch="true"

           data-pagination="true"

           data-id-field="id"

           data-page-list="[10, 25, 50, 100, ALL]"

           data-show-footer="false"

           data-side-pagination="server"

           data-url="/examples/bootstrap_table/data"

           data-response-handler="responseHandler">

    </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: 'name',

                        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;

        // Attach handlers for all browsers

        script.onload = script.onreadystatechange = function() {

            if (!done && (!this.readyState ||

                    this.readyState == 'loaded' || this.readyState == 'complete')) {

                done = true;

                if (callback)

                    callback();

                // Handle memory leak in IE

                script.onload = script.onreadystatechange = null;

            }

        };

        head.appendChild(script);

        // We handle everything using the script element injection

        return undefined;

    }

</script>

</body>

</html>

Bootstrap Table 使用示例及代码的更多相关文章

  1. Bootstrap 实现CRUD示例及代码

    https://github.com/wenzhixin/bootstrap-table-examples/blob/master/crud/index.html <!DOCTYPE html& ...

  2. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  3. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  4. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  6. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  7. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  8. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  9. ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI

    一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...

随机推荐

  1. [解决] HiveServer2中使用jdbc访问hbase时导致ZooKeeper连接持续增加的解决

    最近在监控中发现HiveServer2连接到zookeeper里的连接持续上涨,很奇怪,虽然知道HiveServer2支持并发连接,使用ZooKeeper来管理Hive表的读写锁,但我们的环境并不需要 ...

  2. Leetcode:52. N-QueensII

    Description Follow up for N-Queens problem. Now, instead outputting board configurations, return the ...

  3. 用pip命令安装Python第三方库

    一.准备工作 1. 安装pip (1)下载 pip下载地址:https://pypi.python.org/pypi/pip#downloads (2)安装 下载后解压,控制台下进入解压后的目录,运行 ...

  4. HDFS fs 基本命令

    https://hadoop.apache.org/docs/r2.7.1/hadoop-project-dist/hadoop-common/FileSystemShell.html#Overvie ...

  5. 【POJ】2892 Tunnel Warfare

    [算法]平衡树(treap) [题解]treap知识见数据结构 在POJ把语言从G++换成C++就过了……??? #include<cstdio> #include<algorith ...

  6. JS语句循环（100以内奇偶数、100以内与7先关的数、100以内整数的和、10以内阶乘、乘法口诀、篮球弹起高度、64格子放东西）

    3.循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都 ...

  7. hdu 1150 Machine Schedule（二分匹配，简单匈牙利算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 Machine Schedule Time Limit: 2000/1000 MS (Java/ ...

  8. Eureka服务续约(Renew)源码分析

    主要对Eureka的Renew(服务续约),从服务提供者发起续约请求开始分析,通过阅读源码和画时序图的方式,展示Eureka服务续约的整个生命周期.服务续约主要是把服务续约的信息更新到自身的Eurek ...

  9. 火狐浏览器下点击a标签时出现虚线的解决方案

    1.兼容性问题 火狐浏览器下点击a标签时出现虚线 2.解决方案 a:focus { outline: none;}

  10. linux安装(Ubuntu)——（二）

    centos的安装参考: http://www.runoob.com/linux/linux-install.html Linux 安装(Ubuntu) 虚拟机:虚拟机(Virtual Machine ...