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

Posted cquer-xjtuer-lys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
            }
        }        
        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请求。

以上是关于bootstraptable使用总结之前端样式设计的主要内容,如果未能解决你的问题,请参考以下文章

Web前端之CSS基础总结

Web前端之CSS基础总结

Web前端之CSS基础总结

Web前端之CSS基础总结

Web前端之CSS基础总结

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)