Repeater嵌套Repeater及Repeater嵌套table，单击行查看详细信息，适用于DataLsit

最近做一个物流小模块，里面汇总了每个工厂的所有数据，在点击工厂显示下面所有数据。我通过Repeater嵌套Repeater来实现及Repeater嵌套table。同样也适用于DataLsit。

用了两种方法来实现。

1：直接点击父Repeater行在ItemDataBound里面页面加载时全部加载出来。

2：用jquery post请求数据，并用apped输出 详细信息

没点击效果图前：

点击查看详细信息图：

1：直接点击父Repeater行在ItemDataBound里面页面加载时全部加载出来。

html 代码：

<asp:Repeater ID="rpStockManager" runat="server">
				<ItemTemplate>
					<tr title="双击查看详细信息" style="background-color: <%#(Container.ItemIndex%2==0)?"#FFF8DC":"#E0FFFF"%>; cursor: pointer"
	οndblclick="ShowDetail('trShow_<%#Container.ItemIndex+1%>','<%#Eval("LocationID") %>_<%#Eval("Lotatt09")%>_<%#Eval("LotAtt04") %>');">
			//绑定父RP信息
	</td>
 </tr>
<tr style="display: none" id='trShow_<%#Container.ItemIndex+1%>'><td colspan="9" class="leftstyle"> 
//放Repeater </td>
 </tr></ItemTemplate></asp:Repeater>

JS代码：

function ShowDetail(id)
		{
			var obj_div = document.getElementById(id);
			var arg =new Array();
			arg=obj_div.id.replace(",<br/>", "").split('_');
			if (obj_div.style.display.toString() == 'none')
			{
				// FF里面设置为bolck都会合并在一个td里面。因此去掉block
				obj_div.style.display = "";

			}
			else {
				obj_div.style.display = "none";
			}
		}

C#代码：

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
			{
				Repeater rep = e.Item.FindControl("rpFluxStockDetail") as Repeater;
				DataRowView rowv = (DataRowView)e.Item.DataItem;
				List<FluxStock> stockDetails = (from a in db.INV_LOT_LOC_ID join b in db.BAS_SKU o
select new FluxStock{b.Name,后面就不写了}}).ToList<FluxStock>();
rep.DataSource = stockDetails;
rep.DataBind();
}

2：用jquery post请求数据，并用apped输出 详细信息

html 代码：

<asp:Repeater ID="rpStockManager" runat="server">
				<ItemTemplate>
					<tr title="双击查看详细信息" style="background-color: <%#(Container.ItemIndex%2==0)?"#FFF8DC":"#E0FFFF"%>; cursor: pointer"
	οndblclick="ShowDetail('trShow_<%#Container.ItemIndex+1%>','<%#Eval("LocationID") %>_<%#Eval("Lotatt09")%>_<%#Eval("LotAtt04") %>');">
			//绑定父RP信息
	</td>
 </tr>
<tr style="display: none" id='trShow_<%#Container.ItemIndex+1%>'><td colspan="9" class="leftstyle"> 
//放table</td>
 </tr></ItemTemplate></asp:Repeater>

JS代码：

