好久再接触这种写法已经是在东财,这边这个数据管理中心的写法的确让我耳目一新,其实如果不是太花哨的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;
}
}
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();
}
}
}
写的很有技巧,很值得学习借鉴。