easyUI JQuery 里 Dialog重新加載DIV，datagrid不能及時刷新問題

本文轉載自查看原文 2017-02-14 11:27 1506 easyUI/ Dialog/ 前端/ datagrid/ JQuery

很久沒有寫東西了，原本上周打算寫點記錄一下遇到的問題的，但是由於時間和自己的惰性問題，沒有及時寫。現在來補上。

近期做了個需求，上周在測試的時候發現了幾個問題，先來記錄這個 Dialog 的div不能及時刷新的問題，這個問題在ie版本比較高的情況下不會出現，只有在ie9及以下的版本才會出現。

粘一下jsp頁面這個dialog的寫法，如下：

 1 <div id='dialog_up'>
 2     <!-- 發票審核-->
 3     <div id="dlg_invoiceInfo" class="easyui-dialog" style="width:1000px;height:450px;padding:10px 20px">
 4         <form id="fm_invoiceInfo" method="post">
 5             <!-- 所申請的申請編號 -->
 6             <input type = "hidden"  name="applyNum"  id="applyNum">
 7                 <!-- ibatis datagrid sqlname區域開始 -->
 8                     <input type = "hidden" name="COUNT_SQL_NAME" value="cxyj_yd.queryInvoiceInfoCountSql">
 9                     <input type = "hidden" name="LIST_SQL_NAME"  value="cxyj_yd.queryInvoiceInfoListSql">
10                 <!-- ibatis datagrid sqlname區域結束 -->
11             <table>
12                 <tr>
13                     <td class = "td_left">代理機構：</td>
14                     <td><input name="c_cmpny_agt_cde"  id="c_cmpny_agt_cde_apply" readonly="readonly" />
15                         <input name="c_cmpny_agt_nme"  id="c_cmpny_agt_nme_apply" readonly="readonly" />
16                     </td>
17                     <td class = "td_left">申請單號：</td>
18                     <td><input name="applyNum_0"  id = "applyNum_0" readonly="readonly" /></td>
19                 </tr>
20            </table>
21            
22         </form>
23         <!-- 數據展示區域 開始 手續費申請信息-->
24         <table id="datagrid_salaryapply"  pagination="true" ></table>
25         
26         <!-- 數據展示區域 開始 發票信息-->
27         <table id="datagrid_invoiceInfo"  pagination="true" ></table>
28         
29         <form id='fmDownFile' action="${pageContext.request.contextPath}/download/downloadFileAFFIX.do"  method="post" >
30                 <input id="inputPath_" name="inputPath" value="" type="hidden" />
31                 <input id="fileName_" name="fileName" value="" type="hidden" />
32                 <input id="fileRootPath" name="fileRootPath" value="payTicketFileUp" type="hidden"/>
33         </form>
34         <form id="fm_invoiceInfo_approve" action="${pageContext.request.contextPath}/cxyj_yd/approveTicket.do" method="post">
35             <table pagination="true" style="width:800px;padding:10px 20px">
36                 <tr>
37                 <td class="td_left" width="100px" align="left" >發票狀態：</td>
38                 <td><input id="TICKETFLAGSTR" name="TICKETFLAGSTR" value="" readonly="true"/></td>
39                 </tr>
40                 <tr>
41                     <td class="td_left" width="100px" align="left" >備注:</td>
42                     <td width="650px" >
43                     <input type="hidden" name="C_APPLY_NUM" id="C_APPLY_NUM">
44                     <input id="TICKETFLAG" name="TICKETFLAG" value="" type="hidden" />                        
45                     <textarea name="approveText" id="approveText" rows="5" style="width: 90%" readonly="true"></textarea>
46                     </td>
47                 </tr>
48             </table>
49         </form>
50     </div>
51     <div id="dlg-buttons_invoiceInfo" >
52         <div style="text-align:center;">
53         <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="toApprove('1')" style="visibility:hidden; display:none">審批通過</a>
54         <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="toApprove('0')" style="visibility:hidden; display:none">審批不通過</a>
55         <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="close_dialog();" href="javascript:void(0);">關閉</a>
56         </div>
57     </div>
58     </div>

View Code

js代碼片段如下：

$('#dlg_invoiceInfo').dialog({
         title:'發票認證審核'
         ,top:45
         ,closed:true
         ,width:940
         ,height: 480
         ,closable:false
         ,closed: true
         ,cache: false
         ,modal: true
         ,draggable:true
         ,buttons:'#dlg-buttons_invoiceInfo'
    });

