bootstraptable使用總結之前端樣式設計

前言

本人最近在做一個項目，需要將本地文件夾的照片讀取到前台進行顯示，顯示的時候，需要對照片進行批注，如下圖所示。本文涉及的知識點包括：

1，如何設定bootstrap樣式？

2，如何獲取每一行的checkbox的值？

3，按照“文件名-圖片-缺陷類型”進行組裝，利用ajax向后台發送請求，保存到數據庫

這在顯示的時候，就需要對某些列增加checkbox按鈕。在實現的時候也是找了很多的資料，后頭在參考了bootstraptable怎么實現自定義按鈕列的操作的時候，發現了可以return一個HTML代碼塊到相應的table里面，就參照這個思路實現了我的想法。

一：設定bootstrap樣式

知識點1的參考代碼如下：

function showTable() {
    $('#table').bootstrapTable({
        data:imageList,
        columns: [{
            field: 'fileName',
            title: 'fileName',
            formatter : function (value, row, index) {
                console.log()
                return"<p name='fileName'>"+value+"</p>";
            }
        },{
            field: 'base64Image',
            title: '照片',
            formatter : function (value, row, index) {
                return"<img  name= 'imageSrc'    src='"+value+"' alt='' style='width: 60px;height: 60px'>";
            }
        }, {
            field: 'normal',
            title: '正常',
            formatter:function(value, row, index){
                return "<label><input type = \"checkbox\"  value='正常'style='height: 20px;width: 20px'>正常</label>"
            }
        },{
            field: 'curl',
            title: '卷邊',
            formatter:function(value, row, index){
                return "<label><input  type = \"checkbox\" value='卷邊'style='height: 20px;width: 20px'>卷邊</label>"
        }},{
            field: 'fracture',
            title: '破裂',
            formatter:function(value, row, index){
                return "<label><input  type = \"checkbox\"  value='破裂'style='height: 20px;width: 20px'>破裂</label>"
        }}, {
            field: 'notBulge',
            title: '未脹開',
            formatter:function(value, row, index){
                return "<label><input  type = \"checkbox\" value='未脹開'style='height: 20px;width: 20px'>未脹開</label>"
        }}]
    });
}

二：提取每張照片的缺陷 

想要提取每張照片的缺陷，就需要遍歷每一行的checkbox，然后檢查是否checked，如果是，則把每一個checkbox的value保存到一個數組內。這里想要實現這個目標，就需要兩個步驟：准確提取到每一行的checkbox和遍歷每一行的checkbox集合。

2.1准確提取到每一行的checkbox

要想實現准確提取到每一行的checkbox，如果我們把每一行的checkbox都設定一個id，也可以獲取到，但是因為id是變化的且不相同的，所以這就給我們提取造成了困難。

但是同時，我們想到js里面可以針對html元素的name進行提取，這就意味着，我們只需要將每一行的checkbox設定一樣的name就可以了，考慮到知識點1中，formatter中的函數有三個變量，分別是value，row和index，其中index就是每一行的序號，因此我們只需要將index組合到checkbox的name里面，name就可以為每一行設定不一樣的且有規律name。實現代碼如下：

return "<label><input name='checkbox"+index+"' type = \"checkbox\" value='未脹開'style='height: 20px;width: 20px'>未脹開</label>"

2.2遍歷checkbox集合

我們可以通過js的函數：getElementsByName，獲取checkbox集合，並進行遍歷。實現代碼如下：

var results =[];
    var fileNameList=document.getElementsByName("fileName");
    var imageSrcList=document.getElementsByName("imageSrc");
    for (var i = 0; i <fileNameList.length ; i++) {
        var imageDefect={};
        var fileName=fileNameList[i].innerText;
        var inputName="checkbox"+i;
        var chechbox= document.getElementsByName(inputName);
        var checkvalue=[];
        for (var j = 0; j <chechbox.length ; j++) {
            if (chechbox[j].checked){
                checkvalue.push(chechbox[j].value);
            }
        }        
    }

三、封裝和請求

按照“圖片名-圖片信息-缺陷信息”進行封裝，然后利用ajax發出請求

封裝成json：

var row={};
        row.imageName=fileName;
        row.Defect=checkvalue;
        json.push(row);

ajax請求：

$.ajax({
        url:"save2Mysql",
        type:"post",
        data:data,
        dataType:"application/x-www-form-urlencoded",
        success:function (result){
            console.log("請求成功！");
        }
    })

 

附： 錯誤記錄

1，在利用ajax向servlet發出請求時，開始是get請求，然后運行時瀏覽器報了一個400的錯誤。網友普遍說道這是一個傳遞的參數類型不一致導致的controller層無法接受數據的問題。但是反復檢查之后，因為數據也是json格式的不應該出問題。

於是想到了ajax的兩種請求方式，get請求和post請求，get請求普遍是用在獲取數據，post請求普遍是用在提交數據。這里是想servlet發出請求，並提交數據，分析之后認為應該是post請求。