很久没有写东西了,原本上周打算写点记录一下遇到的问题的,但是由于时间和自己的惰性问题,没有及时写。现在来补上。
近期做了个需求,上周在测试的时候发现了几个问题,先来记录这个 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" οnclick="toApprove('1')" style="visibility:hidden; display:none">审批通过</a> 54 <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" οnclick="toApprove('0')" style="visibility:hidden; display:none">审批不通过</a> 55 <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="close_dialog();" href="javascript:void(0);">关闭</a> 56 </div> 57 </div> 58 </div>
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='#' οnclick='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('提示信息','请选择一条申请单信息!'); } }
该断代码是嵌在另外一个列表的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" οnclick="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 }
问题解决。