以下是ASPX页面,上面放了三个datasource,基本不用看,看javascript部分好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
<!--
//由于IE和FireFox/NetScape实现DOM的方式稍有不同,如果要在firefox中能顺利运行,此方法应稍做修改
function rechange(obj,targ){
//传入两个参数,第一个参数是一个select,第二个是dg2的客户端ID
var tmp;
var i=0;
var arr=new Array();
//由select上溯直到tbody为止
var tab=obj.parentNode;
while(tab.tagName!="TBODY"){
tab=tab.parentNode;
}
//得到所有的产品统计列表存入arr中
for( i=1;i<tab.childNodes.length;i++){
//这是下拉选择框
var selectTag=tab.childNodes[i].childNodes[0].childNodes[0];
//这是行的第二列
var litTag=tab.childNodes[i].childNodes[1];
//下拉选择项的选择值即为产品ID
var productID=selectTag.value;
//数量是存放在行的第二列中
var quantity=parseInt(litTag.innerText);
//如果数组没有初始化,初始化序列为产品ID的数组
if(arr[productID]==null){
arr[productID]=new Array();
arr[productID][0]=0;
}
//加入到关于产品ID的数量统计中
arr[productID][0]+=quantity;
}
//得到下一个dg2的tbody主体
var targ=document.getElementById(targ).childNodes[0];
//然后遍历所有的行,从1开始是因为有标头
for(i=1;i<targ.childNodes.length;i++){
//得到产品ID
var productID=targ.childNodes[i].childNodes[0].innerHTML;
//var productName=targ.childNodes[i].childNodes[1].innerHTML;
//var quantity=targ.childNodes[i].childNodes[2].innerHTML;
//如果arr数组中有关于此产品的统计,则重写
if(arr[productID]!=null){
targ.childNodes[i].childNodes[2].innerHTML=arr[productID][0];
}
//反之置0
else{
targ.childNodes[i].childNodes[2].innerHTML=0;
}
}
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [ProductID] FROM [Alphabetical list of products] where [ProductID]<20">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [Quantity] FROM [Order Details] where [ProductID]<20"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT a.[ProductID],b.[ProductName],sum(a.[Quantity]) as [totalQuantity] FROM [Order Details] a inner join [Alphabetical list of products] b on a.[ProductID]=b.[ProductID] where a.[ProductID]<20 group by a.[productid],b.[ProductName]">
</asp:SqlDataSource>
<asp:DataGrid runat="server" ID="dg1" AutoGenerateColumns="False" DataSourceID="SqlDataSource2" OnItemDataBound="dg1_ItemDataBound">
<Columns>
<asp:TemplateColumn HeaderText="ProductID">
<ItemTemplate>
<asp:DropDownList runat="server" ID="DDL1" DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Quantity" FooterText="Quantity" HeaderText="Quantity"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
<asp:DataGrid runat="server" ID="DG2" DataSourceID="SqlDataSource3"></asp:DataGrid>
</form>
</body>
</html>
cs部分:给dropdownlist一个客户端事件,传入的两个参数,在上面的javascript部分有说明
protected void dg1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
DataRowView drv = (DataRowView)e.Item.DataItem;
DropDownList DDL1 =(DropDownList ) e.Item.FindControl("DDL1");
for (int i = 0; i < DDL1.Items.Count;i++ ) {
if (drv["ProductID"].ToString() == DDL1.Items[i].Value) {
DDL1.SelectedIndex = i;
break;
}
}
DDL1.Attributes.Add("onchange","javascript:rechange(this,'"+this.DG2.ClientID+"');");
}
}
