ASP.NET DataGrid头滑块控件

分享于 

3分钟阅读

Web开发

  繁體

Sample Image - GridSlideHeader.jpg

介绍

有时,当表显示大量数据时,让用户回滚来看看哪个标头对应哪个列是很困难的。 我开发了一个简单的add-on 控件,它可以与现有的table 类型控件( 如 DataGridDataList ) 一起工作。 GridSlideHeader 是一个 ASP.NET 自定义控件,实现在页面外滚动标题时将的头设置为的JavaScript ( 和 CSS )。

要进行现场演示,请查看这里链接

使用服务器控件

GridSlideHeader 服务器控件是一个非常简单的add-on 控件,可以添加到现有的DataGrid s 和 DataList

仅调用 GridSlideHeader 控件并设置与 DataGrid/DataList ID对应的DataGridID 属性。 就是这样!

例如:

<formid="Form1"method="post"runat="server"><asp:datagridid="DataGridReport1"runat="server"AutoGenerateColumns="False"BorderColor="#000066"><EditItemStyleForeColor="Black"BackColor="Yellow"></EditItemStyle><AlternatingItemStyleFont-Size="X-Small"BackColor="Gainsboro"></AlternatingItemStyle><ItemStyleFont-Size="X-Small"Font-Names="Verdana"></ItemStyle><HeaderStyleFont-Bold="True"BackColor="#D7D7D7"></HeaderStyle><Columns><asp:BoundColumnDataField="Title_ID"HeaderText="Title_ID"SortExpression="Title_ID"/><asp:BoundColumnDataField="Title"HeaderText="Title"SortExpression="Title"/><asp:BoundColumnDataField="Price"HeaderText="Price"SortExpression="Price"/><asp:BoundColumnDataField="Publication"HeaderText="Publication"SortExpression="Publication"/><asp:BoundColumnDataField="Type"HeaderText="Type"SortExpression="Type"/><asp:BoundColumnDataField="Authors"HeaderText="Authors"SortExpression="Authors"></asp:BoundColumn></Columns></asp:datagrid><cc1:GridSlideHeaderid="GridSlideHeader1"runat="server"DataGridID="DataGridReport1"/></form>

结束语

这里服务器控件已经快速编写并且有很大的改进空间。 我没有时间来实现设计器控件,因这里在设计模式中看起来不太好。 实现JavaScript时,控件将设置每个标题项的TD 位置,而不是设置 TR 位置。 这是为了保持头部边界。 最后,有人告诉我这个控制只在 IE 平台上兼容。 理论上,它应该兼容任何支持CSS定位的浏览器,但这是未测试的:p。 享受并让我知道 Bug 你是 find~。"。"。


数据  控制  asp  asp-net  sli  HEAD  
相关文章