前端的工作总结<三>

上期剩余工作:

• 发票文本信息的显示
• 发票文本信息的修改和提交

新增需求： 发票列表的展示和导出功能

发票文本信息的展示

发票信息接口返回json数据，结构如下：

{
  "data": {
    "file_type": "jpg", 
    "invoice_code": "1100174320", 
    "invoice_code_encode": "/mX7Z····8d7A//2Q==", 
    "invoice_num": "98859496", 
    "invoice_num_encode": "/9oA·····//9k=", 
    "task_id": "c74929dcdad86023598d690eaa05349b", 
    "user_id": 2
  }, 
  "msg": "Success.", 
  "ret": 200
}

我是通过ajax方式获取json数据，代码如下：

function getInvocieInfo(user_id, taskid, textInvocetype) {
        $.ajax({
        type: 'GET',   //请求方式
        dataType: 'json', // 数据类型配置成json
        url: 'http://180ly66419.iok.la:5000/api/detect_in?1=1&user_id=' + user_id + '&task_id=' + taskid,
        async: false,
        timeout: 5,
        success: function (response) {
            responseData = JSON.stringify(response);   //将返结果转换为字符串
            var obj = eval('(' + responseData + ')');  //获取json数据需要先将JSON字符串转换为JSON对象
            invoiceID = obj.data['invoice_code'];      //获取invoice_code内容
            invoiceNo = obj.data['invoice_num'];       //获取invoice_num内容
            },
        error: function () {
            alert('服务器异常，获取发票信息失败！');
        }
    });
    //通过不同参数，返回相应的发票信息
    if (textInvocetype == "textInvoiceNum") {   
        return invoiceNo;   //返回发票号码
    }
    else if (textInvocetype == "textInvoiceID") {
        return invoiceID;  //返回发票代码
    }
}

修改提交功能

HTML端：

<input type="text" style="····" id="textInvoiceID" value="1100094140">  
<input type="text" style=" ····" id="textInvoiceNum" value="87654321">
 <input type="submit" id = "uploadInvoiceInfo" onclick="" style="····" value="确认提交" class="s_btn">

效果如下：

<input type="text" style="font-size:16px; width:150px; height:25px; display: inline-block; vertical-align: middle;" id="textInvoiceID" value="1100094140" >
<input type="text" style=" font-size:16px; width:150px; height:25px; display: inline-block; vertical-align: middle;" id="textInvoiceNum" value="87654321">
<input type="submit" id = "uploadInvoiceInfo" onclick="" style="background: #3b5998;width: 100px; height: 34px; color: #fff;letter-spacing: 1px; border-bottom: 1px solid #2d78f4; font-size: 16px" value="确认修改" class="s_btn">

实现修改并提交到服务端：

$("#uploadInvoiceInfo").click(function() {
    var newInvoiceNum =  document.getElementById("textInvoiceNum").value;
    var newInvoiceID =  document.getElementById("textInvoiceID").value;
    strUrl = "http://180ly66419.iok.la:5000/api/insert/result?1=1&user_id=" + usr_id; // "http://10.26.7.164:5000/api/insert/result?1=1&user_id=1";
    strJson = JSON.stringify(GetJsonData(usr_id, taskIdTxt, newInvoiceNum, newInvoiceID));

    $.post(strUrl, strJson,
        function(data,status){
            var msg = (status == "success") ?"成功" : "失败";
            alert("修改" + msg);
        }, "json"
    );
});

function GetJsonData(usr_id, task_id,docnumber_ocr_result,doctype_ocr_result ) {
    var json = {
        "docnumber_ocr_result": docnumber_ocr_result,
        "doctype_ocr_result":doctype_ocr_result,
        "task_id": task_id,
        "user_id": usr_id
    };
    return json;
}

开始直接用的ajax方式，但是一直修改不成功。 后面有时间再研究下。 附上ajax代码

请求返回信息

新增功能，展示发票列表 并添加导出功能。

使用框架bootstrap

表格加载不是很难，遇到的问题：

• 动态添加表格内容
• 导出功能
• 添加checkbox
• loading状态错误。

动态添加表格：