function approve_invoice(){
    var applyNum_obj ='';

    var rows = $('#datagrid_invoiceApprove').datagrid('getSelections');// is getSelections not is getSelected
    if (rows && rows.length == 1 ){
        //初始化申請編號
        applyNum_obj= rows[0].APPLY_NUM;
//        alert(applyNum_obj);
        $("#applyNum").val('');
          $('#C_APPLY_NUM').val('');
        $('#TICKETFLAG').val('');
        $('#TICKETFLAGSTR').val('');
        $("#c_cmpny_agt_cde_apply").val('');
        $("#c_cmpny_agt_nme_apply").val('');
        $('#approveText').val('');
//        removeCheck('approveText',    "isNull",'請選擇  未認證通過的發票信息！',"onchange",true,"invoice");
        //1.0 初始化數據applyNum_0
        $("#applyNum").val(applyNum_obj);
        $("#applyNum_0").val(applyNum_obj);
        $("#c_cmpny_agt_cde_apply").val(rows[0].C_CMPNY_AGT_CDE);
        $("#c_cmpny_agt_nme_apply").val(rows[0].C_CHA_NME);
        $('#TICKETFLAGSTR').val(rows[0].TICKETFLAG_STR);
        $('#approveText').val(rows[0].APPROVE_TEXT);
//        $('#approveText').val('123');
//        check('approveText',    "isNull",'請填寫 未認證通過的發票信息！',"onchange",true,"invoice");
        $('#dlg_invoiceInfo').dialog('open');//.dialog('setTitle','發票認證審核');

        //2.0 將數據帶入dialog
        $('#datagrid_salaryapply').datagrid({   
            url:tContextPath+'',//這里寫請求的方法的url
            columns:[[
            ]],//展示的列
            pagination : false,//是否分頁
            showFooter:true,
            rownumbers: true
        });
        
        $('#datagrid_invoiceInfo').datagrid({   
            url:tContextPath+'/common/query_singlepage_data.do?',
            columns:[[   
                    { title : '發票種類',          field : 'C_INVOICE_TYPE',      width : 80,halign:'center'}, 
                    { title : '發票代碼',     field : 'C_TICKET_CDE',   width : 120,halign:'center'},
                    { title : '發票號碼',  field : 'C_TICKET_NO',       width :120,halign:'center'},
                    { title : '納稅人類型',     field : 'C_TAX_PAY',    width : 85,hidden:true},
                    { title : '納稅人類型',     field : 'C_TAX_PAY_NME',    width : 85,halign:'center'},
                    { title : '價稅合計金額',     field : 'N_FEE',      width : 85,align:'right',halign:'center'}, 
                    { title : '發票凈額',     field : 'N_FEE_NET',   width : 85,align:'right',halign:'center'},
                    { title : '發票稅額',      field : 'N_FEE_TAX',       width : 85,align:'right',halign:'center'},
                    { title : '發票影像',      field : 'C_TICKET_IMAGE',       width : 80,halign:'center',
                        formatter:function(value,row,index){
                            return "<a href='#' onclick='downLoadFile(\"" + index + "\");'>下載</a>";  
                        }
                    },
                    { title : '認證狀態',      field : 'C_TICKET_FLAG',width : 80,align:'right',hidden:true},
                    { title : '認證狀態',      field : 'C_TICKET_FLAG_NME',width : 80,align:'right',halign:'center'}
            ]],
            //查詢參數序列化 如需特殊指定可在此處修改
            queryParams:easyUtil.serializeObject($('#fm_invoiceInfo')),  
            pagination : false,//是否分頁
            rownumbers: true,
            showFooter: true,
            singleSelect:true//單選 多選
        }); 
        $('#datagrid_invoiceApprove').datagrid('clearSelections');
    } else {
         easyUtil.messagerShowCenter('提示信息','請選擇一條申請單信息！');
    }
}

View Code

該斷代碼是嵌在另外一個列表的jsp頁面里的，功能大致是這樣的：選中列表里的一條記錄，點擊某個操作按鈕，彈出這個dialog，並將選中的記錄的部分信息作為條件，去后台查詢數據庫，並且刷新dialog里的列表和字段。

遇到的問題就是在ie9以下版本的瀏覽器，打開這個列表頁面后，操作過一條數據之后，dialog里的數據都是第一次操作時的數據，后面不再進行刷新，即便我加上datagrid的強制刷新語句，也不會刷新，嘗試了好幾種方式都不能成功。

於是我就baidu了一下這個問題，看了不少解決方案的文章，都沒有根本解決問題，

然后發現一篇文章：http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body，就嘗試了一個很笨的辦法，就是每次打開dialog后，不顯示右上角那個關閉的按鈕，而是我自己給dialog定義一個按鈕，觸發一個方法，該方法觸發時即將原來的dialog給remove掉，然后重新拼接上一個一模一樣的dialog，那樣下次再打開這個dialog的時候，就不會有刷新不及時的情況了，因為原本這個dialog里的datagrid里的數據就是空的。

