代码改变世界

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

2007-05-30 00:28  晓风残月  阅读(...)  评论(... 编辑 收藏

目的:

1. 通过在DataList模板列中嵌入DataList,显示主从关系。

2. 通过客户端JS,实现主从关系关联选择

3. 遍历DataList中的项,获取选择的数据

   1: <%@ Page Language="C#" %>
   2: <%@ Import Namespace="System.Data" %>
   3:  
   4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5:  
   6: <script runat="server">
   1:  
   2:  
   3:     void Page_Load(object sender, EventArgs e)
   4:     {
   5:         if (!IsPostBack) {  
   6:             // 首次加载数据一定要放在 !IsPostBack 内,
   7:             // 避免回发的时候再次绑定数据,覆盖复选框状态
   8:             LoadProductData();            
   9:         }
  10:     }
  11:  
  12:     void btnSubmit_Click(object sender, EventArgs e)
  13:     {
  14:         ArrayList selectedCategoryIdList = new ArrayList();
  15:         ArrayList selectedCategoryNameList = new ArrayList();
  16:         ArrayList selectedProductIdList = new ArrayList();
  17:         foreach (DataListItem item in dlstProCat.Items) {
  18:             CheckBox chkCat = item.FindControl("chkCat") as CheckBox;
  19:             if (chkCat != null && chkCat.Checked) {
  20:                 selectedCategoryIdList.Add((int)dlstProCat.DataKeys[item.ItemIndex]);
  21:                 Label lblCatName = item.FindControl("lblCatName") as Label;
  22:                 selectedCategoryNameList.Add(lblCatName.Text);
  23:             }
  24:             DataList dlstPro = item.FindControl("dlstPro") as DataList;
  25:             if (dlstPro != null) {
  26:                 // the same to dlstProCat
  27:             }
  28:         }
  29:         
  30:         // displays info
  31:         grdInfo.DataSource = selectedCategoryIdList;
  32:         grdInfo.DataBind();
  33:  
  34:         grdInfo2.DataSource = selectedCategoryNameList;
  35:         grdInfo2.DataBind();
  36:     }   
  37:  
  38:     /// <summary>
  39:     /// DataList 的每一项执行数据绑定之后调用事件处理程序,
  40:     /// 在程序内部实现绑定嵌套的 DataList
  41:     /// </summary>
  42:     /// <param name="sender"></param>
  43:     /// <param name="e"></param>
  44:     void dlstProCat_ItemDataBound(object sender, DataListItemEventArgs e)
  45:     {
  46:         // e.Item.DataItem 公开绑定到 DataList 当前项的数据,
  47:         // 这里为 包含 Category 数据的 DataRowView 对象, 因为我们提供的数据源为 DataTable
  48:         DataRowView drv = e.Item.DataItem as DataRowView;
  49:         if(drv == null) return;
  50:  
  51:         // 查找嵌套的 DataList
  52:         DataList dlstPro = e.Item.FindControl("dlstPro") as DataList;
  53:         if (dlstPro == null) return;
  54:  
  55:         // 我们已经将与Category相关Product全部加载到DataSet中,
  56:         // 并建立了 DataRelation,因此这里直接反向获取 Product DataTable,
  57:         // 并使用 DataView 过滤目标数据
  58:         DataRow dr = drv.Row;        
  59:         DataView dvPro = dr.Table.ChildRelations["ProCatShip"].ChildTable.DefaultView;
  60:         dvPro.RowFilter = "CategoryId = " + dr["CategoryID"].ToString();
  61:  
  62:         dlstPro.DataSource = dvPro;
  63:         dlstPro.DataBind();
  64:     }
  65:  
  66:     void LoadProductData()
  67:     {
  68:         DataSet ds = CreateProductCategoryDataSet();
  69:         dlstProCat.DataSource = ds.Tables["Categories"];
  70:         dlstProCat.DataBind();        
  71:     }  
  72:  
  73:     #region sample data
  74:     
  75:     static DataSet CreateProductCategoryDataSet()
  76:     {
  77:         DataSet ds = new DataSet("ProductCategorySet");
  78:         DataTable dtPro = CreateProductTable();
  79:         DataTable dtCat = CreateCategoryTable();
  80:         ds.Tables.Add(dtPro);
  81:         ds.Tables.Add(dtCat);
  82:         ds.Relations.Add("ProCatShip", dtCat.Columns["CategoryID"], dtPro.Columns["CategoryID"]);
  83:  
  84:         return ds;
  85:     }
  86:  
  87:     static DataTable CreateProductTable()
  88:     {
  89:         DataTable tbl = new DataTable("Products");
  90:  
  91:         tbl.Columns.Add("ProductID", typeof(int));
  92:         tbl.Columns.Add("ProductName", typeof(string));
  93:         tbl.Columns.Add("CategoryID", typeof(int));
  94:         DataRow row = tbl.NewRow();
  95:         row[0] = 1;
  96:         row[1] = "Chai";
  97:         row[2] = 1;
  98:         tbl.Rows.Add(row);
  99:  
 100:         row = tbl.NewRow();
 101:         row[0] = 2;
 102:         row[1] = "Chang";
 103:         row[2] = 1;
 104:         tbl.Rows.Add(row);
 105:  
 106:         row = tbl.NewRow();
 107:         row[0] = 3;
 108:         row[1] = "Aniseed Syrup";
 109:         row[2] = 2;
 110:         tbl.Rows.Add(row);
 111:  
 112:         row = tbl.NewRow();
 113:         row[0] = 4;
 114:         row[1] = "Chef Anton's Cajun Seasoning";
 115:         row[2] = 2;
 116:         tbl.Rows.Add(row);
 117:  
 118:         row = tbl.NewRow();
 119:         row[0] = 5;
 120:         row[1] = "Chef Anton's Gumbo Mix";
 121:         row[2] = 2;
 122:         tbl.Rows.Add(row);
 123:  
 124:         row = tbl.NewRow();
 125:         row[0] = 47;
 126:         row[1] = "Zaanse koeken";
 127:         row[2] = 3;
 128:         tbl.Rows.Add(row);
 129:  
 130:         row = tbl.NewRow();
 131:         row[0] = 48;
 132:         row[1] = "Chocolade";
 133:         row[2] = 3;
 134:         tbl.Rows.Add(row);
 135:  
 136:         row = tbl.NewRow();
 137:         row[0] = 49;
 138:         row[1] = "Maxilaku";
 139:         row[2] = 3;
 140:         tbl.Rows.Add(row);
 141:  
 142:         return tbl;
 143:     }
 144:  
 145:     public static DataTable CreateCategoryTable()
 146:     {
 147:         DataTable tbl = new DataTable("Categories");
 148:  
 149:         tbl.Columns.Add("CategoryID", typeof(int));
 150:         tbl.Columns.Add("CategoryName", typeof(string));
 151:         DataRow row = tbl.NewRow();
 152:         row[0] = 1;
 153:         row[1] = "Beverages";
 154:         tbl.Rows.Add(row);
 155:  
 156:         row = tbl.NewRow();
 157:         row[0] = 2;
 158:         row[1] = "Condiments";
 159:         tbl.Rows.Add(row);
 160:  
 161:         row = tbl.NewRow();
 162:         row[0] = 3;
 163:         row[1] = "Confections";
 164:         tbl.Rows.Add(row);
 165:  
 166:         return tbl;
 167:     }
 168:  
 169:     #endregion
 170:     
</script>
   1:  
   2:  
   3: <html xmlns="http://www.w3.org/1999/xhtml" >
   4: <head runat="server">
   5:     <title>Nested DataList</title>
   6:     <script type="text/javascript">
   7:     function chkCatPro_Clicked(sender, suredId1, suredId2)
   8:     {
   9:         //debugger;
  10:         var cnt = sender.parentElement.parentElement.parentElement.parentElement;
  11:         var nptArr = cnt.getElementsByTagName("input");
  12:         for(var i = 0; i < nptArr.length; i++) {
  13:             if(nptArr[i].type == 'checkbox' && 
  14:                 (nptArr[i].id.indexOf(suredId1) > -1 || nptArr[i].id.indexOf(suredId2) > -1)) {
  15:                 nptArr[i].checked = sender.checked;
  16:             }
  17:         }
  18:     }    
  19:     
  20:     // 有可能还包含其他用途的 checkbox,故提供
  21:     // 参数 suredId 确保关联的是正确的 checkbox,
  22:     function chkCat_Clicked(sender, suredId)
  23:     {   
  24:         var cnt = sender.parentElement.parentElement;
  25:         var nptArr = cnt.getElementsByTagName("input");
  26:         for(var i = 0; i < nptArr.length; i++) {
  27:             if(nptArr[i].type == 'checkbox' && nptArr[i].id.indexOf(suredId) > -1) {
  28:                 nptArr[i].checked = sender.checked;
  29:             }
  30:         }
  31:     }
  32:     
</script>
   7: </head>
   8: <body>
   9:     <form id="form1" runat="server">
  10:     <div>
  11:         <asp:DataList ID="dlstProCat" DataKeyField="CategoryID" runat="server" OnItemDataBound="dlstProCat_ItemDataBound" CellPadding="4" ForeColor="#333333">
  12:             <HeaderTemplate>
  13:                 <asp:CheckBox ID="chkCatPro" onclick="chkCatPro_Clicked(this, 'chkCat', 'chkPro')" ToolTip="Check All" runat="server" Text="Categories" />                    
  14:             </HeaderTemplate>
  15:             <ItemTemplate>                
  16:                 <asp:CheckBox ID="chkCat" onclick="chkCat_Clicked(this, 'chkPro')" ToolTip="Check All the Products Of this Category" runat="server" />                    
  17:                     <asp:Label ID="lblCatName" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label>
  18:                     <div style="padding-left:20px;">
  19:                     <asp:DataList ID="dlstPro" DataKeyField="ProductID" runat="server" CellPadding="4" ForeColor="#333333" >
  20:                         <HeaderTemplate>Products</HeaderTemplate>
  21:                         <ItemTemplate>
  22:                             <asp:CheckBox ID="chkPro" runat="server" />
  23:                             <asp:Label ID="lblProName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
  24:                         </ItemTemplate>
  25:                         <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
  26:                         <SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
  27:                         <AlternatingItemStyle BackColor="White" />
  28:                         <ItemStyle BackColor="#E3EAEB" />
  29:                         <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
  30:                     </asp:DataList>
  31:                     </div>
  32:             </ItemTemplate>
  33:             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  34:             <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
  35:             <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
  36:             <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
  37:             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  38:         </asp:DataList>         
  39:         <asp:Button ID="btnSubmit"  Text="获取选中信息" runat="server" OnClick="btnSubmit_Click" />
  40:        
  41:         <div style="float:left">
  42:         <asp:GridView ID="grdInfo" runat="server" AutoGenerateColumns="false">
  43:             <Columns>                
  44:                 <asp:TemplateField HeaderText="CategoryID"  >
  45:                     <ItemTemplate><%
   1: # Container.DataItem 
%></ItemTemplate>
  46:                 </asp:TemplateField>
  47:             </Columns>
  48:         </asp:GridView>
  49:         </div>
  50:         <div style="float:left">
  51:         <asp:GridView ID="grdInfo2" runat="server">            
  52:         </asp:GridView>
  53:         </div>
  54:     </div>
  55:     </form>
  56: </body>
  57: </html>

下载