在 WEBGRID 中选择行答案

【问题标题】：Select Row in WEBGRID在 WEBGRID 中选择行
【发布时间】：2017-09-22 04:56:40
【问题描述】：

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

1.)选择任意一行后，我可以得到该行的数据值吗？

2.) 我可以通过键盘上下移动选择吗（上下键盘按钮）？

3.) 并且在更改选择行的索引后（通过鼠标或键盘 up-down 按钮）是 rowselectedindexchaged 或 rowselectingindexchanging 事件可以被解雇/处理

谢谢

【问题讨论】：

标签： asp.net webgrid

【解决方案1】：

这个问题有很多，并且有很多方法可以实现它。这是您如何做到这一点的粗略草图。我将假设您使用的是 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 值。

如果您需要访问选定的第一行单元格，您可以在 click 函数中使用它：

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

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

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

要上下移动，您可以向窗口添加“keyup”事件侦听器并处理向上/向下。有关详细信息，请参见此处：jQuery kepress detection on left, right arrows and space bar。您必须使用 Javascript 来跟踪当前选择的行，以便根据需要突出显示/取消突出显示。

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

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

【讨论】：

【解决方案2】：

你可以试试这个代码：

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

【讨论】：

【解决方案3】：

@grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);

<script type="text/javascript">
    $(function () 
    {
        var tr = $('#MainTable').find('tr');
        tr.bind('click', function (event) 
        {

           $("tr").click(function () { $(this).css('background', 'yellow'); });
         });
    }); 
</script>

【讨论】：