本篇文章就给大家介绍带来bootstrap之bootstrap-table使用总结 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！
一、下载：https://github.com/wenzhixin/bootstrap-table
二、文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
三、引用：<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><script src="bootstrap-table-zh-cn.js"></script>
注意：最后一个是一些提醒文字，如果有引用这个js则会以中文提示，如果没有则以英文提示。
四、基本用法：html里：
<table id="table"></table>
js里：
        $('#table').bootstraptable({            columns: [{                field: 'id',                title: 'item id'            }, {                field: 'name',                title: 'item name'            }, {                field: 'price',                title: 'item price'            }],            data: [{                id: 1,                name: 'item 1',                price: '$1'            }, {                id: 2,                name: 'item 2',                price: '$2'            }]        });
这个data也可以换成url：
$('#table').bootstraptable({    url: 'data1.json',    columns: [{        field: 'id',        title: 'item id'    }, {        field: 'name',        title: 'item name'    }, {        field: 'price',        title: 'item price'    }, ]});
注意：url和data的区别是：url是异步请求远程数据；data是直接把数据赋值给他。在主表和子表都一样可以这样使用。
五、引入fonts：一些图标需要用到bootstrap里面的文件，要从下载的bootstrap包里面拷贝过来放到对应的目录（看错误提醒）。
但是只放进去是访问不了的，因为他不是普通的文件，所以要设置。
进入iis管理器，找到“mime类型”，双击进去，在右边菜单点击“添加”，分别添加以下类型：
.woffapplication/x-font-woff.woff2          application/x-font-woff
再刷新页面就可以加载fonts里面这些文件了。
六、定制组件(function () {    function init(table,url,params,titles,hascheckbox,toolbar) {        $(table).bootstraptable({            url: url,                           //请求后台的url（*）            method: 'post',                     //请求方式（*）            toolbar: toolbar,                   //工具按钮用哪个容器            striped: true,                      //是否显示行间隔色            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）            pagination: true,                   //是否显示分页（*）            sortable: false,                    //是否启用排序            sortorder: asc,                   //排序方式            queryparams: queryparams,           //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2}            sidepagination: server,           //分页方式：client客户端分页，server服务端分页（*）            pagenumber:1,                       //初始化加载第一页，默认第一页            pagesize: 20,                       //每页的记录行数（*）            pagelist: [20, 50, 100],            //可供选择的每页的行数（*）            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大            strictsearch: true,            showcolumns: true,                  //是否显示所有的列            showrefresh: true,                  //是否显示刷新按钮            minimumcountcolumns: 2,             //最少允许的列数            clicktoselect: true,                //是否启用点击选中行            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度            uniqueid: id,                     //每一行的唯一标识，一般为主键列            showtoggle:true,                    //是否显示详细视图和列表视图的切换按钮            cardview: false,                    //是否显示详细视图            detailview: false,                  //是否显示父子表            columns: createcols(params,titles,hascheckbox),            data: [{                id: 1,                name: 'item 1',                price: '$1'            }, {                id: 2,                name: 'item 2',                price: '$2'            }]        });    }    function createcols(params,titles,hascheckbox) {        if(params.length!=titles.length)            return null;        var arr = [];        if(hascheckbox)        {            var objc = {};            objc.checkbox = true;            arr.push(objc);        }        for(var i = 0;i<params.length;i++) { var obj = {}; obj.field = params[i]; obj.title = titles[i]; arr.push(obj); } return arr; } //可发送给服务端的参数：limit->pagesize,offset->pagenumber,search->searchtext,sort->sortname(字段),order->sortorder('asc'或'desc')    function queryparams(params) {        return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的            limit: params.limit,   //页面大小            offset: params.offset  //页码            //name: $(#txt_name).val()//关键字查询        };    }    // 传'#table'    createbootstraptable = function (table,url,params,titles,hascheckbox,toolbar) {        init(table,url,params,titles,hascheckbox,toolbar);    }})();
1、调用：createbootstraptable('#table','',['id','name','price'],['item id','item name!','item price!'],true,'#toolbar');
2、模块：注意，这些只要添加上一行代码就会自动显示的：
pagination 显示分页search     搜索功能showcolumns  控制显示哪些列的按钮showrefresh  刷新按钮showtoggle   详细视图和列表视图切换按钮
但是这个不会：
toolbar
这个toolbar会关联到我们填的一个元素，但是他并不会自动创建所有菜单，而是我们要创建好菜单，他只不过把这个菜单放到合适的位置，实现这些菜单的功能还需要我们自己去做。toolbar如下：
    <p id="toolbar" class="btn-group">        <button id="btn_add" type="button" class="btn btn-default">            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增        </button>        <button id="btn_edit" type="button" class="btn btn-default">            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改        </button>        <button id="btn_delete" type="button" class="btn btn-default">            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除        </button>    </p>
3、sidepagination这个是选择服务端或者客户端分页，客户端则填'client'，服务端则填'server'，他们的数据结构是不同的。
这是客户端分页的数据结构：
[    {        id: 0,        name: item 0,        price: $0    },    {        id: 1,        name: item 1,        price: $1    },    {        id: 2,        name: item 2,        price: $2    }]
这是服务端分页的数据结构：
{    total: 200,    rows: [        {            id: 0,            name: item 0,            price: $0        },        {            id: 1,            name: item 1,            price: $1        },        {            id: 2,            name: item 2,            price: $2        }    ]}
这是因为客户端来分页的话，他直接根据数据总量进行判断要分成多少页，而服务端的话就需要返回一个total给他，因为服务端返回给的数据是一个片段，他没办法根据这个片段来计算多少页。
注意：这里可以看到，服务端分页和客户端分页数据结构的层次是不同的。他接受哪种数据结构，取决于是否加这个参数：
sidepagination:'server'
特别是做子表的时候，因为觉得没有做分页的必要，就没了这句话，结果就是数据过去了死活不显示，排查很久才发现是这个问题。
4、参数上传我们知道，当我们对table设置一个url的时候，他不仅是请求这个url，他还会带一些参数上来，他到底带来了什么参数？
我们来一个最简单的测试一下：
        $('#table').bootstraptable({            striped: true,            pagination:true,            sidepagination:'server',            url:'/xx/yy',            columns: [{                field: 'id',                title: 'item id'            }, {                field: 'name',                title: 'item name'            }, {                field: 'price',                title: 'item price'            }]        });
这里我们简单的初始化了一个bootstrap-table，数据来源我们指定了url，有个参数叫method，默认是'get'，也可以设为'post'，如果实际上线最好设为'post'，但是这里我们就用默认的好了，可以直接在浏览器的控制台看到他请求的参数。
我们可以看到带了一些参数上来
(1)order=asc表示排序是升序排序，这个我们可以在参数里面设置：sortorder: asc/desc(两种选一种)
(2)offset=0表示从数据从哪个row开始，简单的说从第几行数据开始
(3)limit=10表示选取多少个数据，也就是一页有多少条数据
2,3跟参数pagenumber和pagesize是紧密关联的。
pagesize对应的就是limit，因此改变pagesize就改变了limit；
pagenumber结合pagesize可以算出offset。
比如pagenumber=1,pagesize=30，那么offset=0，limit=30；
比如pagenumber=2,pagesize=30，那么offset=30，limit=30。
他不传第几页上来，而是传从第几行开始，选取多少行，这样一个数据。
注意：pagenumber从1开始而非从0开始，但是offset是从0开始的。
如果我尝试设置pagenumber:0,pagesize:30我们会发现offset=-30,limit=30，这是不对的。
5、参数的查看、修改那么我们可以直接查看这些参数以及修改吗？答案是可以的。
有个原始参数就是用来配置这个：
queryparams:testqparams
创建函数：
function testqparams(params) {            alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数        }
我们当然可以修改或者添加参数：
        function testqparams(params) {            return {                limit:params.limit,                offset:params.offset,                order:params.order,                abc:123,                def:456            }        }
有几点要注意：
1、我们当然可以修改limit、offset这些参数，但是不建议在这里改，我们可以用上面这种方式还给他赋值；
2、虽然没有改动他，我们也不要丢了，如果在这里没写参数就丢了，传递的参数会以这里的为准；
3、我们可以增加新的参数。
七、显示图片字段通常是一个地址，那么我们要显示图片应该使用formatter：
{                field: 'thumb_img',                title: '主图',                align: 'center',                formatter:function (value,row,index) {                    return '<img src='+value+' width=50 class="img-rounded" >';                }            }
可以直接定义宽度，图片会自动进行缩放。
八、行内编辑功能<1>bootstrap-editable需要一个bootstrap插件叫做bootstrap-editable，现在改名叫做x-editable了，可以适用不同的框架。
地址：https://github.com/vitalets/x-editable
下载下来之后，找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。
<2>bootstrap-table-editable这是一个bootstrap-table的插件（插件的插件），这个插件呢就在我们下载的bootstrap-table包里，路径是dist/extensions/editable
把他拷到我们的对应目录下即可
<3>引入<link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?> rel=stylesheet><script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>></script><script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>></script>
注意他们跟jquery、bootstrap、bootstrap-table的依赖关系，所以要放在他们的后面。
<4>使用1：在列定义里面加上editable:true，比如：
                field:'addr',                title:'地址',                editable:true,
就会变成可编辑状态了
<5>使用2：编辑完成我们要添加一个回调
在bootstraptable顶级的属性定义里面，添加一个回调函数：
            oneditablesave:function (field,row,oldvalue,$el) {                //alert('保存addr='+row.addr+' id='+row.itemid);            }
这里我们可以看到当编辑完保存的时候就会调用到这个函数，在row里面有所有当前行的信息，那么我们可以通过把这个信息用ajax传递到服务器保存起来。
编辑功能完成。
<6>保存验证+ajax保存确认+取消保存我们在实际开发当中，经常需要这样的功能：
(1)验证用户的输入是否正确；
(2)如果用户输入不正确，就不要在页面上显示了，直接显示保存不了；
(3)如果用户输入正确，通过ajax请求保存到后台；
(4)如果保存到后台失败，应该返回前端失败的消息，前端的内容回退到保存前的状态；
(5)如果保存成功，前端也做相应的显示样式调整及状态确定。
在上面“使用1”及“使用2”当中，当点击保存的时候，在save函数里验证不起作用，你再验证他也保存进去了。所以验证另有地方。
应该这样做：
(1)把editable:true改为：                    validate:function (value) {                        value = $.trim(value);                        if (!value)                        {                            return '必须填入一个网址，不能放空！';                        }                        if (!checkurl(value))                        {                            return '输入的不是一个合法的网址！';                        }                    }
另外，在这个函数里，要取的row数据可以这样：
                        var data = $('#table').bootstraptable('getdata');                        var index = $(this).parents('tr').data('index');                        console.log(data[index]);
这是因为这个$(this)可以指向这个当前单元格
这样输入就有验证功能，return一个字符串他会自动不保存进去，而显示这个字符串的提示。
注意，验证的保存规则：
如果return '';  则会保存空字符串；
如果return 'xxx';  则不会保存这个字符串，而是作为提示显示出来；
如果不return，则按照原value保存。
(2)把oneditablesave改为：                oneditablesave:function (field,row,oldvalue,$el) {                    // 测试证明oldvalue取到的是undefined                    $.post('xxx/yyy')                        .done(function (result) {                            //在这里解析result                            if(保存成功)                            {                                // 页面提示保存成功                            }else                            {                                // 页面提示保存失败                                // buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段，就是为了在必要的时候恢复数据                                $el.text(row.buy_addr_bak);                            }                            // 不管保存成功还是失败，已经不是编辑状态，把加粗去掉                            $el.removeclass('editable-unsaved');                        });                }
另外，在这个函数里，如果要取到row数据可以这样（虽然这里没有必要，参数里已经有了）：
                var data = $('#table').bootstraptable('getdata');                var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents                console.log(data[index]);
九、自动换行在给table加上样式：
style=word-break:break-all; word-wrap:break-all;
十、父子表功能：点击行首的加号，下拉展开一个子表
<1>在父表的属性里添加
detailview:true
<2>添加回调函数
                onexpandrow:function (index,row,$detail) {                    initsubtable(index,row,$detail);                }
当点击行首的加号，将会触发这个回调函数，这个回调函数会再去调用执行函数。
<3>执行函数
        function initsubtable(index,row,$detail) {            var parentid = row.menu_id;            var cur_table = $detail.html('<table></table>').find('table');//注意这个'table'不是一个id，他在任何情况下不需要改变            $(cur_table).bootstraptable({                url:'',                method:'post',                queryparams:{strparentid:parentid},                ajaxoptions:{strparentid:parentid},                clicktoselect:true,                detailview:true,                uniqueid:menu_id,                pagesize:10,                pagelist:[10,25],                columns:[                    {                        filed:'from',                        title:'from'                    },                    {                        field:'url',                        title:'url'                    },                    {                        field:'to',                        title:'to'                    }                ],                onexpandrow:function (index,row,$subdetail) {                    initsubtable(index,row,$subdetail);                }            });        }
注意，这里做了一个递归，即子表里面还可以展开孙表，我们也可以不需要，去掉就可以了。
十一、刷新功能$('#table_search').bootstraptable(                    refresh,                    {                        url:/japp/autobuy/ajaxorder/search                    }                );
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上就是bootstrap之bootstrap-table使用总结的详细内容。