在WEBGRID中选择Row

Question

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

1.)选择任何一行后,我可以获得该行的数据值吗？

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

3.)并且在更改选择行的索引(通过鼠标或通过键盘上下按钮)之后,行选择索引或者行选择索引修改事件可以被触发/处理

谢谢

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按键检测.您必须使用Javascript来跟踪当前选择的行,以便根据需要突出显示/取消突出显示.

最后,对于最后一个问题,当用户单击或箭头键到另一行时,您可以触发AJAX调用(或Javascript调用).您已经记录了已选择的行号,因此您可以将其与事件一起发送:

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