Как удалить жестко закодированные индексы для этой таблицы в Javascript / Jquery? - PullRequest
0 голосов
/ 27 сентября 2019

У меня есть весенний 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 (#)') означают, что япоиск по индексу, поэтому, если я хочу изменить свою таблицу, мне нужно настроить все эти индексы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...