ASP.NET DEMO Ⅱ: 使用嵌套DataList显示主从关系

最新推荐文章于 2015-12-29 10:57:28 发布
weixin_34220179
最新推荐文章于 2015-12-29 10:57:28 发布
阅读量150
点赞数
文章标签： xhtml c# javascript ViewUI
目的：
1. 通过在DataList模板列中嵌入DataList，显示主从关系。
2. 通过客户端JS，实现主从关系关联选择
3. 遍历DataList中的项，获取选择的数据
 
<%@ Page Language="C#" %> 
<%@ Import Namespace="System.Data" %> 
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
<script runat="server">
 
  
  
    void Page_Load(object sender, EventArgs e) 
    { 
        if (!IsPostBack) {   
            // 首次加载数据一定要放在 !IsPostBack 内， 
            // 避免回发的时候再次绑定数据，覆盖复选框状态 
            LoadProductData();             
        } 
    } 
  
    void btnSubmit_Click(object sender, EventArgs e) 
    { 
        ArrayList selectedCategoryIdList = new ArrayList(); 
        ArrayList selectedCategoryNameList = new ArrayList(); 
        ArrayList selectedProductIdList = new ArrayList(); 
        foreach (DataListItem item in dlstProCat.Items) { 
            CheckBox chkCat = item.FindControl("chkCat") as CheckBox; 
            if (chkCat != null && chkCat.Checked) { 
                selectedCategoryIdList.Add((int)dlstProCat.DataKeys[item.ItemIndex]); 
                Label lblCatName = item.FindControl("lblCatName") as Label; 
                selectedCategoryNameList.Add(lblCatName.Text); 
            } 
            DataList dlstPro = item.FindControl("dlstPro") as DataList; 
            if (dlstPro != null) { 
                // the same to dlstProCat 
            } 
        } 
         
        // displays info 
        grdInfo.DataSource = selectedCategoryIdList; 
        grdInfo.DataBind(); 
  
        grdInfo2.DataSource = selectedCategoryNameList; 
        grdInfo2.DataBind(); 
    }    
  
    /// <summary> 
    /// DataList 的每一项执行数据绑定之后调用事件处理程序， 
    /// 在程序内部实现绑定嵌套的 DataList 
    /// </summary> 
    /// <param name="sender"></param> 
    /// <param name="e"></param> 
    void dlstProCat_ItemDataBound(object sender, DataListItemEventArgs e) 
    { 
        // e.Item.DataItem 公开绑定到 DataList 当前项的数据， 
        // 这里为 包含 Category 数据的 DataRowView 对象， 因为我们提供的数据源为 DataTable 
        DataRowView drv = e.Item.DataItem as DataRowView; 
        if(drv == null) return; 
  
        // 查找嵌套的 DataList 
        DataList dlstPro = e.Item.FindControl("dlstPro") as DataList; 
        if (dlstPro == null) return; 
  
        // 我们已经将与Category相关Product全部加载到DataSet中， 
        // 并建立了 DataRelation，因此这里直接反向获取 Product DataTable， 
        // 并使用 DataView 过滤目标数据 
        DataRow dr = drv.Row;         
        DataView dvPro = dr.Table.ChildRelations["ProCatShip"].ChildTable.DefaultView; 
        dvPro.RowFilter = "CategoryId = " + dr["CategoryID"].ToString(); 
  
        dlstPro.DataSource = dvPro; 
        dlstPro.DataBind(); 
    } 
  
    void LoadProductData() 
    { 
        DataSet ds = CreateProductCategoryDataSet(); 
        dlstProCat.DataSource = ds.Tables["Categories"]; 
        dlstProCat.DataBind();         
    }   
  
    #region sample data 
     
    static DataSet CreateProductCategoryDataSet() 
    { 
        DataSet ds = new DataSet("ProductCategorySet"); 
        DataTable dtPro = CreateProductTable(); 
        DataTable dtCat = CreateCategoryTable(); 
        ds.Tables.Add(dtPro); 
        ds.Tables.Add(dtCat); 
        ds.Relations.Add("ProCatShip", dtCat.Columns["CategoryID"], dtPro.Columns["CategoryID"]); 
  
        return ds; 
    } 
  
    static DataTable CreateProductTable() 
    { 
        DataTable tbl = new DataTable("Products"); 
  
        tbl.Columns.Add("ProductID", typeof(int)); 
        tbl.Columns.Add("ProductName", typeof(string)); 
        tbl.Columns.Add("CategoryID", typeof(int)); 
        DataRow row = tbl.NewRow(); 
        row[0] = 1; 
        row[1] = "Chai"; 
        row[2] = 1; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 2; 
        row[1] = "Chang"; 
        row[2] = 1; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 3; 
        row[1] = "Aniseed Syrup"; 
        row[2] = 2; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 4; 
        row[1] = "Chef Anton's Cajun Seasoning"; 
        row[2] = 2; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 5; 
        row[1] = "Chef Anton's Gumbo Mix"; 
        row[2] = 2; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 47; 
        row[1] = "Zaanse koeken"; 
        row[2] = 3; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 48; 
        row[1] = "Chocolade"; 
        row[2] = 3; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 49; 
        row[1] = "Maxilaku"; 
        row[2] = 3; 
        tbl.Rows.Add(row); 
  
        return tbl; 
    } 
  
    public static DataTable CreateCategoryTable() 
    { 
        DataTable tbl = new DataTable("Categories"); 
  
        tbl.Columns.Add("CategoryID", typeof(int)); 
        tbl.Columns.Add("CategoryName", typeof(string)); 
        DataRow row = tbl.NewRow(); 
        row[0] = 1; 
        row[1] = "Beverages"; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 2; 
        row[1] = "Condiments"; 
        tbl.Rows.Add(row); 
  
        row = tbl.NewRow(); 
        row[0] = 3; 
        row[1] = "Confections"; 
        tbl.Rows.Add(row); 
  
        return tbl; 
    } 
  
    #endregion 
     
   </ 
   script 
   > 
  
  
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Nested DataList</title> 
    <script type="text/javascript"> 
    function chkCatPro_Clicked(sender, suredId1, suredId2) 
    { 
        //debugger; 
        var cnt = sender.parentElement.parentElement.parentElement.parentElement; 
        var nptArr = cnt.getElementsByTagName("input"); 
        for(var i = 0; i < nptArr.length; i++) { 
            if(nptArr[i].type == 'checkbox' &&  
                (nptArr[i].id.indexOf(suredId1) > -1 || nptArr[i].id.indexOf(suredId2) > -1)) { 
                nptArr[i].checked = sender.checked; 
            } 
        } 
    }     
     
    // 有可能还包含其他用途的 checkbox，故提供 
    // 参数 suredId 确保关联的是正确的 checkbox， 
    function chkCat_Clicked(sender, suredId) 
    {    
        var cnt = sender.parentElement.parentElement; 
        var nptArr = cnt.getElementsByTagName("input"); 
        for(var i = 0; i < nptArr.length; i++) { 
            if(nptArr[i].type == 'checkbox' && nptArr[i].id.indexOf(suredId) > -1) { 
                nptArr[i].checked = sender.checked; 
            } 
        } 
    } 
     
   </ 
   script 
   > 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <asp:DataList ID="dlstProCat" DataKeyField="CategoryID" runat="server" OnItemDataBound="dlstProCat_ItemDataBound" CellPadding="4" ForeColor="#333333"> 
            <HeaderTemplate> 
                <asp:CheckBox ID="chkCatPro" onclick="chkCatPro_Clicked(this, 'chkCat', 'chkPro')" ToolTip="Check All" runat="server" Text="Categories" />                     
            </HeaderTemplate> 
            <ItemTemplate>                 
                <asp:CheckBox ID="chkCat" onclick="chkCat_Clicked(this, 'chkPro')" ToolTip="Check All the Products Of this Category" runat="server" />                     
                    <asp:Label ID="lblCatName" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label> 
                    <div style="padding-left:20px;"> 
                    <asp:DataList ID="dlstPro" DataKeyField="ProductID" runat="server" CellPadding="4" ForeColor="#333333" > 
                        <HeaderTemplate>Products</HeaderTemplate> 
                        <ItemTemplate> 
                            <asp:CheckBox ID="chkPro" runat="server" /> 
                            <asp:Label ID="lblProName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label> 
                        </ItemTemplate> 
                        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> 
                        <SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> 
                        <AlternatingItemStyle BackColor="White" /> 
                        <ItemStyle BackColor="#E3EAEB" /> 
                        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> 
                    </asp:DataList> 
                    </div> 
            </ItemTemplate> 
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
            <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
            <AlternatingItemStyle BackColor="White" ForeColor="#284775" /> 
            <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
        </asp:DataList>          
        <asp:Button ID="btnSubmit"  Text="获取选中信息" runat="server" OnClick="btnSubmit_Click" /> 
        
        <div style="float:left"> 
        <asp:GridView ID="grdInfo" runat="server" AutoGenerateColumns="false"> 
            <Columns>                 
                <asp:TemplateField HeaderText="CategoryID"  > 
                    <ItemTemplate><%
 
# Container.DataItem  
   %> 
   </ 
   ItemTemplate 
   > 
                </asp:TemplateField> 
            </Columns> 
        </asp:GridView> 
        </div> 
        <div style="float:left"> 
        <asp:GridView ID="grdInfo2" runat="server">             
        </asp:GridView> 
        </div> 
    </div> 
    </form> 
</body> 
</html> 
  