function addRows(){
        jsonlist = getAllInvoceInfo();
        //$('#mytable').bootstrapTable('destroy');
        //myTable.bootstrapTable('');

        var i = parseInt(mytable.rows.length);
        for (i =0;i<jsonlist.length;i++){
            var newTr = mytable.insertRow();

            //添加列
            var newTd0 = newTr.insertCell();
            var newTd1 = newTr.insertCell();
            var newTd2 = newTr.insertCell();

            newTd0.innerHTML = '<td>'+ jsonlist[i].taskId + '</td>';
            newTd1.innerHTML = '<td>'+ jsonlist[i].invoiceTextID + '</td>';
            newTd2.innerHTML = '<td>'+ jsonlist[i].invoiceTextNum + '</td>';
        }
     } 

添加checkbox

网上找的现成的代码：

function initTableCheckbox() {
    var $thr = $('table thead tr');
    var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /> 全选</th>');
    
    //将全选/反选复选框添加到表头最前，即增加一列
    $thr.prepend($checkAllTh);

    //“全选/反选”复选框
    var $checkAll = $thr.find('input');
    $checkAll.click(function(event){
        //将所有行的选中状态设成全选框的选中状态
        $tbr.find('input').prop('checked',$(this).prop('checked'));
        //并调整所有选中行的CSS样式
        if ($(this).prop('checked')) {
            $tbr.find('input').parent().parent().addClass('warning');
        } else{
            $tbr.find('input').parent().parent().removeClass('warning');
        }
        //阻止向上冒泡，以防再次触发点击操作
        event.stopPropagation();
    });

    //点击全选框所在单元格时也触发全选框的点击操作
    $checkAllTh.click(function(){
        $(this).find('input').click();

    });
    var $tbr = $('table tbody tr');
    var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
    //每一行都在最前面插入一个选中复选框的单元格
    $tbr.prepend($checkItemTd);
    //点击每一行的选中复选框时
    $tbr.find('input').click(function(event){
        //调整选中行的CSS样式
        //$(this).parent().parent().toggleClass('warning');
        //如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态
        $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
        //阻止向上冒泡，以防再次触发点击操作
        event.stopPropagation();
    });
    //点击每一行时也触发该行的选中操作
    $tbr.click(function(){
        $(this).find('input').click();
    });

    $("#no-records-found").remove();
}

导出功能

html添加button

<button onclick="onbtnclickExport()">导出表格</button>

JS代码：

function onbtnclickExport(){
    tablesToExcel(['mytable'], ['invoice'], 'invoice.xls', 'Excel');  //导出到Excel表
}

遇到的问题

由于动态添加的表格，和直接创建表格有些差异，导致表格loading状态显示与实际情况不符，

问题1：

执行下面代码，页面一直展示 Loading, please wait..

formatLoadingMessage: function () {
        return 'Loading, please wait...';
    },

原因分析： 数据来源是从服务器端，这个状态获取的是错误的，所以需要隐藏状态，我直接重写修改了 formatLoadingMessage 返回内容为空
如下：

   $("#mytable").bootstrapTable({
        exportDataType: "basic",              //basic', 'all', 'selected'.
        exportTypes:['excel','xlsx'],
        ···
        ···
        //重写formatLoadingMessage
        formatLoadingMessage: function(){
                 return " ";  // 隐藏加载状态  
        },
});

问题2：
如图所示：

由于修改了数据来源，默认的方式无法找到数据，找不到如何修改获取方式的代码，页面中在tables中显示No matching records found

formatNoMatches: function () {
        return 'No matching records found';
    },

没找到怎么能不执行这段代码，只好曲线救国，隐藏掉这个标签吧
确认标签classname： no-records-found

查找标签并隐藏

 function hideNoFondTables(){
    noFondClass = document.getElementsByClassName("delete class no-records-found");
    if (noFondClass) {
        $(".no-records-found").hide();
    }
}

基本的问题都解决了，此工作暂告段落，暂时上线。

效果展示：
页面1

页面2

需要声明下，本职不是前端开发，小白上岗做的以上内容。现学现卖，不专业的地方请多包涵。有问题请留言，相互学习下。

后面有时间，需要研究下发票列表展示为缩略图。 待做！