於是，js里加了個關閉dialog的方法，如下：

 1 function close_dialog(){
 2     var dialogOwn = '<div id="dlg_invoiceInfo" class="easyui-dialog" style="width:1000px;height:450px;padding:10px 20px">'+
 3     '<form id="fm_invoiceInfo" method="post">'+
 4     '<input type = "hidden"  name="applyNum"  id="applyNum">'+
 5     '        <input type = "hidden" name="COUNT_SQL_NAME" value="cxyj_yd.queryInvoiceInfoCountSql">'+
 6     '        <input type = "hidden" name="LIST_SQL_NAME"  value="cxyj_yd.queryInvoiceInfoListSql">'+
 7     '<table>'+
 8     '    <tr>'+
 9     '        <td class = "td_left">代理機構：</td>'+
10     '        <td><input name="c_cmpny_agt_cde"  id="c_cmpny_agt_cde_apply" readonly="readonly" />'+
11     '           <input name="c_cmpny_agt_nme"  id="c_cmpny_agt_nme_apply" readonly="readonly" />'+
12     '        </td>'+
13     '        <td class = "td_left">申請單號：</td>'+
14     '        <td><input name="applyNum_0"  id = "applyNum_0" readonly="readonly" /></td>'+
15     '    </tr>'+
16    '</table>'+ 
17 '</form>'+
18 '<table id="datagrid_salaryapply"  pagination="true" ></table>'+
19 '<table id="datagrid_invoiceInfo"  pagination="true" ></table>'+
20 '<form id="fmDownFile" action="${pageContext.request.contextPath}/download/downloadFileAFFIX.do"  method="post" >'+
21 '        <input id="inputPath_" name="inputPath" value="" type="hidden" />'+
22 '        <input id="fileName_" name="fileName" value="" type="hidden" />'+
23 '        <input id="fileRootPath" name="fileRootPath" value="payTicketFileUp" type="hidden"/>'+
24 '</form>'+
25 '<form id="fm_invoiceInfo_approve" action="${pageContext.request.contextPath}/cxyj_yd/approveTicket.do" method="post">'+
26 '    <table pagination="true" style="width:800px;padding:10px 20px">'+
27 '        <tr>'+
28 '        <td class="td_left" width="100px" align="left" >發票狀態：</td>'+
29 '        <td><input id="TICKETFLAGSTR" name="TICKETFLAGSTR" value="" readonly="true"/></td>'+
30 '        </tr>'+
31 '        <tr>'+
32 '            <td class="td_left" width="100px" align="left" >備注:</td>'+
33 '            <td width="650px" >'+
34 '            <input type="hidden" name="C_APPLY_NUM" id="C_APPLY_NUM">'+
35 '            <input id="TICKETFLAG" name="TICKETFLAG" value="" type="hidden" />'+                        
36 '            <textarea name="approveText" id="approveText" rows="5" style="width: 90%" readonly="true"></textarea>'+
37 '            </td>'+
38 '        </tr>'+
39 '    </table>'+
40 '</form>'+
41 '</div>'+
42 '<div id="dlg-buttons_invoiceInfo" >'+
43 '        <div style="text-align:center;">'+
44 '        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="close_dialog();" href="javascript:void(0);">取 消</a>'+
45 '        </div>'+
46 '    </div>';
47 //    alert(dialogOwn);
48     $('#dlg_invoiceInfo').dialog('destroy').remove;
49     
50     $('#dialog_up').append(dialogOwn);
51     $.parser.parse($('#dialog_up').parent());
52     $('#dlg_invoiceInfo').dialog({
53          title:'發票認證審核'
54          ,top:45
55          ,closed:true
56          ,width:940
57          ,height: 480
58          ,closable:false
59          ,closed: true
60          ,cache: false
61          ,modal: true
62          ,draggable:true
63          ,buttons:'#dlg-buttons_invoiceInfo'
64     });
65     $('#dlg_invoiceInfo').dialog('close'); 
66 }

View Code

問題解決。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery easyui datagrid 的數據加載 Jquery EasyUI Datagrid 的高度問題 IDEA HTML JS不能及時更新問題解決 datagrid、easyui-dialog el-dialog 里面的組件不刷新問題 elementui tree懶加載刷新問題 jquery easyui使用（三）······datagrid加載數據(已解決) jquery easyui datagrid 遠程加載數據----javascript法 JFrame 刷新問題 PagerAdapter刷新問題