bootstraptable使用总结之前端样式设计

Posted 2021-02-12 cquer-xjtuer-lys

前言

本人最近在做一个项目，需要将本地文件夹的照片读取到前台进行显示，显示的时候，需要对照片进行批注，如下图所示。本文涉及的知识点包括：

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);
            }
        }        
        results.push(imageDefect);
    }

三、封装和请求

按照“图片名-图片信息-缺陷信息”进行封装，然后利用ajax发出请求

封装代码：
imageDefect={
     ‘imageName‘:fileName,
     ‘imageSrc‘:imageSrcList[i].src,
     ‘Defect‘:checkvalue,
};
ajax请求代码：
$.ajax({
        url:"save2mysql",
        type:"post",
        data:JSON.stringify(data),
        dataType:"json",
        success:function (result){
            console.log("请求成功！");
        }
    })

附： 错误记录

1，在利用ajax向servlet发出请求时，开始是get请求，然后运行时浏览器报了一个400的错误。网友普遍说道这是一个传递的参数类型不一致导致的controller层无法接受数据的问题。但是反复检查之后，因为数据也是json格式的不应该出问题。

于是想到了ajax的两种请求方式，get请求和post请求，get请求普遍是用在获取数据，post请求普遍是用在提交数据。这里是想servlet发出请求，并提交数据，分析之后认为应该是post请求。