如何从 ajax 数据中 select 行

Question

免费的 jqgrid 包含每一行的按钮。单击按钮 ajax 根据单击的行列值调用 returns 客户列表。

用户可以 select 客户从此数据。选定的客户名称和 ID 应写入 jqgrid 行。

我尝试了下面的代码，但我得到了：

Uncaught TypeError: Cannot read property 'rowIndex' of undefined

这个错误发生在这行代码：

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

在select离子形式的任何地方点击时。

如何解决这个问题？应用程序包含来自不同数据的此类 select 的数量。哪个是实现它们以避免代码重复的最佳方式？

Table 是在 javascript 中创建的。是否resonable/how为此使用一些 MVC 局部视图或其他模板？

这个代码可以吗improved/refactored?

免费jqgrid 4.13.3-pre，.NET 4.6，ASP.NET MVC，Bootstrap 3，jQuery，jQuery UI被使用。

选择表格复制自bootstrap模态示例：

<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;
}

更新

我尝试了答案中的代码。行宽于 bootstrap 模态宽度。宽行变得比表格更宽：

如何解决这个问题？如何强制强制行出现在模态内？如果行数多于屏幕显示，如何创建滚动条？

Answer 1

为了从行中获取客户的值，您需要处理 <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;
}

如何从 ajax 数据中 select 行

How to select row from ajax data

asp.net-mvc

jquery

jqgrid

twitter-bootstrap

free-jqgrid