如何使用Jquery访问GridView中的选定列值 [英] How do I access selected column value in a GridView using Jquery

问题描述

朋友们，
我对整个jQuery还是比较陌生的-因此有这个疑问.首先，我对长篇文章表示歉意-必须这样做以使上下文清楚.
我在我的aspx页面中定义了一个GridView控件，该控件有几列，第一列是一个复选框，用户可以在其中选择一行.我在下面放下了已定义的GridView模板代码.

Hi friends,
I am comparatively new to the whole jQuery thing - hence this doubt. Let me first apologize for the long post - had to do it to make the context clear.
I have a GridView control defined in my aspx page which has a few columns, and the first column is a checkbox where the user can select a row. I have put down the defined GridView template code below.

<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后，呈现的网格将如下所示:

Once the GridView is populated from server-side, the rendered grid looks something like this:

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

为此显示的HTML如下所示:

The HTML which get generated for this is shown below:

<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对象，然后使用jQuery Ajax方法将此json字符串发送到服务器.

我做了所有这些工作，它的确工作正常.但是我确实对我是否做得正确感到怀疑.我的疑问在于执行所有选定行选择的jQuery代码.

请参阅我的代码片段:

The user may select any of the rows using the checkbox, and will click a button for further processing.

In the client-side, I want to build a json object with only the selected rows id column values, and then send this json string to the server using jQuery Ajax method.

I have made all this working, it does work fine. But I do have a doubt as to whether I am doing it the right way. The doubt I am having is in the jQuery code that does the selection of all selected rows.

See the code snippet of how I did it:

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) + "}";

现在，您看到的部分

Now you see the part

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并永远安全?

I am not very happy with this. As you can see, I get to the checkbox node, then go to the parent element (which is the td element), then navigate to the next sibling of it, whose innerHTML is the id which I am looking for.

Finally, I get a list of all selected ids in the array, though I am not sure if I am doing it the right way. Need a code review from the jQuery/Javascript experts over there, and do let me know if there is a better way of doing this using jQuery.

The id selection jQuery code is written based on the table structure rendered by the Gridview. So as long as the GridView HTML render logic strictly follows the same pattern of table-->tr--> td structure, this jQuery will never fail. The solution I am looking for is beyond this (I am not sure if I am going a lil far-fetched). Is it possible that the gridView will render the td for the siteid with an id of its own, so that my jQuery code is based on the td id and safe forever?

Thanks.

推荐答案

内容

GV_CDFDeviceList

GV_CDFDeviceList

ctl02

这篇关于如何使用Jquery访问GridView中的选定列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！