老瓶装新酒，结合jquery来实现asp.net repeater的主从表样式(类似masterdetail控件)

  好久再接触这种写法已经是在东财，这边这个数据管理中心的写法的确让我耳目一新，其实如果不是太花哨的h5的动态呈现，很多asp.net也能实现异步defered甚至是一些页面的定制。这边不多说废话，先上图：

这边的按照风险类型来分组，其实这个就是一个大的repeater里面套一个详细的repeater。首先上html代码：

   <div style="text-align: left; font-size: 14px; line-height: 30px;">
        添加风险类型：
        <select id="IsRiskType" style="width: 40px;">
            <option value="10">积极型</option>
            <option value="20">稳健型</option>
            <option value="30">保守型</option>
        </select>
       
       要添加的基金代码：<input id="txtFcode" data-name='txtFundCode' data-id='txtFilterFundCode' class="text w90" type="text" />
        <input id="btnThemeIndexAdd" type="button" class="btn" value="添加" />
    </div>

     <div style="text-align: left; font-size: 14px; line-height: 30px;">
        收益率阶段类型：<select id="IsPeriodtype" style="width: 40px;">
            <option value="01">日</option>
            <option value="02">近一周</option>
            <option value="03">近一月</option>
             <option value="04">近一季度</option>
               <option value="05">近半年</option>
             <option value="06">近一年</option>
             <option value="07">近2年</option>
             <option value="08">近3年</option>
             <option value="09">近5年</option>
             <option value="10">今年以来</option>
             <option value="11">成立以来</option>
        </select>
        
        <input id="Button1" type="button" class="btn" value="编辑" />
    </div>

    <table id="tbFundRecommend" data-name="tbFundRecommend" style="width: 100%; font-size: 14px; line-height: 30px;">
        <tr>
         
        <th style="width: 100px;">风险类型</th>
          
            <th>指数</th>
        </tr>
        <span style="color:#ff0000;"><asp:Repeater ID="rpRank" runat="server" OnItemDataBound="rpRank_ItemDataBound"></span>

            <ItemTemplate>
                <tr data-name="trFundRec">
               
                 
                       <td data-name="tdRiskType"><%#Eval("RiskType") %></td>

                  
                  
                    <td>
                        <table data-name="tbFundJbxx" style="width: 100%; font-size: 13px;">
                            <tr>
                                <th style="width: 80px;">代码</th>
                                <th style="width: 300px;">名称</th>
                                <th style="width: 200px;">操作</th>
                            </tr>
                          <span style="color:#ff0000;">  <asp:Repeater ID="rpFund" runat="server"></span>
                                <ItemTemplate>
                                    <tr data-name="trContent">
                                        <td data-name="tdFundCode"><%#Eval("FCODE") %></td>
                                        <td><%#Eval("SHORTNAME") %></td>

                                        <td>
                                            <input id="btnDel" data-name="btnIndexDel" type="button" class="btn_inline" value="删除" />
                                        </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>
                        </table>
                        <div style="font-size: 13px; text-align: left;">要添加的指数代码：<input id='txtFundCode' data-name='txtFundCode' data-id='txtFilterFundCode' class="text w90" type="text" /><input id="btnFundJbxxAdd" data-name="btnFundJbxxAdd" type="button" class="btn" value="添加" /></div>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>


    <div id="divFundInfoLst" style="position: absolute; width: 325px; height: 300px; background-color: #FFF; overflow: scroll; display: none;">
        <table id="tbFundInfoLst">
            <tr>
                <th style="width: 80px;">代码</th>
            
                <th style="width: 200px;">简称</th>
            </tr>
        </table>
    </div>

  这边红色的两段是关键，让其中的数据倾倒进来前要对风险类型去重，然后在rpRank_ItemDataBound 里面做绑定子表，让这个效果像主从表：

   private void GetData()
        {

            QueryRecord(PageName, 0, "GetFundShortName", "基金组合", "1", Result.IsSuccess);

            if (Result != null)
            {
                if (Result.IsSuccess)
                {
                    if (Result.Result != null && Result.Result.Count > 0)
                    {
                        SetMessage("共查询到数据" + Result.Result.Count + "条", 0);
                       <span style="color:#ff0000;"> rpRank.DataSource = Result.Result.Distinct(new FundCombine_RISKTYPE());</span>
                        //rpRank.DataSource = Result.Result;
                        rpRank.DataBind();
                    }
                    else
                        SetMessage("无相关信息！", 0);
                }
                else
                    SetMessage("查询失败！" + Result.Message);
            }
            else
                SetMessage("查询条件无效！");
        }

  

这边需要注意用这个FundCombine_RISKTYPE来去除重复的风险类型：

    //基金组合 list根据RISKTYPE去重复；
    public class FundCombine_RISKTYPE : IEqualityComparer<Fund_PortfolioEntity>
    {
        public bool Equals(Fund_PortfolioEntity comp1, Fund_PortfolioEntity comp2)
        {
            if (comp1.RISKTYPE == comp2.RISKTYPE)
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        public int GetHashCode(Fund_PortfolioEntity obj)
        {
            return 0;
        }
    }

  同时rpRank_ItemDataBound 去对子表结构绑定：

  protected void rpRank_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Repeater rpColumnNews = (Repeater)e.Item.FindControl("rpFund");
                //找到分类Repeater关联的数据项 
                //DataRowView rowv = (DataRowView)e.Item.DataItem;
                Fund_PortfolioEntity fr = (Fund_PortfolioEntity)(e.Item.DataItem);
                //提取分类ID 
                string RISKTYPE = fr.RISKTYPE;
                //里面的Repeater
                List<Fund_PortfolioEntity> ret = Result.Result.Where(T => T.RISKTYPE == RISKTYPE).ToList();
                if (ret != null)
                {
                    rpColumnNews.DataSource = ret.OrderBy(o => o.FCODE);
                    rpColumnNews.DataBind();
                }
            }
        }

  写的很有技巧，很值得学习借鉴。