Question

使用简单的表和jquery，如何使用jquery手动处理简单表/网格上的选择？

这是我尝试过的。您可以查看它或提供自己的选择方式。如果有更好的东西或你认识的东西有效，你就不必阅读我的。我很乐意了解其他人是如何做到的。

到目前为止，我已经设法在调用click事件时在gridrowselected上添加tr类，以便我知道当前选择了哪一行。但我不知道如何将选定的数据传回控制器（或者至少是我放在行上的索引）。

使用这样的网格

<table id="ProjectList" class="grid reduced-full-span-grid grid-header">
    <thead>
        <tr>
            <th class="long-col">
                Title
            </th>
            <th class="medium-col">
                Type
            </th>
            <th class="medium-col">
                Priority
            </th>
        </tr>
    </thead>
    <tbody>
        <% for ( int i = 0; i < Model.Projects.Count; ++i )
           { %>
        <tr class="gridrow">
            <td>
                <%= Html.HiddenFor( model => model.Projects[i].ProjectId ) %>
                <%= Html.TextBoxFor( model => model.Projects[i].Title,
                    new { @readonly = "readonly" } )%>
            </td>
            <td>
                <%= Html.TextBoxFor( model => model.Projects[i].ProjectType,
                    new { @readonly = "readonly" } )%>
            </td>
            <td>
                <%= Html.TextBoxFor( model => model.Projects[i].Priority,
                    new { @readonly = "readonly" } )%>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

和像这样的选择逻辑

$(function() {
    $('.gridrow').click(function() {
        $(this).siblings('.gridrow').removeClass('gridrow-selected');
        if ($(this).hasClass('gridrow-selected') == true) {
            $(this).removeClass('gridrow-selected');
        } else {
            $(this).addClass('gridrow-selected');
        }
        $(this).change();
    });
});

我试过这样的事情

$(function() {
    $('#ProjectList .gridrow').click(function() {
        // Get row's index
        var projectId = $(this).find('input[name$=ProjectId]').val();
        // Remove the input if it already exists
        var parentForm = $(this).parents('form');
        parentForm.remove('input[name="selectedRows"]');
        // If it is selected, create the form. If it's not selected then the input just gets removed (the user must have clicked on it and deselected the row)
        if ($(this).hasClass('gridrow-selected') === true) {
            parentForm.append($('<input>', { type: "hidden", name: "selectedRows", value: projectId }));
        }
    });
});

我希望创建一个隐藏的输入，这样当我发布时，selectedRows会传递给控制器。但它所做的只是创建输入，但数据仍然没有传递给控制器。

Answer 1

由于您使用的是文本框，因此表格行是可编辑的 - 在项目模型中包含选定的属性可能更容易。在顶级模型中包含一个selectedrow属性也会简化很多事情，因此您只需要在点击时更新单个已知字段，而不是进行复杂的dom更改。使用这两个选项，您可以从复选框/文本框开始，而不是隐藏字段，因此非常清楚发生了什么。

另一个改进是将id添加到表行 - 这样你的更新js就简化为

$("#selectedRows").val($(".gridrow-selected").attr("id"));

Answer 2

而不是

parentForm.append($('<input>', { type: "hidden", name: "selectedRows", value: projectId }));

试

parentForm.append('<input type="hidden" name="selectedRows" value="' + projectId + '" />');

使用jquery和asp.net mvc处理来自简单网格的行选择

2 个答案: