最近做一个项目,要在GridView中点开表单后展开明细信息,原来用过一些方法是用hidden然后用jq/js显示和缩放,我觉得页面太多js代码了而且我也不熟悉,所以用一个传统一点的方法,gridview嵌套,然后js只控制显示与否即可。
缺点是每页的父节点Gridview不能有太多明细行,不然的话嵌套出来太多信息页面加载估计会出问题。
重点是在于
- 子GridView实际上可以等同为新建了一个
<tr></tr>
,在里面显示; - 而这个Gridviw要用DIV包起来,不然会撑爆整个父Girdview的单元格。
最终测试过在IE8非兼容模式可用,IE8往上的版本可用,Chrome目前也看到没什么问题。
借鉴的帖子如下:
JS代码,用于显示 隐藏嵌套的GRIDVIEW:
JS部分代码
/*隐藏嵌套的Gridview*/
function ShowHidden(sid, ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var oDiv = document.getElementById("div" + sid);
oDiv.style.display = oDiv.style.display == "none" ? "block" : "none";
target.innerHTML = oDiv.style.display == "none" ? "展开列表" : "隐藏列表";
}
ASPX前端代码
Gridview嵌套
<asp:GridView ID="gvItem" Width="600px" OnRowDataBound="gvItem_RowCommand" DataKeyNames="ID"
runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ID" HeaderStyle-Width="15%" HeaderText="ID">
<HeaderStyle Width="15%" />
</asp:BoundField>
<asp:BoundField DataField="姓名" HeaderStyle-Width="30%" HeaderText="姓名">
<HeaderStyle Width="30%" />
</asp:BoundField>
<asp:TemplateField HeaderStyle-Width="40%">
<ItemTemplate>
<!---点击用于列表展开,执行JS函数--->
<span id="btnShowHidden<%#Eval("ID") %>" style="float: right; color: Red; cursor: pointer;
margin: 0 0 0 0" onclick="ShowHidden('<%#Eval("ID") %>',event)">展开列表</span>
<tr>
<td colspan="100%">
<div id="div<%#Eval("ID") %>" style="display: none;">
<div style="float: left; font-size: small">
└</div>
<div style="border: 1 solid RGB(40,80,150); position: relative; left: 0px; overflow: auto;
width: 98%;">
<!---绑定内层Gridview--->
<asp:GridView ID="gvInnerItem" Width="100%" Height="100%" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" HeaderStyle-Width="15%" HeaderText="ID">
<HeaderStyle Width="15%" />
</asp:BoundField>
<asp:BoundField DataField="姓名" HeaderStyle-Width="70%" HeaderText="姓名">
<HeaderStyle Width="70%" />
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
后台代码:
后台代码
protected void Page_Load(object sender, EventArgs e)
{
BindData();
}
//绑定外层Gridview列表
public void BindData()
{
gvItem.DataSource = CommonClass.GetData("外层表格");
gvItem.DataBind();
}
//绑定嵌套的Gridview列表
protected void gvItem_RowCommand(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView oGridView = (GridView)e.Row.FindControl("gvInnerItem");
if (oGridView != null)
{
int id = Convert.ToInt32(gvItem.DataKeys[e.Row.RowIndex].Value);
oGridView.DataSource = CommonClass.GetData("内层表格ID=" + id);
oGridView.DataBind();
}
}
}