我正在处理由模态对话框修改的数据表。当用户按下下面代码创建的页面中数据表的“操作”列中标有“协调”的按钮时，会弹出一个对话框，允许用户输入一个数字并按“调和”，这将取代“操作”列中该特定行中的“拒绝”和“同步”按钮，文本告诉用户输入的支票号。
我的观点如下：
<link href="~/Content/ReconcileStyle.css" rel="stylesheet" type="text/css" />
@{
ViewBag.Title = "Reconcile";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container-fluid left"><h4 style="float:left;">Reconcile Bank Data</h4><button class="btn" data-toggle="modal" data-target="#importSettings" style="background:none;"><i class="fa fa-gear"></i></button></div>
<div class="container-fluid left">
<div id="reconcileSection"></div>
<br /><br /><br />
<h4>Exceptions</h4>
<br />
</div>
<div class="container-fluid left">
<div class="container-fluid left">
<table id="ReconcileTable" class="table table-striped table-bordered table-hover text-nowrap">
<thead>
<tr>
<th data-column="CheckNo" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Number" data-container="body">Check No.</th>
<th data-column="Exception" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Exception Reason">Exception</th>
<th data-column="IssueDate" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Date Check was Issued">Issue Date</th>
<th data-column="ClearDate" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Date Check was Cleared">Clear Date</th>
<th data-column="ImportDate" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Date Check was Imported">Import Date</th>
<th data-column="Age" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Age">Age</th>
<th data-column="CheckAmount" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Amount of Check">Check Amount</th>
<th data-column="BankAmount" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Amount Imported from Bank Data File">Bank Amount</th>
<th class="text-center">Action</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="modal fade" id="importSettings" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" data-backdrop="false" style="height:340px;">
<div class="modal-dialog" style="z-index:101;">
<div class="modal-content" style="z-index:101;">
<div class="modal-header" id="importSettingsHeader" style="background-color:#00A4E5; color:#ffffff; font-size:large;">Import Settings<button class="btn" data-toggle="modal" data-target="#importSettings" style="text-align:right; background:none; position:relative; float: right; margin-top:-11px;"><i class="fa fa-remove" style="color:black;"></i></button></div>
<div class="modal-body" id="importSettingsBody">
<h4>Column Mapping</h4>
<table>
<tr style="margin-bottom: 30px; height:30px;">
<td style="width: 210px;">Check Number:</td>
<td><input id="importSettingsCheckNumber" type="text" placeholder="ex., A" /></td>
</tr>
<tr style="margin-bottom: 30px; height: 30px;">
<td>Bank Reference Number:</td>
<td><input id="importSettingsBankReferenceNum" type="text" placeholder="ex., B" /></td>
</tr>
<tr style="margin-bottom: 30px; height:30px;">
<td>Amount:</td>
<td><input id="importSettingsAmount" type="text" placeholder="ex., C" /></td>
</tr>
</table>
</div>
<div class="modal-footer" id="importSettingsFooter"><button class="btn" style="background-color:#FFFFFF; color:#00A4E5;" data-toggle="modal" data-target="#importSettings">CANCEL</button><button class="btn" style="background-color:#00A4E5; color:#FFFFFF; margin-left:20px;" data-toggle="modal" data-target="#importSettings">SAVE</button></div>
</div>
</div>
</div>
<div class="modal fade" id="verifyBankData" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" data-backdrop="false" style="height:300px;">
<div class="modal-dialog" style="z-index:101;">
<div class="modal-content" style="z-index:101;">
<div class="modal-header" id="verifyBankDataHeader" style="background-color:#00A4E5; color:#ffffff; font-size:large;">Verify Bank Data<button class="btn" data-toggle="modal" data-target="#reconcileDuplicateCheck" style="text-align:right; background:none; position:relative; float: right; margin-top:-11px;"><i class="fa fa-remove" style="color:black;"></i></button></div>
<div class="modal-body" id="verifyBankDataBody">
<p>Is the imported information correct?</p>
<table id="bankDataTable" class="table table-striped table-bordered table-hover text-nowrap">
<thead>
<tr>
<th data-column="CheckNum" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Number" data-container="body">Check</th>
<th data-column="BankRef" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Bank Reference" data-container="body">Bank Reference</th>
<th data-column="Amount" class="text-left" data-toggle="tooltip" data-placement="bottom" data-original-title="Amount of Check" data-container="body">Amount</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer" id="verifyBankDataFooter"><button class="btn" style="background-color:#FFFFFF; color:#00A4E5;" data-toggle="modal" data-target="#reconcileDuplicateCheck">NO</button><button class="btn" style="background-color:#00A4E5; color:#FFFFFF; margin-left:20px;" data-toggle="modal" data-target="#reconcileDuplicateCheck">YES</button></div>
</div>
</div>
</div>
<div class="modal fade" id="reconcileDuplicateCheck" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" data-backdrop="false" style="height:300px;">
<div class="modal-dialog" style="z-index:101;">
<div class="modal-content" style="z-index:101;">
<div class="modal-header" id="reconcileDuplicateCheckHeader" style="background-color:#00A4E5; color:#ffffff; font-size:large;">Reconcile Duplicate Check<button class="btn" data-toggle="modal" data-target="#reconcileDuplicateCheck" style="text-align:right; background:none; position:relative; float: right; margin-top:-11px;"><i class="fa fa-remove" style="color:black;"></i></button></div>
<div class="modal-body" id="reconcileDuplicateCheckBody">
<table>
<tr style="margin-bottom: 30px; height:30px;">
<td style="width: 210px;">Correct Check Number:</td>
<td><input id="reconcileDuplicateCorrectCheckNumber" type="text" placeholder="" /></td>
</tr>
</table>
</div>
<div class="modal-footer" id="reconcileDuplicateCheckFooter"><button class="btn" style="background-color:#FFFFFF; color:#00A4E5;" data-toggle="modal" data-target="#reconcileDuplicateCheck">CANCEL</button><button class="btn" id="reconcileBtn" style="background-color:#00A4E5; color:#FFFFFF; margin-left:20px;" data-toggle="modal" data-target="#reconcileDuplicateCheck">RECONCILE</button></div>
</div>
</div>
</div>
@section scripts
{
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-dialog.js"></script>
@Scripts.Render("~/bundles/dataTables")
<script type="text/javascript">
$.extend($.fn.dataTable.defaults, {
'pagingType': 'full_numbers',
'pageLength': 10,
'language': {
'paginate': {
'first': '«',
'last': '»',
'previous': '‹',
'next': '›'
},
'info': 'Displaying _START_-_END_ of _TOTAL_',
'infoEmpty': 'Displaying 0 to 0 of 0',
'infoFiltered': '',
'search': '',
'zeroRecords': 'No matching records found'
},
//'dom': '<"top"f>rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
'dom': '<"top">rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
'initComplete': function (settings, json) {
$('.dataTables_filter input[type=search]').attr('placeholder', 'Search');
}
});
$(function () {
var data = $('#ReconcileTable').dataTable({
'ajax': {
type: 'POST',
url: '@Url.Action("GetData", "Reconcile")',
//data: function(d) {
//}
},
columns: [
{
data: 'CheckNo',
sortable: true,
className: "text-center"
},
{
data: 'Exception',
sortable: true,
className: "text-center"
},
{
data: 'IssueDate',
sortable: true,
className: "text-center"
},
{
data: 'ClearDate',
sortable: true,
className: "text-center"
},
{
data: 'ImportDate',
sortable: true,
className: "text-center"
},
{
data: 'Age',
sortable: true,
className: "text-center"
},
{
data: 'CheckAmount',
sortable: true,
className: "text-center"
},
{
data: 'BankAmount',
sortable: true,
className: "text-center"
},
{
render: function (data, type, row) {
if (row.Exception == "Dollar/Amount") {
return '<div style="text-align: right;"><button type="button" class="btn btn-primary"><i class="fa fa-check-circle-o"></i> RECONCILE</button></div>';
}
else if (row.Exception == "Missing") {
return '<div style="text-align: right;"><input type="text" class="form-control" id="MissingInput" placeholder="Correct Check No." style="width: 150px; margin-right: 10px; position: relative; float: left;" /><button type="button" class="btn btn-primary" style="margin-left: 10px; position: relative; float: right;"><i class="fa fa-check-circle-o"></i> RECONCILE</button></div>';
}
else if (row.Exception == "Duplicate") {
return '<div style="text-align: right;"><button type="button" id="rejectBtn" class="btn btn-danger" style="position: relative; margin-right: 10px;"><i class="fa fa-times-circle-o"></i> REJECT</button><button id="reconcileTableBtn" type="button" class="btn btn-primary" style="position: relative; margin-left: 10px;" data-toggle="modal" data-target="#reconcileDuplicateCheck"><i class="fa fa-check-circle-o"></i> RECONCILE</button></div>';
}
else {
return '';
}
},
sortable: false
}
],
sort: true,
ordering: true,
order: [0, 'StartDate'],
processing: true,
serverSide: true
});
var state = "Initial";
$(document).ready(function () {
state = "Initial";
$('#reconcileSection').empty();
$('#reconcileSection').append($("<button class='btn btn-primary' id='uploadButton'><i class='fa fa-upload'></i> UPLOAD</button>"));
$(document).on("click", "#uploadButton", function () {
$('#reconcileSection').empty();
$('#reconcileSection').append($("<table><tr><td><input type='file' id='uploadFile' style='height: 42px; vertical-align: bottom;'></td><td><button class='btn btn-primary' id='reconcileButton' style='margin-left: 30px;'><i class='fa fa-check-circle-o'></i> RECONCILE</button></td></tr></table>"));
})
var exceptionsFound = true;
var count = 0;
$(document).on("click", "#reconcileButton", function () {
state = "Completion";
$('#reconcileSection').empty();
if (exceptionsFound) {
$('#reconcileSection').append($("<table><tr id='success' class='bg-success alert-success' style='margin-bottom: 30px;'><td style='padding-left: 30px; width: 430px;' id='successClose'><i class='fa fa-check-circle-o'></i> Reconciliation complete!</td><td><button id='successClose' class='btn' style='background: none;'><i class='fa fa-close'></i></button></td></tr><tr id='padding' style='background-color: white; height: 30px;'></tr><tr id='exceptions' class='bg-danger alert-danger'><td style='width:430px; padding-left: 30px;'><i class='fa fa-exclamation-triangle'></i> Exceptions found. Please reconcile them manually.</td><td><button class='btn' style='background: none;' id='exceptionsClose'><i class='fa fa-close'></i></button></td></tr></table>"));
count = 3;
}
else {
$('#reconcileSection').append($("<table><tr id='success'><td><i class='fa fa-check-circle-o'></i> Reconciliation complete!</td><td><button class='btn' style='background: none;' id='successClose'><i class='fa fa-close'></i></button></td></tr></table>"));
count = 1;
}
});
var tableCell;
var text;
var newCheckNo;
$(document).on("click", "#reconcileTableBtn", function () {
tableCell = $(this).closest('td').index();
});
$(document).on("click", "#reconcileBtn", function () {
newCheckNo = $('#reconcileDuplicateCorrectCheckNumber').val();
alert(newCheckNo);5
tableCell.data("<i class='fa fa-check'></i> Reconciled as Check <strong style='text-decoration: underline;'>$(newCheckNo)</strong>").draw();
});
$(document).on("click", "#successClose", function () {
if (count == 3) {
$('#success').remove();
count--;
}
else if(count == 2) {
count = 0;
$('#reconcileSection').empty();
$('#reconcileSection').append($("<button class='btn btn-primary' id='uploadButton'><i class='fa fa-upload'></i> UPLOAD</button>"));
}
else
{
count--;
$('#reconcileSection').empty();
$('#reconcileSection').append($("<button class='btn btn-primary' id='uploadButton'><i class='fa fa-upload'></i> UPLOAD</button>"));
}
});
$(document).on("click", "#exceptionsClose", function () {
if (count == 3) {
$('#exceptions').remove();
count--;
}
else
{
count = 0;
$('#reconcileSection').append($("<button class='btn btn-primary' id='uploadButton'><i class='fa fa-upload'></i> UPLOAD</button>"));
}
});
});
})
</script>
}
所以我的问题是，我该如何实现这一目标？我在解决如何在单击按钮时更改数据表单元格值时遇到问题（我知道它将在函数中：
$(document).on("click", "#reconcileBtn", function () {
newCheckNo = $('#reconcileDuplicateCorrectCheckNumber').val();
alert(newCheckNo);5
tableCell.data("<i class='fa fa-check'></i> Reconciled as Check <strong style='text-decoration: underline;'>$(newCheckNo)</strong>").draw();
});
但我不知道当前以“tableCell.data”开头的行应该是什么代码，除了它不应该是tableCell.data！
感谢您的帮助！