从每个页面的数据表中获取下拉按钮id

Question

我有一个数据表，每一行都有下拉按钮，每个按钮都有唯一的 ID，并且下面还有隐藏的输入。当我单击按钮时，将调用脚本并操作数据库。

foreach (var item in Model.UvDevice)
{
    i++;
    <tr>
        <td hidden="hidden">@item.Id</td>
        <td>@i</td>
        <td>@item.Name</td>
        <td>
            <div class="btn-group dropdown">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    @item.UnitName
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" style="z-index:998; overflow: scroll; max-height: 180px; overflow-x: hidden" role="menu">
                    @foreach (var item2 in Model.Units)
                    {
                        <li>
                            <div type="button" style="z-index: 998" class="btn" onclick="changeDeviceUnit(this)" id="@j">
                                @item2.UnitName
                                <input id="deviceId" type="hidden" value="@item.Id" />
                                <input id="deviceUnitId" type="hidden" value="@item2.UnitId" />
                            </div>
                        </li>
                        j++;
                    }
                </ul>
            </div>
        </td>

这是JS代码。

function changeDeviceUnit(button) {
            var arrayPos = button.id;

            var _deviceId = deviceId[arrayPos].value;
            var _deviceUnitId = deviceUnitId[arrayPos].value;

            var data = {
                unitId: _deviceUnitId,
                deviceId: _deviceId                
            };

            $.post("...", data, function (obj) {

            });
        };

第一页上的表格可以正常工作，但是当我移动到其他页面时，ID 的顺序仍然正确，但 deviceID 和 deviceUnitId 数组正在重新排序。因此，arrayPos无法指向正确的位置。

例如，在第二页上，arrayPos 继续为 101，但 deviceID 和 deviceUnitId 数组从 [0] 开始。

我怎样才能让它在每个页面上工作？

Answer 1

我用以下方法解决了这个问题。

@foreach (var item2 in Model.Units)
{
    <li>
        <div type="button" style="z-index: 998" class="btn changeUnitButton" id="@item.Id" value="@item2.UnitId">
            @item2.UnitName
        </div>
    </li>
}

棘手的部分是，当您使用数据表时，您必须调用表元素内的按钮函数。因为当您过滤或更改表格页面时，表格将被重新绘制并创建新按钮。否则，除了第一页之外的按钮将不起作用。

JS：

    $('.deviceTable').on('click', '.changeUnitButton', function () {
        var _deviceId = $(this).attr('id');
        var _deviceUnitId = $(this).attr('value');

        var data = {
            unitId: _deviceUnitId,
            deviceId: _deviceId
        };

        $.post("", data, function (obj) {

        });

    });