bootstrap-table對前臺頁面表格的支持

一、bootstrap-table是在bootstrap的基礎上面作了一些封裝，因此在使用bootstrap-table以前要導入的js和css有

　　1）基本的仍是jQuery

<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>

　　2）引入bootstrap

<script type="text/javascript" src="js/bootstrap.min.js?v=3.3.6"></script>

<link rel="stylesheet" href="css/bootstrap.min14ed.css?v=3.3.6">

　3）引入bootstrap-table

<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css">

二、頁面的編寫方式（建議）

<div class="table">
    <table id="publish_model"></table>
 </div>

三、具體的數據加載和處理都在js裏面完成，具體的實現過程不用本身去寫，bootstrap-table都寫好了

//這裏是js的具體代碼的樣式處理
dynamicTable = $("#publish_model").bootstrapTable("destroy").bootstrapTable({
        url: "model/getPublishModel",                                            
        striped: true,                                           
        pagination: true, 
        singleSelect: true,
        clickToSelect: true,    
        pageNumber:1,                       
        pageSize: 10,                       
        pageList: [5, 10, 20],  
        sidePagination: "server",
        queryParamsType: "limit",
        queryParams: getPageMessage,
        minimunCountColumns: 2,
        height:$(window).height()*0.85,
        columns:[{
            field:"modelName",
            title:"模型名稱",
            align: "center",
            
        },{
            field:"modelDescription",
            title:"模型描述",
            align: "center"
        },{
            field:"executeType",
            title:"執行類型",
            align: "center"
        },{
            field:"typeName",
            title:"模型類型",
            align: "center"
        },{
            field:"price",
            title:"價格",
            align: "center"
        },{
            field:"publishDate",
            title:"發佈時間",
            align: "center",
            formatter: function(v){
                 var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");
                    return "<span>"+date+"</span>";
            }
        },{
            field:"shortcutOperation",
            title:"快捷操做",
            align: "center",
            formatter: function(v,r,i){
                var str = "<div class='btn-group'>"+
                          "<button id="+r.modelId+" class='btn btn-success btn-xs' onclick='applyReason(\""+r.modelId+"\")'>申請權限</button>"+
                          "</div>"
                if(r.status=='00'){
                    var str = "<div class='btn-group'>"+
                              "<button class='btn btn-success btn-xs' style='background:#ccc;border-color:#ccc;' >已申請</button>"+
                              "</div>"
                }
                return str;
            }
        }]
    });

//傳遞參數到後臺
function getPageMessage(params){
    var temp={
        limit: params.limit,
        offset: params.offset,
        modelName:$("#model_name").val(),
        typeId:$("#modelType").val()
    };
    return temp;
}

　這裏說明幾個問題：

　　1）這裏加入這部分（ bootstrapTable("destroy") ）的目的是頁面存在刷新效果須要從新加載

　　2）相對應的設置參考官方文檔：http://bootstrap-table.wenzhixin.net.cn/documentation/

　　3）後面簡單說一下具體的效果設置：在具體的單元格數據中可使用formatter()方法來實現，其中存在3個值v,r,i分別是值，行數據，角標。具體的效果能夠參考着bootstrap的方式來實現經過return的方式來給頁面呈現不同的效果，固然也能夠設置直接設置效果經過cellStyle方法也是能夠的！

　　4）傳參：這個根據我的的一個實現功能來作，無論有沒有數據，後臺傳過去的不是null而是""。limit和offset是作分頁處理須要傳給後臺　

四、而後就是後臺的一個處理（很重要）

　@RequestMapping("/getPublishModel")
    @ResponseBody
    public Map<String, Object> getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{
        //設置相應數據格式
        response.setContentType("application/json;charset=utf-8");
        try {
            // 獲取相應數據
            Map<String, Object> modelList = modelManager
                    .getModelPublishListData(limit, offset, modelName,typeId);
            return modelList;
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        } finally {
            HibernateSessionFactory.closeSession();
        }
    }

　　說明：

　　1）數據返回的形式：

Map<String, Object> map =  new HashMap<String,Object>();
map.put("total", "分頁時採用的數據總條數");//這裏能夠單獨寫一個sql來實現總條數
map.put("rows", "數據的list集合");//這裏能夠獲取相對應的數據
注意：由於前臺和字段名字要對應因此，list的泛型能夠是對象的形式，也能夠是Map<String, Object>的形式

List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//這是我用hibernate執行的map結果會自動封裝成Map
sql裏面必定要設置別名，好比：m.modelId AS modelId等

　　2）返回的時候經過json的方式放回，這裏不建議springmvc自動返回，建議經過PrintWriter的方式寫出到前臺，否則會出現json方面的錯誤。

五、展現效果

提示：搜索功能須要本身作，傳入的參數也是經過上面的傳入

6.問題：由於考慮到接送的傳輸問題，在bootstrap-table裏面存在post請求的問題，這也是我一直沒有解決的問題！

　　1）由於bootstrap-table對post請求進行了封裝，在使用post請求的時候取不到數據（我也在研究這個問題，但願高人指點）

　　2）後臺數據封裝的字段名問題，必需要同樣才能夠，不用別名返回的是字段名1234。。這個是由於hibernate形成的，其餘框架略過

 7.相關問題處理

　　1）因爲bootstrap-table中的表頭和內容是分兩個table來顯示的，致使不少時候出現縮小窗口事後，出現兩個表格出現錯誤的問題處理方式以下：

$('#publish_model').bootstrapTable(); // init via javascript
    $(window).resize(function () {
        $('#publish_model').bootstrapTable('resetView');
    });

　　說明：這個是利用jQuery對窗口方法的實現，來幫定的事件。經過bootstrap-table的bootstrapTable方法來實現窗口重置。