У меня есть весенний MVC-проект, над которым я работаю с интерфейсом HTML / JS.У внешнего интерфейса есть таблица, которую пользователь заполняет, и, когда это сделано, таблица сериализуется в объект JSON и отправляется на сервер с запросом ajax для обработки.Код работает, но он не очень расширяемый ... Например, если мы решим добавить еще один столбец в таблицу, код должен измениться как минимум в трех местах.Я был бы признателен за любые стратегии или предложения по дизайну, чтобы сделать этот код более обобщенным.
Моя таблица:
<div class="table-responsive">
<form id="tableForm">
<table class="small table table-condensed" id="internalUnsubmittedPartRequests">
<thead>
<tr>
<th>Part or Asset ID</th>
<th>Qty</th>
<th>Applicable Model</th>
<th>Queue Name</th>
<th>Issue Type</th>
<th>Command</th>
<th>Activation Date</th>
<th>Flush Date</th>
</tr>
</thead>
<tbody>
<!-- Dynamically Generated via newRequest.js -->
</tbody>
</table>
</form>
</div>
JavaScript для добавления строки:
// Handle add/done in modal
$('#newPartRequest').submit(function(event) {
event.preventDefault();
$('#newRequestModal').modal('hide');
var individualPart = $('#newPartRequest').serializeArray()
.reduce(function(key, val) { key[val.name] = val.value; return key; }, {});
// console.log(individualPart);
renderTableBody(individualPart);
});
// Dynamically adds row to table based of info from modal
function renderTableBody(tableData) {
var tableRow = $('<tr>');
$('<td>' + tableData.partID + '</td>').appendTo(tableRow);
$('<td>' + tableData.quantity + '</td>').appendTo(tableRow);
$('<td>' + tableData.applicableModel + '</td>').appendTo(tableRow);
$('<td>' + tableData.queueName + '</td>').appendTo(tableRow);
$('<td>' + tableData.issueType + '</td>').appendTo(tableRow);
$('<td>' + tableData.command + '</td>').appendTo(tableRow);
$('<td>' + tableData.activationDate + '</td>').appendTo(tableRow);
$('<td>' + tableData.flushDate + '</td>').appendTo(tableRow);
$('</tr>').appendTo(tableRow);
$('#internalUnsubmittedPartRequests tbody').append(tableRow);
}
Наконец,сериализация таблицы для отправки через объект JSON:
function stringifyTable(){
// Returns JSON version of table
var myRows = [];
$('#internalUnsubmittedPartRequests tr').each(function(row, tr){
myRows[row] = {
partID : $(tr).find('td:eq(0)').text(),
quantity : $(tr).find('td:eq(1)').text(),
applicableModel : $(tr).find('td:eq(2)').text(),
queueName : $(tr).find('td:eq(3)').text(),
issueType : $(tr).find('td:eq(4)').text(),
// controlCode : $(tr).find('td:eq(5)').text(),
// position : $(tr).find('td:eq(6)').text(),
command : $(tr).find('td:eq(5)').text(),
activationDate : $(tr).find('td:eq(6)').text(),
flushDate : $(tr).find('td:eq(7)').text()
}
});
myRows.shift();
var jsonData = {};
jsonData.newPartRequest = myRows;
var stringifiedJsonData = JSON.stringify(jsonData.newPartRequest);
return stringifiedJsonData;
}
Эта последняя функция действительно заставляет меня задуматься ... все вызовы .find ('td: eq (#)') означают, что япоиск по индексу, поэтому, если я хочу изменить свою таблицу, мне нужно настроить все эти индексы.