Asp.net 在WEBGRID中选择行

在绑定WEBGRID的一行后，如何选择该行 将突出显示（通过鼠标单击任何行或任何行的单元格，不带 使用复选框或选项按钮作为列）

1.）选择任何一行后，我可以获取该行的数据值吗

2.）我可以通过键盘（上下键盘）上下移动所选内容吗 按钮）

3.）更改选择行的索引后（通过鼠标或键盘） 行选择索引更改或行选择索引更改事件 可以被解雇/处理

---

谢谢你

这个问题有很多，有很多方法可以实现。这是你如何做到这一点的粗略草图。我将假设您正在使用JQuery，因为这将使这更容易

要在单击时高亮显示行或单元格，请将单击事件附加到每个行或单元格：

$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });

当然，您还需要取消突出显示它们，但我们将在稍后讨论

要获取一行的数据（我假设您指的是在服务器上，而不是在客户机上），您必须执行AJAX调用。获取行的id比返回整行更容易。单击事件中的类似内容：

var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);

这假设您已经向Webgrid中的每一行添加了一个隐藏输入及其行ID值

如果需要访问选定的第一行单元格，可以在单击功能中使用：

var cellOne = this.cells[0].innerHTML ;

我还建议您的单击功能只应链接到某个表（否则将在所有tr元素上启用选择），并使用css类，该类在选择更改时添加和删除

$('#MainTable tr').click(function () {
            $(this).addClass('select');
            $('#MainTable tr').not(this).removeClass('select');
        });

要上下移动，您可以向窗口添加一个“keyup”事件侦听器，并处理上/下操作。有关更多详细信息，请参见此处：。您必须使用Javascript跟踪当前选择的行，以便根据需要高亮显示/取消高亮显示

最后，对于最后一个问题，您可以在用户单击或箭头键指向其他行时触发AJAX调用（或Javascript调用）。您已经在跟踪已选择的行号，因此您可以将其与事件一起发送：

$.get("?event=row_selection_changed&row_id=" + row_id);

@grid.GetHtml（htmlAttributes:new{id=“MainTable”}，…）；
$（函数（）
{
var tr=$（'MainTable'）。find（'tr'）；
tr.bind（'click'，函数（事件）
{
$（“tr”）。单击（函数（）{$（this.css（'background'，'yellow'）；}）；
});
}); 

您可以尝试以下代码：

<div id="AjaxWebGrid">
    @grid.GetHtml(
    htmlAttributes: new { id = "MainTable" },
    tableStyle: "webGrid",
    headerStyle: "header",
    alternatingRowStyle: "alt",
    selectedRowStyle: "select",
    columns: grid.Columns(
        grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
        grid.Column("", header:"حذف", format:
        @<text>
            @Ajax.ActionLink("Delete", "Delete",
                new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
                new { @class = "button" })
        </text>)
    ));
</div>

<script>
    $(document).ready(function () {
        $('#MainTable tr').click(function () {
            $(this).addClass('select');
            $('#MainTable tr').not(this).removeClass('select');
        });
    });
</script>

@grid.GetHtml(
HtmlatAttributes:new{id=“MainTable”}，
表样式：“webGrid”，
headerStyle:“header”，
alternatingRowStyle:“alt”，
selectedRowStyle：“选择”，
列：grid.columns(
grid.Column（“sendedDateTime”，“SendDate”，null，样式：“SendDateTimeStyle”），
网格列（“），标题：“网格”，格式：
@
@ActionLink（“删除”、“删除”，
新的{id=”“，DelID=item.id}，新的AjaxOptions{UpdateTargetId=“AjaxWebGrid”}，
新建{@class=“button”}）
)
));
$（文档）.ready（函数（）{
$（'#MainTable tr'）。单击（函数（）{
$（this.addClass（'select'）；
$（'#MainTable tr'）.not（this）.removeClass（'select'）；
});
});

<div id="AjaxWebGrid">
    @grid.GetHtml(
    htmlAttributes: new { id = "MainTable" },
    tableStyle: "webGrid",
    headerStyle: "header",
    alternatingRowStyle: "alt",
    selectedRowStyle: "select",
    columns: grid.Columns(
        grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
        grid.Column("", header:"حذف", format:
        @<text>
            @Ajax.ActionLink("Delete", "Delete",
                new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
                new { @class = "button" })
        </text>)
    ));
</div>

<script>
    $(document).ready(function () {
        $('#MainTable tr').click(function () {
            $(this).addClass('select');
            $('#MainTable tr').not(this).removeClass('select');
        });
    });
</script>