<script src="js/jquery-1.9.1.js"></script>
//记录第一次点击的ID以便点击其他id关闭上次点击的
		var saveClick="";
		//双击查看详细库存信息
		function ShowDetail(id,value)
		{
			if(saveClick!="")
			{
				if(saveClick.id==id) //上次ID与本次ID相同则关闭
				{
					saveClick.style.display = 'none'; 
					saveClick="";
					return;
				}
				else //不相同的时候第二次单击也关闭详细信息
				{
					saveClick.style.display = 'none';
					saveClick="";
				}
			}
			var obj_div = document.getElementById(id);
//清空上次详细信息
 $(".tbDetails").empty();
			$.ajax
					({
						type: "POST",//Post请求数据
						contentType:"application/json",
						url: "WebForm4.aspx/EditGroup",
						data: "{LocationID:'"+value.split('_')[0]+"',LotAtt09:'"+value.split('_')[1]+"',LotAtt04:'"+value.split('_')[2]+"'}",
						dataType: "json",
						success: function (data)
						{	
							var detailsNo = 0;
							var strDeatils="";
							var listHtml=''; 
//返回List数据进行循环解析
							for(var i=0;i<data.d.length;i++)
							{
								detailsNo++;
								listHtml='';
								listHtml += " <input type='checkbox'"; 
								listHtml += " name=chkSon_"+data.d[i].LocationID; 
								listHtml += " id=chkSon_"+data.d[i].LotNum+"/>"; 
								strDeatils += "<tr  style='background-color:" + (detailsNo % 2 == 0 ? "#E7E7FF" : "#FFF") + ";cursor: pointer'>";
								strDeatils+="<td  class='leftstyle ' style='width:26px;' >"+listHtml+"</td>";
								strDeatils+="<td  >" + detailsNo + "</td>";
								strDeatils+="<td  >" + data.d[i].CustomerID + "</td>";
								strDeatils+="<td  >" + data.d[i].SKU + "</td>";
								strDeatils+="<td  >" + data.d[i].Descr_C + "</td>";
								strDeatils+="<td  >" + data.d[i].Descr_E + "</td>";
								strDeatils+="<td  >" + data.d[i].LotNum + "</td>";
								strDeatils+="<td  >" + data.d[i].LocationID + "</td>";
								strDeatils+="<td  >" + data.d[i].TraceID + "</td>";
								strDeatils+="<td  >" + data.d[i].LPN + "</td>";
								strDeatils+="<td  >件</td>";
								strDeatils+="<td  >" + data.d[i].Qty + "</td>";
								strDeatils+="<td  >" + data.d[i].QtyAllocated + "</td>";
								strDeatils+="<td  >" + data.d[i].QtyOnHold + "</td>";
								strDeatils+="<td >" + data.d[i].Qty + "</td>";
								strDeatils+="<td >" + data.d[i].Cubic + "</td>";
								strDeatils+="<td >" + data.d[i].GrossWeight + "</td>";
								strDeatils+="<td >" + data.d[i].NetWeight + "</td>";
								strDeatils+="<td >" + data.d[i].Price + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt06 + "</td>";
								strDeatils+="<td >" + data.d[i].Alternate_SKU3 + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt03 + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt04 + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt05 + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt09 + "</td>";
								strDeatils+="<td style='text-align:left' >" + data.d[i].LotAtt10 + "</td>";
								strDeatils+="<td >" + data.d[i].LotAtt11 + "</td>";
								strDeatils += "</tr>";	
							}
							$(".tbDetails").append(strDeatils);
							$("#"+id).show();
							//记录上次点击的id以便隐藏
							saveClick=obj_div; 
						}
					});
			
		}

C#代码：

[WebMethod]
		public static List<FluxStock> EditGroup(string LocationID, string LotAtt09, string LotAtt04)
		{
			List<FluxStock> stockDetails = new List<FluxStock>();

			var pinfan = LotAtt04.Replace("<br/>", "")
										.Split(',').Where(p => !string.IsNullOrEmpty(p)).ToList();
			if (pinfan.Count >= 2)
			{
				for (int i = 0; i < pinfan.Count; i++)
				{
					stockDetails.AddRange(StockDetails(LocationID, LotAtt09, pinfan[i].ToString()));
				}
			}
			else
			{
				stockDetails.AddRange(StockDetails(LocationID, LotAtt09,LotAtt04.Replace(",<br/>", "")));
			}
			return stockDetails;
		}
public static List<FluxStock> StockDetails(string locationID, string LotAtt09, string LotAtt04)
        {
        
                List<FluxStock> stockDetails = (from a in db.INV_LOT_LOC_ID join b in db.BAS_SKU o where //条件
select new FluxStock{b.Name,后面就不写了
}
return stockDetails;
}