實現的功能：

勾選需要批量修改的信息，點擊批量審批按鈕，彈出一個用boostrap框架做的模態框，顯示出勾選內容的信息，並且填寫了內容，上傳了多文件之後，通過ajax發送數據。

第一步：先獲取選中項該行中需要的數據

    //選中項的信息取出來
        $(‘.checkone:checked‘).each(function () {
            flow_id += $(this).val() + ‘,‘;
            var name = $(this).parents(‘tr‘).find(‘.name‘).text().trim();//獲取名字
            var
 
 Appro_Theme = $(this).parents(‘tr‘).find(‘.Appro_Theme‘).text().trim();//獲取主題
            var Appro_ID = $(this).parents(‘tr‘).find(‘.Appro_ID‘).text().trim();//獲取流水號
            var infoItem = {};
            infoItem.name = name;//存入對象
            infoItem.theme = Appro_Theme;
            infoItem.apid 
 
= Appro_ID;
            info.push(infoItem);//info是定義的全局變量
        });
        console.log(info,"選擇框的值");//取出來就是重復名字

因為我先在彈出框顯示的內容是這樣，看圖：

所以我需要對數據進行構造一下，才好循環渲染在我的這個彈出框裏面

第二步：重構數據

    // 獲取選中的信息顯示在彈出窗口中（ 一 二）
        // 一： 重組數據結構，去重
        var nameArr = []
        for (let i = 0; i < info.length; i++) {
            nameArr.push(info[i].name)
        }
        
 
var setarr = Array.from(new Set(nameArr))
        newInfo = []; //全局info
        for (var i = 0; i < setarr.length; i++) {
            var t = { name: setarr[i] }
            t.thems = [];
            t.appid = [];
            for (var j = 0; j < info.length; j++) {
                if (info[j].name == setarr[i]) {
                    t.thems.push(info[j].theme);
                    t.appid.push(info[j].apid);
                }
            }
            newInfo.push(t)
        }
        console.log(newInfo,"組出來的結果")

展開thems主題看一下，是不是對應的數據

好的，滿足我想要渲染的需求，接下來就是彈出框的顯示

第三步：彈出框內容顯示

首先看一下，我想實現的頁面效果，有點醜，先不管那麽多。

因為可能有很多主題，也有很多人，彈出框的高寬固定大小，並且設置overflow-y：auto;就會出現滾動條。可以繼續往下拉

彈出框代碼實現：

html部分

    <!--審批-->
    <div id="approvalBUI" style="display:none; cursor: default; ">
        <div class="modal-content">
            <div class="modal-header">申請表信息</div>
            <div class="modal-body">
                <div class="bootbox-body">
                    <form id="fromGroup" class="form-inline"></form>
                </div>
                <div class="modal-footer">
                    <button onclick="return batchflow();" data-bb-handler="delete" type="button" class="btn btn-sm btn-danger">
                        保存
                    </button>
                    <button id="close2" data-bb-handler="close" type="button" class="btn btn-sm">
                        取消
                    </button>
                </div>
            </div>
        </div>

js部分：

        //二： 彈出框渲染
        var formtext = ‘‘;
        Array.from(newInfo).forEach(item => {
            var ulist = ‘‘;  // 主題內容展示
            Array.from(item.thems).forEach(text => {
                ulist = ulist + `<li>${text}</li>`
            });
            formtext = formtext + `
            <div class="list marginB-10">
                            <div class="boldtext">申請人：
                                <span class="modal_name">${item.name}</span>
                            </div><ul class="theme">`+ ulist + `</ul>
                            <div class="option-uoload marginB-10">
                                <div class="option-label">
                                    <select name="State" class="form-control optionstate">
                                        <option value="2">同意</option>
                                        <option value="3">駁回</option>
                                    </select>
                                </div>
                            </div>
                            <div class="boldtext">審批理由</div>
                            <textarea class="form-control formdes" placeholder="理由填寫" name="opinion"></textarea>

                            <div class="boldtext marginB-10">操作</div>
                            <fieldset class="upload-fieldset marginB-10">
                                <div class="upload-wrap">
                                    <input type="file" name="fujian[0]">
                                    <a class="addPerson" class="btn-add">+</a>
                                    <input type="button" value="重置" class="reset">
                                </div>
                                <div class="shangchuandiv"></div>
                            </fieldset>
                            <hr>
                        </div> 
        `
        });

        $(‘#fromGroup‘).html(formtext);

第四步：獲取信息，通過fromdata添加數據，ajax發送請求

接下來，就是點擊彈出框的保存按鈕了，這個地方，我要得到的數據有申請人、申請人的幾個主題、理由、幾個文件、審核狀態，通通傳過去。先貼代碼：

    // 彈出框點擊保存事件
    function batchflow() {
        //newinfo是全局變量，保存了用戶信息 在這個對象上又添加了操作狀態、申請理由、數量文件
        $(‘.list‘).each(function(index){
            var state  = $(this).find(‘.optionstate‘).val(); //操作狀態：同意/駁回
            var des = $(this).find(‘.formdes‘).val();  //申請理由
            fiels =$(this).find(‘.upload-fieldset‘).find(‘:file‘);//文件 
            newInfo[index].files=[];
            fiels.each(function(){
                newInfo[index].files.push($(this)["0"].files);
            })
            newInfo[index].state=state;
            newInfo[index].des=des;
        });
        // console.log(newInfo,"最終點擊按鈕保存數據");
        newInfo.forEach(index=>{
            var data = new FormData();
            data.append(‘name‘,index.name);
            data.append(‘thems‘,index.thems);
            data.append(‘state‘,index.state);
            data.append(‘appid‘,index.appid);
            data.append(‘des‘,index.des);    
　　　　　　　　//data.append(‘files‘,index.files);
            for(let i = 0;i<index.files.length;i++){
                data.append("files"+i,index.files[i]["0"]);
            }
            // console.log(data);
            $.ajax({
                url:"{:url(‘Approval/batchflow‘)}",
                type:‘post‘,
                data:data,
                processData:false,//不處理數據
                contentType: false, 
                success:function(msg){
                    console.log(msg);
                }
            })
        });
    }

一開始，我是用 data.append(‘files‘,index.files); 發現，傳過去，並沒有用，他會把files識別成 [object FileList][object FileList]

所有的數據，我是采用json對象來存儲的，所以，formdata加入了files的時候，是加入了一個files對象數組，所以對於多個文件。

解決思路是：先傳一個文件，並且，先弄一個文件來試試看，能不能傳成功，如果行了，再進行多個文件的遍歷。貌似不能append一個對象數組，所以采取遍歷的方式來一個一個文件append進去。

所以上面的代碼就是這樣來的：

上傳文件測試一下

點擊保存

我展開第一個看一下文件是否加進去，以及其他的等等都加進去沒有，看到可以了，文件也存起來了。

在控制臺看一下，看發過去的參數是怎樣的。

問題一：我沒有想上面一樣 data.append("files"+i,index.files[i]["0"]); 字符串拼接跟上 下標i，去掉試一下，後臺會受到怎麽樣的數據

上傳文件試一下

在這兒看preview結果可見下圖

在這個地放看header

會發現，同名files會顯示最後一個文件。

這個到時候看後臺需要什麽樣的數據了吧

全部代碼：

/*     點擊批量審批按鈕     */
    function flowstate() {
        var flow_id = "";
        //選中項的信息取出來
        $(‘.checkone:checked‘).each(function () {
            flow_id += $(this).val() + ‘,‘;
            var name = $(this).parents(‘tr‘).find(‘.name‘).text().trim();//獲取名字
            var Appro_Theme = $(this).parents(‘tr‘).find(‘.Appro_Theme‘).text().trim();//獲取主題
            var Appro_ID = $(this).parents(‘tr‘).find(‘.Appro_ID‘).text().trim();//獲取流水號
            var infoItem = {};
            infoItem.name = name;//存入對象
            infoItem.theme = Appro_Theme;
            infoItem.apid = Appro_ID;
            info.push(infoItem);
        });
        console.log(info,"選擇框的值");//取出來就是重復名字
      // 獲取選中的信息顯示在彈出窗口中（ 一 二）
        // 一： 重組數據結構，去重
        var nameArr = []
        for (let i = 0; i < info.length; i++) {
            nameArr.push(info[i].name)
        }
        var setarr = Array.from(new Set(nameArr))
        newInfo = []; //全局info
        for (var i = 0; i < setarr.length; i++) {
            var t = { name: setarr[i] }
            t.thems = [];
            t.appid = [];
            for (var j = 0; j < info.length; j++) {
                if (info[j].name == setarr[i]) {
                    t.thems.push(info[j].theme);
                    t.appid.push(info[j].apid);
                }
            }
            newInfo.push(t)
        }
        console.log(newInfo,"組出來的結果")

        //二： 彈出框渲染
        var formtext = ‘‘;
        Array.from(newInfo).forEach(item => {
            var ulist = ‘‘;  // 主題內容展示
            Array.from(item.thems).forEach(text => {
                ulist = ulist + `<li>${text}</li>`
            });
            formtext = formtext + `
            <div class="list marginB-10">
                            <div class="boldtext">申請人：
                                <span class="modal_name">${item.name}</span>
                            </div><ul class="theme">`+ ulist + `</ul>
                            <div class="option-uoload marginB-10">
                                <div class="option-label">
                                    <select name="State" class="form-control optionstate">
                                        <option value="2">同意</option>
                                        <option value="3">駁回</option>
                                    </select>
                                </div>
                            </div>
                            <div class="boldtext">審批理由</div>
                            <textarea class="form-control formdes" placeholder="理由填寫" name="opinion"></textarea>

                            <div class="boldtext marginB-10">操作</div>
                            <fieldset class="upload-fieldset marginB-10">
                                <div class="upload-wrap">
                                    <input type="file" name="fujian[0]">
                                    <a class="addPerson" class="btn-add">+</a>
                                    <input type="button" value="重置" class="reset">
                                </div>
                                <div class="shangchuandiv"></div>
                            </fieldset>
                            <hr>
                        </div> 
        `
        });

        $(‘#fromGroup‘).html(formtext);
    }
    // 彈出框點擊保存事件
    function batchflow() {
        //newinfo是全局變量，保存了用戶信息 在這個對象上又添加了操作狀態、申請理由、數量文件
        $(‘.list‘).each(function(index){
            var state  = $(this).find(‘.optionstate‘).val(); //操作狀態：同意/駁回
            var des = $(this).find(‘.formdes‘).val();  //申請理由
            fiels =$(this).find(‘.upload-fieldset‘).find(‘:file‘);//文件 
            newInfo[index].files=[];
            fiels.each(function(){
                newInfo[index].files.push($(this)["0"].files);
            })
            newInfo[index].state=state;
            newInfo[index].des=des;
        });
        console.log(newInfo,"最終點擊按鈕保存數據");
        newInfo.forEach(index=>{
            var data = new FormData();
            data.append(‘name‘,index.name);
            data.append(‘thems‘,index.thems);
            data.append(‘state‘,index.state);
            data.append(‘appid‘,index.appid);
            data.append(‘des‘,index.des);    
            data.append(‘dd‘,index.files);    
            for(let i = 0;i<index.files.length;i++){
                data.append("files"+i,index.files[i]["0"]);
            }
            console.log(data);
            $.ajax({
                url:"{:url(‘Approval/batchflow‘)}",
                type:‘post‘,
                data:data,
                processData:false,//不處理數據
                contentType: false, 
                success:function(msg){
                    console.log(msg);
                }
            })
        });
    }

批量審批功能的前端form表單ajax提交多文件多數據