Как выбрать строку из данных AJAX

jquery asp.net-mvc twitter-bootstrap jqgrid free-jqgrid

1233 просмотра

1 ответ

Бесплатный jqgrid содержит кнопку в каждом ряду. Нажатие на кнопку делает вызов ajax, который возвращает список клиентов на основе значения столбца, по которому щелкнули строки.

Пользователь может выбрать клиента из этих данных. Выбранное имя клиента и идентификатор должны быть записаны в строку jqgrid.

Я попробовал код ниже, но я получил:

Uncaught TypeError: Невозможно прочитать свойство 'rowIndex' из неопределенного

Эта ошибка происходит в этой строке кода:

var clickedId = $(this).closest('tr')[0].rowIndex,

при нажатии в любом месте в форме выбора.

Как это исправить? Приложение содержит количество таких выборок из разных данных. Какой лучший способ реализовать их, чтобы избежать повторения кода?

Таблица создана в JavaScript. Это резонно / как использовать какой-то частичный вид MVC или другой шаблон для этого?

Может ли этот код быть улучшен / переработан?

Используются бесплатные jqgrid 4.13.3-pre, .NET 4.6, ASP.NET MVC, Bootstrap 3, jQuery, jQuery UI.

Форма выбора скопирована из модального примера начальной загрузки:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <table class='table table-hover table-striped'>
                    <thead>
                        <tr><td>Customer name</td><td>Customer Id</td></tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close without selection</button>
            </div>
        </div>
    </div>
</div>

jqgrid colmodel:
    formatter: "showlink",
    formatoptions: {
        onClick: function (options) {
            var nimeosa = getColumnValue('customername', options.rowid);
            if (nimeosa == null) {
                return false;
            }
            $.ajax('api/Customers/FromRegister?' + $.param({ namepart: nimeosa }), {
                type: 'GET',
                dataType: 'json',
                contentType: "application/json",
                async: false
            }).done(function (data, textStatus, jqXHR) {
                var valik = "";
                for (var i = 0; i < data.customerlist.length; i++) {
                    valik += '<tr><td>' + data.customerlist[i].customerName + '</td><td>' +
                        data.customerlist[i].customerId + '</td></tr>';
                }
                $('#exampleModal').on('show.bs.modal', function (event) {
                    $('.modal-body tbody').html(valik);
                });

                $('#exampleModal').on('click.bs.modal', function (event) {
                    // how to fix Uncaught TypeError: Cannot read property 'rowIndex' of undefined in this line:
                    var clickedId = $(this).closest('tr')[0].rowIndex,                                    clickedElem = data.customerlist[clickedId];
                    $('#' + options.rowid + '_customername').val(clickedElem.customerName);
                    $('#' + options.rowid + '_customerid').val(clickedElem.customerId);
                });
                $('#exampleModal').modal();
            );
            return false;
        }
    }

// gets column value from jqgrid row
function getColumnValue(valjaNimi, rowId) {
    var
        iNimi = getColumnIndexByName($grid, valjaNimi),
        $nimi = $('#' + rowId + '>td:nth-child(' + (iNimi + 1) + ')'),
        nimiVal;

    if ($nimi.find('>input').length === 0) {
        // the cell is not in editing mode 
        nimiVal = $nimi.text();
    }
    else {
        nimiVal = $nimi.find('>input').val();
    }

    if (nimiVal === undefined || nimiVal.trim() === '') {
        alert('No value');
        return null;
    }
    return nimiVal;
}

Обновить

Я попробовал код из ответа. Ряды шире бутстраповской модальной ширины. Широкие ряды становятся шире формы:

введите описание изображения здесь

Как это исправить? Как заставить ряды появляться внутри модальных? Как создать полосу прокрутки, если строк больше, чем умещается на экране?

Автор: Andrus Источник Размещён: 08.11.2019 10:59

Ответы (1)


1 плюс

Решение

Чтобы получить значения клиента из строк, вам нужно обработать событие click <tr>элемента, а не его родительский модальный тип. Поскольку строки добавляются динамически, вам необходимо обработать это с помощью делегирования события.

$('#exampleModal tbody').on('click', 'tr', function() {
    var cells = $(this).children('td');
    $('#' + options.rowid + '_customername').val(cells.eq(0).text());
    $('#' + options.rowid + '_customerid').val(cells.eq(1).text());
    $('exampleModal').hide(); // assuming you want to close the modal
});

Обратите внимание, что выше должно быть отдельным сценарием, но не ясно, что options.rowidи если это может быть сохранено в глобальной переменной или передано в модальное состояние, чтобы к нему можно было получить доступ в вышеупомянутой функции (см. Следующее предложение)

Как примечание: некоторые из ваших функций кажутся ненужными (вы каждый раз повторяете одно и то же событие), и я считаю, что код может быть просто

// declare rowID as a global var and then in the above script you can use
// $('#' + rowID + '_customername').val(cells.eq(0).text());
var rowID;
var table = $('#exampleModal tbody'); // cache it

....
onClick: function (options) {
    rowID = options.rowid; // set the row ID
    ....
    $.ajax('api/Customers/FromRegister?' + $.param({ namepart: nimeosa }), {
        type: 'GET',
        dataType: 'json',
        contentType: "application/json",
        async: false
    }).done(function (data, textStatus, jqXHR) {
        table.empty(); // clear any existing rows
        $.each(data, function(index, item) {
            var row = $('<tr></tr>');
            row.append($('<td></td>').text(item.customerName ));
            row.append($('<td></td>').text(item.customerId));
            table.append(row);
        });
        $('#exampleModal').modal(); // display the mpday
    );
    return false;
}
Автор: user3559349 Размещён: 20.08.2016 10:23
Вопросы из категории :
32x32