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"ondblclick="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里面。因此去掉blockobj_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 oselect 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"ondblclick="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;}