bootstrap的简单学习

最近做项目用到这个bootstrap，然后其实也没有做很深的研究，就是能大概知道怎么用。

然后在学习中，很关键的就是你要去看源代码，只有看懂了这个，你才知道说怎么调用，然后你以后可以怎么做。

下面试我从别的博主那copy过来的，以后可以参考，只有是bootstrap中的table的一些节点的。

下面的配置文件和一些事件的重写呢，你可以查看文档，或者自己去看看你源码 
这里你可以进行重写哦~~ ，extentd进行重新的覆盖！

BootstrapTable.DEFAULTS = {
        classes: 'table table-hover',
        locale: undefined,
        height: undefined,
        undefinedText: '-',
        sortName: undefined,
        sortOrder: 'asc',
        sortStable: false,
        striped: false,
        columns: [[]],
        data: [],
        dataField: 'rows',
        method: 'get',
        url: undefined,
        ajax: undefined,
        cache: true,
        contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8
        dataType: 'json',
        ajaxOptions: {},
        queryParams: function (params) {//这个是设置查询时候的参数，我直接在源码中修改过，不喜欢offetset 我后台用的                    是pageNo. 这样处理就比较的满足我的要求，其实也可以在后台改，麻烦！
            return params;
        },
        queryParamsType: 'limit', // undefined (这里是根据不同的参数，选择不同的查询的条件)
        responseHandler: function (res) {//这里我查看源码的，在ajax请求成功后，发放数据之前可以对返回的数据进行处理，返回什么部分的数据，比如我的就需要进行整改的！
            return res;
        },
        pagination: false,
        onlyInfoPagination: false,
        sidePagination: 'client', // client or server
        totalRows: 0, // server side need to set
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        paginationHAlign: 'right', //right, left
        paginationVAlign: 'bottom', //bottom, top, both
        paginationDetailHAlign: 'left', //right, left
        paginationPreText: '‹',
        paginationNextText: '›',
        search: false,
        searchOnEnterKey: false,
        strictSearch: false,
        searchAlign: 'right',
        selectItemName: 'btSelectItem',
        showHeader: true,
        showFooter: false,
        showColumns: false,
        showPaginationSwitch: false,//展示页数的选择？
        showRefresh: false,
        showToggle: false,
        buttonsAlign: 'right',
        smartDisplay: true,
        escape: false,
        minimumCountColumns: 1,
        idField: undefined,
        uniqueId: undefined,
        cardView: false,
        detailView: false,
        detailFormatter: function (index, row) {
            return '';
        },
        trimOnSearch: true,
        clickToSelect: false,
        singleSelect: false,
        toolbar: undefined,
        toolbarAlign: 'left',
        checkboxHeader: true,
        sortable: true,
        silentSort: true,
        maintainSelected: false,
        searchTimeOut: 500,
        searchText: '',
        iconSize: undefined,
        buttonsClass: 'default',
        iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
        icons: {
            paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
            paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
            refresh: 'glyphicon-refresh icon-refresh',
            toggle: 'glyphicon-list-alt icon-list-alt',
            columns: 'glyphicon-th icon-th',
            detailOpen: 'glyphicon-plus icon-plus',
            detailClose: 'glyphicon-minus icon-minus'
        },

        customSearch: $.noop,

        customSort: $.noop,

        rowStyle: function (row, index) {
            return {};
        },

        rowAttributes: function (row, index) {
            return {};
        },

        footerStyle: function (row, index) {
            return {};
        },

        onAll: function (name, args) {
            return false;
        },
        onClickCell: function (field, value, row, $element) {
            return false;
        },
        onDblClickCell: function (field, value, row, $element) {
            return false;
        },
        onClickRow: function (item, $element) {
            return false;
        },
        onDblClickRow: function (item, $element) {
            return false;
        },
        onSort: function (name, order) {
            return false;
        },
        onCheck: function (row) {
            return false;
        },
        onUncheck: function (row) {
            return false;
        },
        onCheckAll: function (rows) {
            return false;
        },
        onUncheckAll: function (rows) {
            return false;
        },
        onCheckSome: function (rows) {
            return false;
        },
        onUncheckSome: function (rows) {
            return false;
        },
        onLoadSuccess: function (data) {
            return false;
        },
        onLoadError: function (status) {
            return false;
        },
        onColumnSwitch: function (field, checked) {
            return false;
        },
        onPageChange: function (number, size) {
            return false;
        },
        onSearch: function (text) {
            return false;
        },
        onToggle: function (cardView) {
            return false;
        },
        onPreBody: function (data) {
            return false;
        },
        onPostBody: function () {
            return false;
        },
        onPostHeader: function () {
            return false;
        },
        onExpandRow: function (index, row, $detail) {
            return false;
        },
        onCollapseRow: function (index, row) {
            return false;
        },
        onRefreshOptions: function (options) {
            return false;
        },
        onRefresh: function (params) {
          return false;
        },
        onResetView: function () {
            return false;
        }
    };

　　

