Question

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

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

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

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

谢谢

Answer 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值。

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

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

我还建议您的click函数应该只链接到某个表（否则将在所有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);

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

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

在WEBGRID中选择Row

3 个答案: