实现功能：对GridView中的列表行进行操作。
1.选择要操作的行。可以点击<全选>按钮，选中全部数据行。也可以有挑选的去进行选择。
2.点击<全部选择>按钮，选择的数据行显示在图二的列表中。
图一：
图二：
实现步骤：
1.GridView的数据绑定代码
<table cellspacing="1" width="100%" border="0"> <tr> <td> <asp:Button ID="btnSelect" runat="server" Text="全部选择" Width="80px" CssClass="bttn" OnClientClick="javascript:return SelectCheck();"/></td></tr> <tr> <td align="center"> <asp:DataGrid ID="DataGrid1" runat="server" CssClass="main-table" Width="100%" EnableViewState="False" AutoGenerateColumns="False" BorderColor="#9A9A9A" PageSize="20" > <AlternatingItemStyle CssClass="line-even"></AlternatingItemStyle> <ItemStyle CssClass="line-odd"></ItemStyle> <HeaderStyle Wrap="False" HorizontalAlign="Center" Height="23px" ForeColor="#333333" CssClass="outset-table"></HeaderStyle> <Columns> <asp:TemplateColumn HeaderText="<input type=checkbox id='all' title='全选' onclick='javascript:SignChange(this);' />全选"> <HeaderStyle HorizontalAlign="Center" /> <ItemTemplate> <asp:CheckBox ID="SelectAll" runat="server" ></asp:CheckBox> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="序号" > <ItemTemplate><span><%=Index++%></span></ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateColumn> <asp:BoundColumn DataField="zt_car_Id" HeaderText="车辆号" > <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="companyName" HeaderText="公司名称"> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="carLicence" HeaderText="运输牌号"> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="linkMan" HeaderText="联系人"> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="phone" HeaderText="联系电话"> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> </Columns> <PagerStyle Visible="False"></PagerStyle> </asp:DataGrid> </td> </tr> </table>
2.实现checkbox的全选和多选的JS方法
<script type="text/javascript" src="../Common/Javascript/jquery-1.4.2.js"></script>
<script type="text/javascript"> //全选与全不选 function SignChange(obj) { if (obj.checked) { $("input[type='checkbox']").attr("checked", true); } else { $("input[type='checkbox']").attr("checked", false); } } </script>
3.<全部选择>按钮的JS方法
//<全部选择>按钮方法 function SelectCheck() { var str = ""; $("#all").attr("checked", false);//取消标题行的checkbox的选中
$("input[type='checkbox']:checked").each(function() { str += $(this).parent().siblings().eq(0).text() + "," + //序号
$(this).parent().siblings().eq(1).text() + "," + //车辆号
$(this).parent().siblings().eq(2).text() + "," + //公司名称
$(this).parent().siblings().eq(3).text() + "," + //运输牌号
$(this).parent().siblings().eq(4).text() + ","+ //联系人
$(this).parent().siblings().eq(5).text() + "#"; //联系电话
}); SelectValue(str);//将字符串传给Selectvalue方法做处理 return false; }
function SelectValue(str) { var Str = str.split('#'); if (Str[0] != "") { for (var i = 0; i < Str.length-1; i++) { var value = Str[i].split(','); var id = value[0]; var Cid=value[1] var Cname = value[2]; var CNo = value[3]; var CMan = value[4]; var Cphone = value[5]; intitValue(Cid, Cname, CNo, CMan, Cphone); } } }
function intitValue(PcarId,Pcompanyname,Pcno,Pcman,Pcphone) { opener.$; type = Ptype; var len=opener.$('#Tblships tr').length;//Tblships 是图二中获取车辆信息列表的控件
for(var i=0;i<len;i++) { if (opener.$('#Tblships tr')[i].id == PcarId) { alert("车牌号为[" + Pcno + "]的车辆已经选了！");//图二列表里已经存在词条数据，则提示。
window.close(); return; } } //拼接图二的显示列表
opener.$('#Tblships').append("<tr id=" + PcarId + "><td align='center'>" + PcarId + "</td><td align='center'>" + Pcompanyname + "</td><td align='center'>" + Pcno + "</td><td align='center'>" + Pcman + "</td><td align='center'>" + Pcphone + "</td><td align='center'><a href='#' onclick='deltr(" + PcarId + ")'>删除</a></td></tr>"); window.close(); }
附：图二的前台页面代码
<tr>
<td style="width: 15%">
运输车辆：
</td>
<td colspan="4">
<div style="height: 140px; overflow: auto;">
<table id="Tblcars" border="1" width="100%" runat="server">
<tr>
<td align="center">
车辆号
</td>
<td align="center">
公司名称
</td>
<td align="center">
车牌号码
</td>
<td align="center">
联系人
</td>
<td align="center">
联系电话
</td>
<td align="center">
操作
</td>
</tr>
</table>
</div>
</td>
<td>
<input type="button" id="btnCar" value="选择车辆" onclick="showTransCar('TransCarManger.aspx?type=汽车');"
class="bttn" />
</td>
</tr>
//图二的<删除>按钮方法 function deltr(index) { $("tr[id='" + index + "']").remove(); }
//图二的<选择车辆>按钮方法 function showTransCar(url) { var w = screen.availWidth - 190; var h = screen.availHeight - 160; var t = (screen.availHeight - h) / 2; var le = (screen.availWidth - w) / 2; window.open(url, "view", "Top=" + t + "px,Left=" + le + "px,Width=" + w + "px, Height=" + h + "px,
toolbar=no,location=no,derectories=no,status=no,menubar=no,scrollbars=yes"); }