如何使用Jquery访问GridView中选定的列值

How do I access selected column value in a GridView using Jquery

本文关键字：何使用 Jquery 访问 GridView      更新时间：2023-09-26

我对整个jQuery还比较陌生，因此我对此表示怀疑。首先，让我为这篇冗长的帖子道歉——必须这样做是为了澄清上下文。我在aspx页面中定义了一个GridView控件，该控件有几列，第一列是用户可以选择行的复选框。我已经把定义的GridView模板代码放在下面。

<asp:GridView ID="GV_CDFDeviceList" runat="server" CellPadding="4" ForeColor="#333333"
                GridLines="None" AutoGenerateColumns="False">
                <RowStyle BackColor="#EFF3FB" />
                <Columns>
                    <asp:TemplateField HeaderText="Select">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkSelect" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>                    
</asp:GridView>

一旦从服务器端填充GridView，渲染的网格看起来像这样：

Select      ColumnSomeId        ColumnX     ColumnY     ColumnZ
[checkbox]        123             xxx1        yyy1        zzz1
[checkbox]        122             xxx2        yyy2        zzz2
[checkbox]        124             xxx3        yyy3        zzz3

为此生成的HTML如下所示：

<table cellspacing="0" cellpadding="4" border="0" id="ctl00_content_GV_CDFDeviceList"   style="color:#333333;border-collapse:collapse;">
    <tr style="color:White;background-color:#507CD1;font-weight:bold;">
        <th scope="col">Select</th><th scope="col">SomeId</th><th scope="col">ColumnX</th><th scope="col">ColumnY</th><th scope="col">ColumnZ</th>
    </tr><tr style="background-color:#EFF3FB;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl02_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl02$chkSelect" />
                        </td><td>123</td><td>xxx1</td><td>yyy1</td><td>zzz1</td>
    </tr>
    <tr style="background-color:#EFF3F1;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl03_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl03$chkSelect" />
                        </td><td>122</td><td>xxx2</td><td>yyy2</td><td>zzz3</td>
    </tr>
    <tr style="background-color:#EFF3FB;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl04_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl04$chkSelect" />
                        </td><td>124</td><td>xxx3</td><td>yyy3</td><td>zzz3</td>
    </tr>
</table>

用户可以使用复选框选择任何一行，然后单击按钮进行进一步处理。

在客户端，我想构建一个只包含选定行id列值的json对象，然后使用jQueryAjax方法将这个json字符串发送到服务器。

我把这一切都做好了，确实做得很好。但我确实怀疑我做这件事的方式是否正确。我所怀疑的是，jQuery代码会选择所有选定的行。

查看我如何做到这一点的代码片段：

var isAnyDeviceSelected = AreAnyDevicesSelected();
            if (isAnyDeviceSelected) {
                var siteIds = new Array();
                $(":checked").each(function(index) {
                    siteIds[index] = this.parentElement.nextSibling.innerHTML;//Retrieve Ids for the selected row.
                });
                var jsonSiteIdList = "{ siteIdList: " + JSON.stringify(siteIds) + "}";

现在你可以看到这个特殊的部分：

siteIds[index] = this.parentElement.nextSibling.innerHTML;

我对此不太满意。正如您所看到的，我到达复选框节点，然后转到父元素（即td元素），然后导航到它的下一个同级，其innerHTML是我要查找的id。

最后，我得到了数组中所有选定id的列表，尽管我不确定我的操作方式是否正确。需要那里的jQuery/Javascript专家对代码进行审查，请告诉我是否有更好的方法使用jQuery来完成这项工作。

编辑：id选择jQuery代码是基于Gridview呈现的表结构编写的。因此，只要GridView HTML呈现逻辑严格遵循表-->tr-->td结构的相同模式，这个jQuery就永远不会失败。我正在寻找的解决方案超出了这个范围（我不确定我是否有点牵强）。有没有可能gridView会用自己的id为siteid呈现td，这样我的jQuery代码就基于td id并且永远安全？编辑结束感谢

您可以使用jQuery进行选择，它看起来非常相似：siteIds[index] = $(this).parent().next().text();。

您还可以通过使用for循环来加速循环（这里有一个jsperf来显示性能改进：http://jsperf.com/jquery-each-vs-for-loops/2)：

var siteIds  = [],
    $checked = $(':checked');
for (var i = 0, len = $checked.length; i < len; i++) {
    siteIds[siteIds.length] = $checked.eq(i).parent().next().text();
}

注意，我使用的是.text()，它只获取元素中的文本，不会返回任何HTML元素。如果您想返回子代HTML元素，也可以使用.html()。

此外，我使用siteIds[siteIds.length]来增加输出数组的索引，该数组在旧浏览器中比使用.push()运行得更快，但在新浏览器中.push()运行得更快：siteIds.push($checked.eq(i).parent().next().text());

以下是您的一些文档：

  • .parent()：http://api.jquery.com/parent
  • .next()：http://api.jquery.com/next
相关文章：