删除 DetailsView 控件中的 [选定] 边框
Posted
技术标签:
【中文标题】删除 DetailsView 控件中的 [选定] 边框【英文标题】:Removing [selected] borders in a DetailsView control 【发布时间】:2010-10-02 00:19:02 【问题描述】:我有一个DetailsView control,其中包括构成地址的几行。理想情况下,我想将地址行与以下两行“合并” - 实质上是删除它们之间的边界。
我猜我可以使用 asp:TemplateField 创建一个近似的解决方案(使用单行,但我们在 seconf(数据)单元格中换行),但我宁愿看看是否还有其他意味着与我之前的样式相同(使用 CssClass)。此外,这与其他任何事情一样都是一种学习练习。
我尝试给 Address2 BoundField 一个类并通过 CSS 删除底部和顶部边框,但它似乎不起作用。查看 html,它将类分配给单个单元格,而我认为我需要将此类应用于整行。我无法解决整行问题;我可以处理所有行,无论是列还是一个单元格。
有什么建议吗?
代码片段:
HTML:
<h2 class="title">Event Details</h2>
<div class="entry">
<form id="frmEvents" runat="server">
<asp:DetailsView ID="vwEventDetails" runat="server" CssClass="vwEventDetails" FieldHeaderStyle-CssClass="FieldCol" >
<Fields>
<asp:BoundField HeaderText="Event" DataField="EventName" ReadOnly="true" SortExpression="EventName" />
<asp:BoundField HeaderText="Date & Time" DataField="EventDate" ReadOnly="true" SortExpression="EventDate" />
<asp:BoundField HeaderText="Address" DataField="Address1" ReadOnly="true" SortExpression="Address1" />
<asp:BoundField HeaderText="" DataField="Address2" ReadOnly="true" SortExpression="Address2" ItemStyle-CssClass="noBorders" />
<asp:BoundField HeaderText="" DataField="Address3" ReadOnly="true" SortExpression="Address3" />
<asp:BoundField HeaderText="Town" DataField="Town" ReadOnly="true" SortExpression="Town" />
<asp:BoundField HeaderText="County" DataField="County" ReadOnly="true" SortExpression="County" />
<asp:BoundField HeaderText="Postcode" DataField="Postcode" ReadOnly="true" SortExpression="Postcode" />
<asp:BoundField HeaderText="Entry Fee" DataField="EventFee" ReadOnly="true" SortExpression="EntryFee" />
<asp:BoundField HeaderText="Sponsor" DataField="SponsorName" ReadOnly="true" SortExpression="Sponsor" />
<asp:BoundField HeaderText="Category" DataField="CategoryName" ReadOnly="true" SortExpression="Category" />
<asp:HyperLinkField HeaderText="" DataTextField="" Text="Make A Booking" DataNavigateUrlFields="EventID" DataNavigateUrlFormatString="bookevent.aspx?eventid=0" />
</Fields>
</asp:DetailsView>
</form>
</div>
CSS:
.vwEventDetails .FieldCol
font-weight: bold;
background-color: #99CCFF;
width: 100px;
.vwEventDetails tr td
padding: 0 2em;
.noBorders
border-bottom-style:none;
border-top-style:none;
【问题讨论】:
【参考方案1】:我会使用两种样式:
.noTopBorders border-top: none;
.noBottomBorders border-bottom: none;
我会将noTopBorders
分配给“Address2”和“Address3”BoundFields 的HeaderStyle-CssClass
和ItemStyle-CssClass
属性。
我会将noBottomBorders
分配给“Address1”和“Address2”绑定字段的HeaderStyle-CssClass
和ItemStyle-CssClass
属性。
【讨论】:
肯,谢谢,但这也没有用。我可以使用您的建议类进行各种更改,但不能删除边框。还有其他想法吗? 我需要查看您的页面以确定它为什么不适合您。您的链接目前已损坏。 嗯...它现在启动了 - 不确定它何时或为什么会停止。 页面在 ie7 和 chrome 中正确显示,但在 FF 中不正确。我将首先删除表格上的边框折叠样式,从表格中删除边框属性并使用 css 将边框应用于该表格的 td 属性。以上是关于删除 DetailsView 控件中的 [选定] 边框的主要内容,如果未能解决你的问题,请参考以下文章
如何取消选择 DataGridView 控件中的所有选定行?
如何从 webBrowser 控件中的当前选定选项中获取 innerText