bootstrap----bootstrapTable的基本使用方法

最近使用了bootstrap-table这样的一个控件，来进行操作表格，之后在官网上面都是英文的api，之后有的博客是中文的，为了方便寻找，我就自己copy了一份，给自己备分一下，bootstrap-table 中文 api。之后我又封装了bootstrap的一个控件，最近比较热衷于封装这些东西，文件上传的封装了一个webuploader的控件，都是根据控件的api，之后整理出来的，至少看着叫清晰的效果。

这个就是封装的bootstrap-table的一个控件，包含了基本的一些操作，当然，api里面方法，属性，事件，太多了，所以也不是特别全，但是基本的都有，要是有小伙伴需要什么功能，可以自己添加上去。

;(function (window, $) {
    'use strict';

    //创建类
    function CreateBootstrapTable() {
        this.opction = null;
    }

    CreateBootstrapTable.prototype.init = function (opction) {

        CreateBootstrapTable.opction = opction;
        $('#' + opction["id"]).bootstrapTable({

            //声明表格td的class名，代表此列元素的class名将被排序
            sortClass:opction["sortClass"]||undefined,
            //表格的高度
            height:opction["height"]||undefined,
            //当不写任何内容默认显示空
            undefinedText:opction["undefinedText"]||"",
            //默认false，当设为true，则每行表格的背景会显示灰白相间
            striped:opction["striped"]||false,
            //定义哪一列的值会被排序，写data-field的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（asc）
            sortName:opction["sortName"]||undefined,
            //排序方式
            sortOrder: opction["sortOrder"] || "asc",
            //（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加’_position’属性
            sortStable:opction["sortStable"]||false,
            //定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
            iconsPrefix:opction["iconsPrefix"]||"glyphicon",
            /*
                定义的图标大小：
                   - undefined =>默认表示默认的按钮尺寸（btn）
                   - xs   =>超小按钮的尺寸（btn-xs）
                  - sm  =>小按钮的尺寸（btn-sm）
                  - lg    =>大按钮的尺寸（btn-lg）
            */
            iconSize:opction['iconSize']||undefined,
            /*
                按钮的类，默认为default。
          - 可选的有：primary、danger、warning等等
          - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加”btn-“，默认为btn-default（白色）
             */
            buttonsClass:opction['buttonsClass']||"default",
            //列
            columns: opction["columns"]||[],
            //加载数据
            data:opction["data"]||[],
            //请求方式（*）
            method: opction["method"] || 'post',
            //请求后台的URL（*）
            url: opction["url"],
            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            cache: opction["cache"] || false,
            //类型
            dataType:'json',
            //ajax附加项
            ajaxOptionsL:opction["ajaxOptions"]||{},
            //传递参数（*）
            queryParams: opction['queryParams']||{},
            //默认”limit”，设置该属性用来发送符合RESTful格式的参数
            queryParamsType:opction['queryParamsType']||'limit',

            //是否显示分页（*）
            pagination: opction["pagination"] || true,
            //默认true，分页条无限循环
            paginationLoop:opction['paginationLoop']||true,
            //前提：pagination设为true，启用了分页功能。- 默认false，设为true显示总记录数
            onlyInfoPagination:opction["onlyInfoPagination"]||false,
            //分页方式：client客户端分页，server服务端分页（*）
            sidePagination: opction["sidePagination"] || "client",
            //初始化加载第一页，默认第一页
            pageNumber: opction["pageNumber"] || 1,
            //每页的记录行数（*）
            pageSize: opction["pageSize"] || 10,
            //可供选择的每页的行数（*）
            pageList: opction["pageList"] || [10, 25, 50, 100],
            //radio（单选按钮）或checkbox（复选框）的字段名
            selectItemName:opction["selectItemName"]||"checkbox",
            //默认为true，会 机智地（<_<） 根据情况显示分页（pagination）或卡片视图（card view）
            smartDisplay:opction["smartDisplay"]||true,
            //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            search: opction["search"] || false,
            toolbarAlign:opction["toolbarAlign"]||'left',
            //工具按钮用哪个容器
            toolbar: opction["toolbar"],
            //是否启用排序
            sortable: opction["sortable"] || false,
            strictSearch: opction["strictSearch"] || false,
            //是否显示所有的列
            showColumns: opction["showColumns"] || false,
            //是否显示刷新按钮
            showRefresh: opction["showRefresh"] || false,
            //最少允许的列数
            minimumCountColumns: opction["minimumCountColumns"] || 2,
            //每一行的唯一标识，一般为主键列
            uniqueId: opction["uniqueId"]||undefined,
            //是否显示详细视图和列表视图的切换按钮
            showToggle: opction["showToggle"] || false,
            //是否显示详细视图
            cardView: opction["cardView"] || false,
            //是否显示父子表
            detailView: opction["detailView"] || false,

            //在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
            responseHandler:opction["responseHandler"]||function(res){
                return res;
            },
            //单击行
            onClickRow:opction["onClickRow"]||function(row, $element, field){
            },
            onDblClickRow:opction["onDblClickRow"]||function(row, $element, field){
            },
            //单击单元格
            onClickCell: opction["onClickCell"]||function(field, value, row, $element) {
            },
            //单击单元格
            onDblClickCell: opction["onDblClickCell"]||function(field, value, row, $element) {
            },
            //单击单元格
            onUncheck: opction["onUncheck"]||function(row, $element) {
            },
            //单击单元格
            onCheck: opction["onCheck"]||function(row, $element) {
            },
            //单击单元格
            onCheckAll: opction["onCheckAll"]||function(row) {
            },
            //单击单元格
            onUncheckAll: opction["onUncheckAll"]||function(row) {
            },
            //单击单元格
            onLoadSuccess: opction["onLoadSuccess"]||function(data) {
            },
        });
    }

    window.CBT = new CreateBootstrapTable();
})(window, $);

这个就是在html里面的一种写法，当然我这个url是空的，需要自己写后台的，要是有后台不清楚的，可以联系我，之后大家一起讨论一下，qq1029273212 

    
    
    
    
    
    

    
    
    





    

        

            
                add
            
            
                delete