bootstrap的简单用法

一 、bootstramp 的事件。

1、 重新刷新页面

    选项有修改：

   var a = $('#table').bootstrapTable('refresh', {

        query : {

            billsName : $("#billsName").val()

        }

});

选项无修改：$('#table').bootstrapTable('refresh');

2、清空table表里面的数据。

$('#table').bootstrapTable('removeAll');

3、选择一条数据

Var dataModel=$('#table').bootstrapTable('getRowByUniqueId', uuid);

4 、隐藏列

$('#table').bootstrapTable('hideColumn', 'audit');

5、显示某一列

$('#table').bootstrapTable('showColumn', 'audit');

6、获取选中行，返回数组

var selectedData = $('#table').bootstrapTable('getAllSelections');

 

7、获取当前table页面的所有行

var allData = $('#table').bootstrapTable('getData');

8、重新加载数据

$('#excelTable').bootstrapTable('load', selectedData);

9、填充数据

$("#excelTable").bootstrapTable('append',selectedData[j]);

10、通过唯一标识删除数据

$('#addPartstable').bootstrapTable('removeByUniqueId', uuid);

11、处理表头和表头不能对齐

    $(window).resize(function() {

        $('#table').bootstrapTable('resetView');

});

12、批量删除前端数据

var ids = getSelectRowsId();

            /* 删除前端数据 */

            $table.bootstrapTable('remove', {

                field: 'id',

                values: ids

            });

二、bootstramp的基本模式，和基本的选择项。

  $('#table').bootstrapTable({

        method : 'get',//请求方式 post/get

        pagination:true, //是否允许分页。

        url : createUrl('/partstock/queryByStorage'),//请求的路径

        height : screen.availHeight-300, //高度

        striped : true, //是否有网格线

        pageSize : 10,//每页的默认数据。

        uniqueId : 'partUuid',//唯一的标识

        toolbar : '#toolbar', //工具按钮

        exportDataType : 'selected', 导出类型

        /*search : true, //是否带有检索框

        searchOnEnterKey : true, //是否允许回车查询

        formatSearch : function() {

            return '备件名称或编号';//搜索框里面的提示文字

        },*/

        formatRecordsPerPage : formatRecordsPerPage, //  公用方法common.js中   翻页工具条

        formatShowingRows : formatShowingRows, // 公用方法common.js中     翻页工具条

        sidePagination : 'server', // 设置为服务器端分页

        Server:服务器端分页，client 前端分页。

       显示的列

        columns : [{

            field : "state",

            checkbox : true  // 复选框

        }, {

            title : '序号',  //显示的名称

            width : '50', //宽度

            align : 'center', //文字位置

            formatter : orderFormatter //格式化函数。

        }, {

            visible : false, // 隐藏域  //是否可见

            field : 'partUuid',   //所对应的返回集合里面的字段

            title : 'uuid',

            align : 'center',

            width : '50',

            valign : 'bottom'

        }, {

            field : 'storageName',

            title : '仓库',

            align : 'center',

            width : '50',

            valign : 'bottom'

        } ],

       //当以pagemodel 返回结果集的时候，要加上下面的代码。

      //当以jsonArray 返回时，不需要添加下面的代码。

        responseHandler : function(res) {

            return {

                total : res.totalCount,

                rows : res.records

            };

        }

});

//formatter函数样式。 Value：当前字段的值,Row当前行所有的数据，index 当前行行号

function showStorgeLocationDatail(value, row, index) {

//console.log(JSON.stringify(row));

return value;

}

//需要添加隐藏域或输入控件的formatter函数。

function numberFormatter(value, row, index) {

    var editFlag=$('#isEdit').val(); //编辑标识，表明是编辑页面，否则为新增页面

    var count=row.count;

    if(row.addNum&&row.addNum!=null){

     count=row.addNum;

    }

    if(null!=editFlag && undefined!=editFlag){

        return '<input οnblur="checkNum($(this))" type="number" id="count' + index + '" onchange = "MathTotalPrice(' + index + ',\'' + row.uuid + '\')" value="'+count+'" />';

    }

    return '<input οnblur="checkNum($(this))" type="number" id="count' + index + '" onchange = "MathTotalPrice(' + index + ',\'' + row.uuid + '\')" value="'+count+'"/>';

}

三、bootstramp 导出excel

function exportData() {

    var selectedData = $('#table').bootstrapTable('getAllSelections');

    if (selectedData.length > 0) {

        $('#excelTable').bootstrapTable('load', selectedData);

        $('#excelTable').tableExport({

            type : 'excel',

            fileName : '备件列表'

        });

    } else {

     var allData = $('#table').bootstrapTable('getData');

     if(allData.length == 0){

     siping.alert(0, "当前页面没有数据");

     return;

     }

     siping.confirm("是否导出当前页面全部数据",function(){

     $('#excelTable').bootstrapTable('load', allData);

            $('#excelTable').tableExport({

                type : 'excel',

                fileName : '备件列表'

            });

     })

    }

 

}