jQuery - efficiently grab data from an asp.net gridview
I have an asp.net gridview which is output as a table in HTML. There's a series if <input>
checkboxes that tell me if the user wants to export the data into excel.
When a checkbox is checked I want to pull the corresponding rows ID from the table. I don't want to go back to the server because the data is right there and the new data could be out of sync. I also do not want to persist with State for the same reasons MS didnt do it in the first place.
How can I gather the checked row ID's with jQuery?
Example (where Export is a checkbox)
Export ID
[ true ] 1 [ false ] 2 [ true ] 3So, the jquery result should be [1,3]. Then I can take this result and use $.get to obtain the results.
Sample HTML
<div style="">
<div>
<table class="cssTable" cellspacing="1" GroupIndent="15px" AllowColMoving="True" AllowGrouping="True" AllowColSizing="True" border="0" id="_ctl0_ContentPlaceHolder1_cwgBatch">
<tr class="headTableRow">
<th scope="col">Export</th><th scope="col"> </th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$batchID')">ID</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$DueDate')">Due</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$repName')">Rep</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$area')">Area</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$Region')">Region</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$territory')">AreaRegion</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$batchDate')">Started</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$Submitted')">Submitted</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$Acknowledged')">col10</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$Rejected')">col11</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$ContentPlaceHolder1$cwgBatch','Sort$Approved')">col12</a></th>
</tr><tr>
<td>
<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl2:exportCb" /></span>
</td><td><a href=Page.aspx?batchID=1>View</a></td><td>1</td><td>20115 </td><td nowrap="nowrap">
A Dood</td><td>51</td><td>R1</td><td>51R1</td><td>5/17/2011 00:03:08 PM</td><td>5/24/2011 12:47:21 AM</td><td> </td><td> </td><td> </td>
</tr><tr class="oddTableRow">
<td>
<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl3_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl3:exportCb" /></span>
</td><td><a href=Page.aspx?batchID=2>View</a></td><td>
2</td><td>20115 </td><td nowrap="nowrap">
Some Girl</td><td>B9</td><td>R2</td><td>B9R2</td><td>5/18/2011 00:31:15 PM</td><td>5/19/2011
12:21:18 AM</td><td> </td><td> </td><td> </td>
</tr><tr>
<td>
<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl4_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl4:exportCb" /></span>
</td><td><a href=Page.aspx?batchID=3>View</a></td><td>
3</td><td>开发者_如何学C20115 </td><td nowrap="nowrap">Bart Simpson</td><td>
B8</td><td>R1</td><td>B8R1</td><td>5/10/2011 00:47:12 PM</td><td>5/11/2011 12:26:51 AM</td><td> </td><td> </td><td> </td>
</tr><tr class="oddTableRow">
<td>
<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl5_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl5:exportCb" /></span>
</td><td><a href=Page.aspx?batchID=4>View</a></td><td>
4</td><td>20115 </td><td nowrap="nowrap">Somebody Name</td><td>5</td><td>
R5</td><td>5R5</td><td>5/19/2011 00:46:53 AM</td><td>5/19/2011 12:48:54 AM</td><td> </td><td> </td><td> </td>
</tr>
</table>
</div>
</div>
I can give you a basic idea w/o the HTML snippet. But if you provided the HTML then you'd get the exact code you needed... anyhow, you'd do it something like this:
//3 lines of code is all you need
//EDIT - changed siblings -> children() & moved the tranversing inside map
var arrayOfIds = $('input:checked').closest('tr').children('td:nth-child(3)').map(function() {
return $.trim($(this).text());
}).get();
Here's the breakdown...
//all the rows that have a checked input
var rows = $(':input:checked').closest('tr');
//now we select the cells that contain the ID (in your example its the 3rd cell)
var cells = rows.children('td:nth-child(3)');
//then we iterate over each cell
var $data = cells .map(function() {
//returning the text of each cell (per your example)
return $.trim($(this).text());
});
//retrieve the raw array (containing all your IDs)
var data = $data.get();
Easy way to test if it is correct ->
//alerts all your IDs that were selected
alert(data.join(','));
精彩评论