easyUI JQuery 里 Dialog重新加载DIV，datagrid不能及时刷新问题

很久没有写东西了，原本上周打算写点记录一下遇到的问题的，但是由于时间和自己的惰性问题，没有及时写。现在来补上。

近期做了个需求，上周在测试的时候发现了几个问题，先来记录这个 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

 

问题解决。

 

 

posted @ 2017-02-14 11:27  Into子房  阅读(2892)  评论(0)  编辑  收藏  举报