最近做一个物流小模块,里面汇总了每个工厂的所有数据,在点击工厂显示下面所有数据。我通过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信息
<tr style="display: none" id='trShow_<%#Container.ItemIndex+1%>'><td colspan="9" class="leftstyle"></td> </tr>
//放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信息
<tr style="display: none" id='trShow_<%#Container.ItemIndex+1%>'><td colspan="9" class="leftstyle"></td> </tr>
//放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;
}