在新页面加载时,网格正在从数据库中正确加载数据。
之后,由于loadonce: true
网格没有从数据库重新加载数据以进行添加/编辑/删除。
要查看列表中新添加的数据,我必须刷新页面。
<%@ taglib prefix="s" uri="/struts-tags"%>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try {
ace.settings.check('breadcrumbs', 'fixed')
} catch (e) {}
</script>
<ul class="breadcrumb" id="libreadcrumb"></ul>
<button id="view-fullscreen" style="float: right;height:40px;display:none;" class="ui-state-default white"
title="Click to View Full Screen">
<span class="ace-icon fa fullscreen ace-icon fa 2x" style="width:40px;padding:0px;">
</span></button>
<button id="cancel-fullscreen" style="float: right;height:40px;display:none;" class="ui-state-default white"
title=" Click to Exit Full Screen">
<span class="ace-icon fa resize-small ace-icon fa 2x" style="width:40px;padding:0px;">
</span></button>
<span id="nghms_time" style="padding-right:20px; float:right;color:#336CBC;font-weight:bold;">
</span>
</div>
<!-- end of breadcrumbs-->
<div class="page-content">
<div class="row">
<div id="contentArea" role="main">
<s:hidden id="profileid" name="profileid" value="27" theme="simple" />
<div id="businessprofiletab" style="width:100%" class="tabbable">
<ul id="ulbusinessprofile" class="nav nav-tabs padding-12 tab-color-blue background-blue">
<li><a href="businessDetails"><span>Business Details</span></a></li>
<li><a href="businessContacts"><span>Business Contacts</span></a></li>
<li class="active"><a data-toggle="tab" href="communicationEmails"><span>Communication Emails</span></a></li>
<li><a href="marketingInfo"><span>Marketing Info</span></a></li>
<li><a href="shipLocations"><span>Ship Locations</span></a></li>
</ul>
<div class="tab-content">
<div id="communicationemails" class="tab-pane in active">
<s:form autocomplete="off" id="frmcommunicationemails" name="frmcommunicationemails"
action="saveCommunicationEmails" method="post">
<s:hidden id="communicationEmailId" name="communicationEmailId" theme="simple" value="0"
/>
<table class="ui-widget-content fullwidth">
<tbody>
<tr>
<td class="width15">
Communication To <em>*</em>
</td>
<td class="width18">
<s:select id="title" name="currentEmail.communicationToId" theme="simple" headerKey=""
headerValue="SELECT" list="%{domainTableService.getCommunicationList()}"
listKey="communicationListId" listValue="description"
/>
</td>
<td class="width10">
Email ID <em>*</em>
</td>
<td class="width17">
<s:textfield id="emails" name="currentEmail.communicationEmail" theme="simple" />
</td>
<td class="width17">
<button type="button" id="btnadd_ce" name="btnadd_ce" title="Add Email" class="btn btn-primary"><i class="ace-icon fa fa-plus"></i> Add Email ID
</button></td>
</tr>
</tbody>
</table>
<br>
<table id="list1"></table>
<div id="pager1"></div>
<br>
<table id="t_communicationemails"></table>
<div id="p_communicationemails" class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
dir="ltr">
</div>
<table class="fullwidth">
<tbody>
<tr>
<td width="85%" align="right">
<button type="button" class="btn btn-primary" id="editbtn_ce" name="editbtn_ce"><i class="ace-icon fa fa-edit"></i> Edit Email</button></td>
<td width="15%" align="right">
<button type="button" class="btn btn-primary" id="delbtn_ce" name="delbtn_ce"><i class="ace-icon fa fa-trash"></i> Delete Email</button>
</td>
</tr>
</tbody>
</table>
<br>
<div align="right">
<s:a action="marketingInfo" name="btnnext" class="btn btn-primary" theme="simple">
<i class="ace-icon fa fa-arrow-right"></i> Next</s:a>
</div>
<br>
</s:form>
<script>
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$(document).ready(function () {
$('#rscommunicationemails').dialog({
autoOpen: false,
title: 'Attention Required',
modal: true,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
//Jquery validations ===============
$("#frmcommunicationemails").validate({
errorClass: "errors",
rules: {
'currentEmail.communicationToId': "required",
'currentEmail.communicationEmail': {
required: true,
email: true
}
},
messages: {
title: "Please Select Value",
communicationEmail: {
required: "Please provide a password",
email: "Please enter Valid Email"
}
}
});
//===============
jQuery("#t_communicationemails").jqGrid({
url: '/Cegnax/customer/communicationEmailsGrid',
datatype: 'json',
mtype: 'GET',
caption: "Emails List",
jsonReader: {
root: 'gridModel',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
colNames: ['communicationEmailId',
'communication To', 'communication Email'
],
colModel: [
{
name: 'communicationEmailId',
index: 'communicationEmailId',
editable: true,
editoptions: {
readonly: true
},
sorttype: 'int',
hidden: true
}, {
name: 'communicationDescription',
index: 'communicationDescription',
editable: true
}, {
name: 'communicationEmail',
index: 'communicationEmail',
editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
rownumbers: true,
pager: '#p_communicationemails',
sortname: 'communicationEmailId',
height: 250,
viewrecords: true,
sortorder: "desc",
autoWidth: true,
altRows: true,
loadonce: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
// updateActionIcons(table);
updatePagerIcons(table);
//enableTooltips(table);
$("#t_communicationemails").jqGrid(
'setGridWidth', $(".page-content")
.width());
}, 0);
},
});
$("#t_communicationemails").jqGrid('setGridWidth', $(
".page-content").width());
jQuery("#t_communicationemails").jqGrid('navGrid',
'#p_communicationemails', {
add: false,
edit: false,
del: false,
search: false,
view: true,
addtext: "Add",
addtitle: "Add Communication Emails",
edittext: "Edit",
edittitle: "Edit Communication Emails",
searchtext: "Search",
searchtitle: "Search Communication Emails",
viewtext: "View",
viewtitle: "View Communication Emails",
refreshtext: "Refresh",
refreshtitle: "Refresh Communication Emails",
refreshicon: 'ace-icon fa fa-refresh green',
viewicon: 'ace-icon fa fa-search-plus grey'
}, //general options
{
editCaption: "Edit Communication Emails",
reloadAfterSubmit: true,
width: 500,
height: 300,
closeAfterEdit: true,
afterSubmit: function (response, postdata) {
$("#rscommunicationemails").html(response.responseText);
$("#rscommunicationemails").dialog('open');
return [true, "saved"];
}
}, //edit
{
addCaption: "Add New Communication Emails",
width: 500,
height: 300,
closeAfterAdd: true,
afterSubmit: function (response, postdata) {
$("#rscommunicationemails").html(response.responseText);
$("#rscommunicationemails").dialog('open');
return [true, "saved"];
}
}, //add
{}, //delete
{
closeOnEscape: true,
caption: "Search Communication Emails",
multipleSearch: true,
width: 500,
height: 200,
sopt: ['eq', 'bw']
//odata : ['equal', 'not equal']
}, //search
{
closeOnEscape: true,
caption: "View Communication Emails",
width: 450,
height: 200
} //view
);
$(window).triggerHandler('resize.jqGrid'); //trigger window resize to make the grid get the correct size
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$("#t_communicationemails").jqGrid(
'setGridWidth', $(".page-content").width());
})
$(document).on('settings.ace.jqGrid', function (ev,
event_name, collapsed) {
if (event_name === 'sidebar_collapsed' ||
event_name === 'main_container_fixed') {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function () {
$("#t_communicationemails").jqGrid(
'setGridWidth', $(".page-content").width()
);
}, 0);
}
})
$("#btnnext_ce").click(function () {
$('.nav-tabs li:eq(3) a').tab('show');
});
// button submit click
$("#btnadd_ce").click(function () {
//java script function for ajax call to check whether the values in db or not
$('#frmcommunicationemails').submit();
// clearvalues_ce();
});
// orm submit
var options = {
//target:'saveBusinessContacts', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
// bind form using 'ajaxForm'
$('#frmcommunicationemails').ajaxForm(options);
// pre-submit callback
function showRequest(formData, jqForm, options) {
if ($("#profileid").val() > 0 && $(
"#communicationEmailId").val() > 0) {
options.url = options.url +
"?oper=edit&profileid=" + $("#profileid").val();
} else {
options.url = options.url +
"?oper=add&profileid=" + $("#profileid").val();
}
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr,
$form) {
jQuery("#t_communicationemails").jqGrid().setGridParam({
url: 'communicationEmailsGrid?obj=p_communicationemails&profileid=' +
$("#profileid").val(),
editurl: 'communicationEmailsGrid?obj=p_communicationemails&profileid=' +
$("#profileid").val()
}).trigger("reloadGrid");
clearvalues_ce();
}
// edit functionality
$("#editbtn_ce").click(function () {
var id = $("#t_communicationemails").getGridParam(
'selrow');
if (id == null || id == undefined) {
$("#rscommunicationemails").html(
'<img src="assets_ace/images/warning.png" height="14px" width="14px"/> Please Select Row to Edit'
);
$("#rscommunicationemails").dialog('open');
} else {
var rowData = jQuery('#t_communicationemails')
.jqGrid('getRowData', id);
loadcommunicationemails(rowData.communicationEmailId);
$("#btnadd_ce").html(
'<i class="ace-icon fa fa-save"></i>  Save Email'
);
}
});
$("#delbtn_ce").click(function () {
var id = $("#t_communicationemails").getGridParam(
'selrow');
if (id == null || id == undefined) {
$("#rscommunicationemails").html(
'<img src="assets_ace/images/warning.png" height="14px" width="14px"/> Please Select Row to Delete'
);
$("#rscommunicationemails").dialog('open');
} else {
var rowData = jQuery('#t_communicationemails')
.jqGrid('getRowData', id);
$.post(
'/Cegnax/customer/deleteCommunicationEmail', {
"communicationEmailId": rowData.communicationEmailId
},
function () {
$("#rscommunicationemails").html(
'Email Deleted Sucessfully');
$("#rscommunicationemails").dialog(
'open');
jQuery("#t_communicationemails").trigger(
"reloadGrid");
});
}
});
function loadcommunicationemails(communicationEmailId) {
$.get('/Cegnax/customer/getCommunicationEmail', {
"communicationEmailId": communicationEmailId
}, function (data) {
$("#communicationEmailId").val(data.communicationEmailId);
$("#title").val(data.communicationToId);
$("#emails").val(data.communicationEmail);
});
}
function clearvalues_ce() {
$("#btnadd_ce").html(
'<i class="ace-icon fa fa-plus"></i>  Add Email'
);
$("#communicationEmailId").val(data.communicationEmailId);
$("#title").val('-1');
$("#emails").val('');
}
});
//end of script
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>