function initTable() {
      $table.bootstrapTable({
        striped: true,  //表格显示条纹
        pagination: true, //启动分页
        pageSize: 15,  //每页显示的记录数
        pageNumber:1, //当前第几页
        pageList: [10, 15, 20, 25],  //记录数可选列表
        search: false,  //是否启用查询
        showColumns: true,  //显示下拉框勾选要显示的列
        showRefresh: true,  //显示刷新按钮
        sidePagination: "server", //表示服务端请求
        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
        //设置为limit可以获取limit, offset, search, sort, order
        responseHandler:function(res){
          //远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理
          //在ajax后我们可以在这里进行一些事件的处理
          return res.data;
        },
        queryParamsType : "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
          var param = {
            //这里是在ajax发送请求的时候设置一些参数 params有什么东西，自己看看源码就知道了
            pageNo: params.pageNumber,
            pageSize: params.pageSize
          };
          return param;
        },
        onLoadSuccess: function(data){  //加载成功时执行
          alert("加载成功"+data);
        },
        onLoadError: function(){  //加载失败时执行
          layer.msg("加载数据失败", {time : 1500, icon : 2});
        },
        height: getHeight(),
        columns: [
          {
            field: 'state',
            checkbox: true,
            align: 'center',
            valign: 'middle'
          }, {
            title: 'ID',
            field: 'id',
            align: 'center',
            valign: 'middle'
          },
          {
            field: 'userName',
            title: 'UserName',
            sortable: true,
            footerFormatter: totalNameFormatter,
            align: 'center'
          }, {
            field: 'userType',
            title: 'UserType',
            sortable: true,
            align: 'center'
          },
          {
            field: 'password',
            title: 'UserPass',
            sortable: true,
            align: 'center'
          },{
            field: 'indexcode',
            title: 'Indexcode',
            sortable: true,
            align: 'center'
          },{
            field: 'operate',
            title: 'Item Operate',
            align: 'center',
            events: operateEvents,
            formatter: operateFormatter
          }
        ]
      });

　　

以上为我暂时有需要的，然后如果说你想要做一些事件处理，或者是添加按钮什么之类的可以参考jquery_table.js之类的，这都是可以从源文件中获取的。

例子：

 table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,//我进行了写，如果你没有那么直接填写你要的地址就可以了
                advancedSearch: false,
                showColumns: false,
                columns: [
                    [
                        // {field: 'state', checkbox: true, },
                        {field: 'channelname', title: __('Cn_name')},
                        {field: 'channelcode', title: __('Cn_code')},
                        {field: 'code', title: __('Pk_code')},

                        {field: 'update_time', title: __('Update_time'), formatter: Table.api.formatter.datetime},
                        {
                            field: 'p_id', title: __('Operate'), events: {
                                'click .btn-makeone': function (e, value, row, index) {
                                    var that = this;
                                    var index = Backend.api.layer.confirm(
                                        __('Are you sure you want to make the  selected %s key?',row.channelname),//这里就是返回提示，你可以按你的需求返回中文提示，
//我是后台有对数据进行转换所以这么使用,有带__这个的都是有数据转换处理
                                        {icon: 3, title: __('Warning'), offset: [$(that).offset().top, $(that).offset().left - 260], shadeClose: true},
                                        function () {
                                            var table = $(that).closest('table');
                                            Table.api.multi("make", row.id, table, that);
                                            Backend.api.layer.close(index);
                                        }
                                    );

                                }
                            },
                            formatter: function (value, row, index) {
                                    //行操作
                                    var html = [];
                                    if(value==undefined||value==null)
                                        html.push('<a href="javascript:;" class="btn btn-success btn-makeone btn-xs">生成</a>');
                                    else html.push('-');
                                    return html.join(' ');
                                }
                        }
                    ]
                ]
            });

　　

参考：http://www.cnblogs.com/yinglunstory/p/6092834.html

table的挂载：http://www.cnblogs.com/MirageFox/p/5981867.html