记一次在前端进行数据导入excel表格的坑(赋代码)

记一次在前端进行数据导入excel表格的坑(赋代码)

身边一位大佬要求我写一个用flask框架加载的前端的

数据导入excel。于是有了我踩坑的开端。大佬还是很好的,给我发了借鉴链接。参考链接: https://blog.csdn.net/hhzzcc_/article/details/80419396。

只使用了其中的方法一。

我的代码为:
html:

<table class="table table-hover" width="100%"style="white-space:nowrap;"align="center">
        <tr align="center">
            <th><input type="checkbox" id="checkAll"></th>
            <th>Username</th>
            <th>StudentID</th>
            <th>Realname</th>
            <th>CardID</th>
            <th>BankID</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Website</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    {% for user in users %}
        <tr align="center" class="trTr" id="user_{{ user.id }}">
            <td><input type="checkbox" name="checkbox"></td>
            <td>{{ user.name }}</td>
            <td>{{ user.sid }}</td>
            <td>{{ user.realname }}</td>
            <td>{{ user.cardid }}</td>
            <td>{{ user.bankid }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.website }}</td>
            <td>{{ level[user.admin] }}</td>
            <td>
                <button class="btn btn-default chg_info glyphicon glyphicon-cog"  value="{{ user.id }}" {% if current_user.admin <= user.admin %}disabled="disabled"{% endif %}></button>
                <button class="btn btn-default chg_pass glyphicon glyphicon-lock"  value="{{ user.id }}"{% if current_user.admin <= user.admin %}disabled="disabled"{% endif %}></button>
                <button class="btn btn-default del_info glyphicon glyphicon-trash"  value="{{ user.id }}"{% if current_user.admin <= user.admin %}disabled="disabled"{% endif %}></button>
            </td>
        </tr>
    {% endfor %}
    </table>
    <button class="btn btn-default" id="exportExcel">导出为excel</button>

js

$("#checkAll").click(function(){
          if($(this).is(':checked')){
                $("[name='checkbox']").prop('checked',true);
            }else{
                $("[name='checkbox']").prop('checked',false);
            }
        });
    $("[name='checkbox']").click(function(){
        var check = $("[name='checkbox']");
        var i = 0;
        var single = true;
        if($(this).is(":checked")){
            $(this).attr("checked");
        }else{
            $(this).removeAttr("checked");
        }
        while(single){
            if(check.eq(i).is(":checked")){
                i++;
            }else{
                $("#checkAll").prop('checked',false);
                single=false;
            }
            if(i==check.length){
                $("#checkAll").prop('checked',true);
            }
        }
    })
    $("#exportExcel").click(function(){
        //列标题
        var tr = document.querySelectorAll(".trTr");
        var check = document.querySelectorAll("[name=checkbox]");
        var str = 'UsernameStudentIDRealname'
            +'CardIDBankIDPhoneEmail'
            +'WebsiteRole';
        //循环遍历,每行加入tr标签,每个单元格加td标签
        for(let i = 0 ; i < tr.length ; i++ ){
            if(check[i].checked){
                str+='';
                var td= tr[i].children;
                for(let j = 1;j < td.length;j++){
                    //增加\t为了不让表格显示科学计数法或者其他格式
                    str+=''+ tr[i].children[j].innerText +'';     
                }
                str+='';
            }
        }
        //Worksheet名
        var worksheet = 'Sheet1'
        var uri = 'data:application/vnd.ms-excel;base64,';
        //下载的表格模板数据
        var template = `
        
        ${str}
`
; //下载模板 window.location.href = uri + base64(template) })

在将数据导入文件的过程中时,jq一直显示复选框没有被checked,于是寻找解决方法无果后,就使用了js原生,解决。

上面的解决方法很low,至于为什么flask加载的复选框jq一直获取不到他的选中状态,我还是不清楚。希望可以有大佬来解答。

在写功能过程中,还写了复选框的判断是否tr全选,并自动勾上全选复选框。

你可能感兴趣的:(前端)