1.新建一个Default.aspx文件
2.在head引用jquery
Code
<head runat="server">
<title></title>
<script src="Script/jquery-1.2.6.js type="text/javascript"></script>
3.从工具栏里拖拽一个SqlDataSource控件，连接Northwind数据库，从Customers 表中查询出 CustomerId, CompanyName, ContactName, Address and City 几个字段。
4.拖拽一个GridView控件到Default.aspx，属性和列设置为一下样子。
Code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
</asp:GridView>
5.创建一个CustomerDetails.aspx文件，添加一下代码
Code
protected void Page_Load(object sender, EventArgs e)
{
string cid = Request.QueryString["CID"];
string cname = Request.QueryString["CName"];
Response.Write("CustomerID= " + cid + " : " + "CompanyName= " + cname);
}
6.回到Default.apsx中，添加Javascript代码，来见证一下jquery的神奇。
在head中添加如下代码：
Code
<script type="text/javascript">
$(document).ready(function() {
$("tr").click(function(event) {
var row = jQuery(this)
var firstParam = row.children("td:eq(0)").text();
var secondParam = row.children("td:eq(1)").text();
var navUrl = "http://localhost:7250/GridViewRowJQuery/CustomerDetails.aspx?cid=" + firstParam + "&cname=" + secondParam;
top.location = navUrl;
});
});
</script>
源码下载
浙公网安备 33010602011771号