NestedDataGrid

本文介绍如何在ASP.NET中使用DataGrid组件实现嵌套展示数据的效果,并通过JavaScript实现加减号的合并与展开功能。此外,还详细展示了如何为外部DataGrid的ItemCreated事件注册内部DataGrid的相关事件。
ContractedBlock.gifExpandedBlockStart.gif.aspx
 1None.gif<asp:datagrid id="grdCerSeted" Width="100%" Runat="server" CssClass="DataGrid" AutoGenerateColumns="False"
 2None.gif                            ShowHeader="False">
 3None.gif                            <Columns>
 4None.gif<asp:TemplateColumn>
 5None.gif                                    <HeaderStyle Width="0px"></HeaderStyle>
 6None.gif                                    <ItemTemplate>
 7None.gif                    </td>
 8None.gif                </tr>
 9None.gif                <tr>
10None.gif                    <td colspan="5">
11None.gif                        <TABLE cellSpacing="3" cellPadding="3" width="100%" border="0">
12None.gif                            <TR>
13None.gif                                <TD>
14None.gif                                    <DIV id="divCertSetted" style="DISPLAY: inline" runat="server"><asp:datagrid id="drgSetedIntel" runat="server" Width="100%" AutoGenerateColumns="False">
15None.gif                                            <Columns>
16None.gif</Columns>
17None.gif                                        </asp:datagrid></DIV>
18None.gif                                </TD>
19None.gif                            </TR>
20None.gif                        </TABLE>
21None.gif                        </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid>
ContractedBlock.gifExpandedBlockStart.gif实现加减号合并展开效果
 1None.giffunction Toggle( commId, imageId )
 2ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 3InBlock.gif                
 4InBlock.gif                var div = document.getElementById(commId);
 5InBlock.gif                var GetImg = document.getElementById(imageId);
 6InBlock.gif                if (document.all[commId].style.display == 'none')
 7ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{    
 8InBlock.gif                    document.all[commId].style.display = 'block';
 9InBlock.gif                    document.all[imageId].src = '../Images/expand.gif';
10ExpandedSubBlockEnd.gif                }

11InBlock.gif                else
12ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{    
13InBlock.gif                    document.all[commId].style.display = 'none';
14InBlock.gif                    document.all[imageId].src = '../Images/collapse.gif';
15ExpandedSubBlockEnd.gif                }

16ExpandedBlockEnd.gif            }
    
ContractedBlock.gifExpandedBlockStart.gif外面DataGrid的ItemCreated注册里面DataGrid事件
 1None.gifprivate void grdCerSeted_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
 2ExpandedBlockStart.gifContractedBlock.gif        dot.gif{
 3InBlock.gif            ListItemType item = e.Item.ItemType;
 4InBlock.gif            if(item == ListItemType.Item || item == ListItemType.AlternatingItem)
 5ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
 6InBlock.gif                //为包里面的DataGrid注册事件,只能手工注册,要不事件不会响应。
 7InBlock.gif                drgSetedIntel = (DataGrid)e.Item.FindControl("drgSetedIntel");
 8InBlock.gif                if(drgSetedIntel != null)
 9ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
10InBlock.gif                    drgSetedIntel.ItemDataBound +=new DataGridItemEventHandler(drgSetedIntel_ItemDataBound);    
11InBlock.gif                    drgSetedIntel.ItemCommand +=new DataGridCommandEventHandler(drgSetedIntel_ItemCommand);
12InBlock.gif                    drgSetedIntel.ItemCreated +=new DataGridItemEventHandler(drgSetedIntel_ItemCreated);
13ExpandedSubBlockEnd.gif                }

14ExpandedSubBlockEnd.gif            }

15ExpandedBlockEnd.gif        }

其它用法和正常DataGrid一样了。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值