在asp.net中具有固定标题的可滚动GridView [英] Scrollable GridView with fixed headers in asp.net
问题描述
如何创建带有固定标题的可滚动Grid View,该标题不会随记录一起滚动并停留在asp.net的顶部
我写了脚本,但是它不起作用,请帮助我
在HTML源代码页面中
hi ,
how to create scrollable Grid View with fixed headers which don''t get scrolled with records and stay on the top in asp.net
i written script but its not working plz help me
in Html sourse page
<style type="text/css">
.header
{
font-weight:bold;
position:absolute;
background-color:White;
}
</style>
<div>
<gridview>
</gridview>
<HeaderStyle CssClass="header"Height="20px" />
<div /></div>
在此先感谢
Thanks in advance
推荐答案
检查此
http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview- fixed-headers-asp.html [ ^ ]
http://www.mindfiresolutions.com/A- Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php [
check this
http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html[^]
http://www.mindfiresolutions.com/A-Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php[^]
hi,
在网格集中-ShowHeader ="False"
在网格顶部使用带有列的表
例如:
In grid set -- ShowHeader="False"
on top of grid use a table with columns
Ex:
<tr>
<TD >
<TABLE id=TABLE9 align="left" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;
WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px; background-color:Black; color:White; "
cellSpacing=0 border=1>
<tr>
<td align="left" Width="250px"><b>Category</b></td>
<td align="left" Width="200px"><b>Feature</b></td>
<td align="left" Width="50px" ><b>ADM</b></td>
<td align="left" Width="50px" ><b>PCO</b></td>
<td align="left" Width="50px" ><b>PSV</b></td>
<td align="left" Width="50px" ><b>HOD</b></td>
<td align="left" Width="50px" ><b>EMP</b></td>
<td align="left" Width="50px" ><b>HR</b></td>
<td align="left" Width="50px" ><b>A/c</b></td>
<%--<td align="left" Width="60px" ><b>Status</b></td> --%>
<td align="left" Width="20px" ><b></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<asp:DataGrid ID="dgPOTLinks" runat="server" AutoGenerateColumns="False"
ShowHeader="false" GridLines="None" BorderStyle="none"
CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
OnCancelCommand="OnCancel" Width="100%"
OnItemCreated="dgPOTLinks_ItemCreated"
OnDeleteCommand="OnDelete">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID" Visible="false"></asp:BoundColumn>
<asp:BoundColumn DataField="Category" HeaderText="Category" ItemStyle-Width="250px" ></asp:BoundColumn>
<asp:BoundColumn DataField="Name" HeaderText="Feature" ItemStyle-Width="200px" ></asp:BoundColumn>
<asp:BoundColumn DataField="Description" HeaderText="Description" Visible="false"></asp:BoundColumn>
<asp:BoundColumn DataField="Link" HeaderText="Link" Visible="false"></asp:BoundColumn>
<asp:BoundColumn DataField="Active" HeaderText="Active" Visible="false" ></asp:BoundColumn>
<asp:BoundColumn DataField="CreatedOn" HeaderText="CreatedOn" DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="70px" Visible="false"></asp:BoundColumn>
<asp:BoundColumn DataField="CreatedName" HeaderText="CreatedName" ItemStyle-Width="125px" Visible="false"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Admin">
<ItemTemplate>
<asp:CheckBox ID="chkAdm" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkAdm_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="PCO">
<ItemTemplate>
<asp:CheckBox ID="chkPCO" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkPCO_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px"/>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="PSV">
<ItemTemplate>
<asp:CheckBox ID="chkPSV" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkPSV_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px"/>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="HOD">
<ItemTemplate>
<asp:CheckBox ID="chkhod" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkhod_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="EMP">
<ItemTemplate>
<asp:CheckBox ID="chkemp" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkemp_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="HR">
<ItemTemplate>
<asp:CheckBox ID="chkHR" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkHR_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="A/c">
<ItemTemplate>
<asp:CheckBox ID="chkAcc" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkAcc_CheckedChanged"/>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateColumn>
<asp:BoundColumn DataField="Status" HeaderText="Status" ItemStyle-Width="60px" Visible="false"></asp:BoundColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/action_delete.png" ToolTip="Delete" CommandName="Delete" />
</ItemTemplate>
<ItemStyle Width="20px" />
</asp:TemplateColumn>
<asp:BoundColumn DataField="CatID" HeaderText="CatID" Visible="false" ></asp:BoundColumn>
</Columns>
<ItemStyle />
</asp:DataGrid>
<asp:Label ID="lblNoData" runat="server" CssClass="smallLabelError" ForeColor="DarkGreen" Text="No Data Available" Visible="false"></asp:Label>
</td>
</tr>
Grid View :-
Grid View :-
<asp:table id="tblOutputGridHeader" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">
<asp:table id="tblOutputGridHeader" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">
<asp:gridview id="gdDPS" cellpadding="0" cssclass="alternetGridWhite table" runat="server" xmlns:asp="#unknown">
Width="1100px" AllowPaging="False" AutoGenerateColumns="false" ShowFooter="false"
ShowHeader="false" GridLines="Both" OnPageIndexChanging="gdDPS_PageIndexChanging"
OnRowDataBound="gdDPS_RowDataBound" OnRowCommand="gdDPS_RowCommand">
<pagersettings position="TopAndBottom">
<footerstyle cssclass="gridfooterblue">
<rowstyle cssclass="odd">
<alternatingrowstyle cssclass="even">
<列> <asp:templatefield headertext="SNo" itemstyle-width="5%">
< itemtemplate>
<%# (Container.DataItemIndex+1).ToString() %>
<asp:templatefield headertext="DPS Date" itemstyle-width="9%">
< itemtemplate>
<asp:literal id="lbldispach_date" runat="server" text="<%# Eval(" dispach_date")="" %>"="">
<asp:templatefield headertext="DPS No" itemstyle-width="15%">
< itemtemplate>
<asp:hyperlink id="hldispatch_sheetNo" target="_blank" runat="server" text="<%# Eval(" dispatch_sheetno")="" %>"="">
<asp:templatefield headertext="Transporter" itemstyle-width="12%">
< itemtemplate>
<asp:literal id="lbltransporterName" runat="server" text="<%# Eval(" transportername")="" %>"="">
<asp:templatefield headertext="Total PT No" itemstyle-width="6%">
< itemtemplate>
<asp:literal id="lblTotPtno" runat="server" text="<%# Eval(" totalptno")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_TotPtno">
<asp:templatefield headertext="Weight" itemstyle-width="6%">
< itemtemplate>
<asp:literal id="lblTotalWeight" runat="server" text="<%# Eval(" totalweight")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_Weight">
<asp:templatefield headertext="Total Cartons" itemstyle-width="6%">
< itemtemplate>
<asp:literal id="lblTotalcartons" runat="server" text="<%# Eval(" totalnoofcartons")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_cartons">
<asp:templatefield headertext="Loaded Cartons" itemstyle-width="6%">
< itemtemplate>
<asp:literal id="lblloadedcarton" runat="server" text="<%# Eval(" loadedcarton")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_loadedcarton">
<asp:templatefield headertext="Status" itemstyle-width="10%">
< itemtemplate>
<asp:literal id="lblStatus" runat="server">
<asp:templatefield headertext="Print" itemstyle-width="10%">
< itemtemplate>
<asp:hyperlink id="hypPrint" runat="server" target="_blank">
<asp:templatefield headertext="Loaded Cartons" itemstyle-width="15%">
< itemtemplate>
<asp:hyperlink id="hypptloadcartons" runat="server" target="_blank">
<pagerstyle horizontalalign="Right">
<asp:gridview id="gdDPS" cellpadding="0" cssclass="alternetGridWhite table" runat="server" xmlns:asp="#unknown">
Width="1100px" AllowPaging="False" AutoGenerateColumns="false" ShowFooter="false"
ShowHeader="false" GridLines="Both" OnPageIndexChanging="gdDPS_PageIndexChanging"
OnRowDataBound="gdDPS_RowDataBound" OnRowCommand="gdDPS_RowCommand">
<pagersettings position="TopAndBottom">
<footerstyle cssclass="gridfooterblue">
<rowstyle cssclass="odd">
<alternatingrowstyle cssclass="even">
<columns> <asp:templatefield headertext="SNo" itemstyle-width="5%">
<itemtemplate>
<%# (Container.DataItemIndex+1).ToString() %>
<asp:templatefield headertext="DPS Date" itemstyle-width="9%">
<itemtemplate>
<asp:literal id="lbldispach_date" runat="server" text="<%# Eval(" dispach_date")="" %>"="">
<asp:templatefield headertext="DPS No" itemstyle-width="15%">
<itemtemplate>
<asp:hyperlink id="hldispatch_sheetNo" target="_blank" runat="server" text="<%# Eval(" dispatch_sheetno")="" %>"="">
<asp:templatefield headertext="Transporter" itemstyle-width="12%">
<itemtemplate>
<asp:literal id="lbltransporterName" runat="server" text="<%# Eval(" transportername")="" %>"="">
<asp:templatefield headertext="Total PT No" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotPtno" runat="server" text="<%# Eval(" totalptno")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_TotPtno">
<asp:templatefield headertext="Weight" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotalWeight" runat="server" text="<%# Eval(" totalweight")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_Weight">
<asp:templatefield headertext="Total Cartons" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotalcartons" runat="server" text="<%# Eval(" totalnoofcartons")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_cartons">
<asp:templatefield headertext="Loaded Cartons" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblloadedcarton" runat="server" text="<%# Eval(" loadedcarton")="" %>"="">
<footertemplate>
<asp:label runat="server" text="" id="lblTot_loadedcarton">
<asp:templatefield headertext="Status" itemstyle-width="10%">
<itemtemplate>
<asp:literal id="lblStatus" runat="server">
<asp:templatefield headertext="Print" itemstyle-width="10%">
<itemtemplate>
<asp:hyperlink id="hypPrint" runat="server" target="_blank">
<asp:templatefield headertext="Loaded Cartons" itemstyle-width="15%">
<itemtemplate>
<asp:hyperlink id="hypptloadcartons" runat="server" target="_blank">
<pagerstyle horizontalalign="Right">
<asp:table id="tblOutputGridFooter" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">
<asp:table id="tblOutputGridFooter" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">
Method for Creating Header and footer:-
private void AddHeader()
{
TableCell td;
TableRow tr =新的TableRow();
tr = new TableRow();
tr.CssClass = "tableHeading";
td = new TableCell();
td.Text = "SNo";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Date";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "DPS No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Transporter";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total PT No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Weight";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Status";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Print";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
tblOutputGridHeader.Rows.Add(tr);
}
private void AddFooter()
{
TableCell td;
TableRow tr =新的TableRow();
tr = new TableRow();
tr.CssClass = "tableFooter";
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(TotPtno);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "0";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(Totcartons);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(loadedcarton);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
tblOutputGridFooter.Rows.Add(tr);
}
When Bind Grid
AddHeader(); //Create header
gdDPS.DataSource = dsDPS; //BVind Data with gridview
gdDPS.DataBind();
AddFooter(); //Create footer
Css :-
.width300{ width:300px; float:left;}
.alternetGrid{background-color:#ccccff}
.alternetGridWhite{background-color:#fff}
.alternetGridWhite td{padding:5px;}
.footerTable{position:absolute; bottom:0; left:0;}
.xScroll{width:980px; overflow-x:scroll; overflow-y:hidden;}
.headingTable{padding:0 17px 0 0;}
.bodyTable{height:200px; overflow-y:scroll; overflow-x:hidden;}
.bodyTableBig{height:200px; overflow-y:scroll; overflow-x:hidden;}
.tableFooter{padding:0 0px 0 0;}
table tr.tableHeading td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}
table tr.tableFooter td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}
Method for Creating Header and footer:-
private void AddHeader()
{
TableCell td;
TableRow tr = new TableRow();
tr = new TableRow();
tr.CssClass = "tableHeading";
td = new TableCell();
td.Text = "SNo";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Date";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "DPS No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Transporter";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total PT No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Weight";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Status";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Print";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
tblOutputGridHeader.Rows.Add(tr);
}
private void AddFooter()
{
TableCell td;
TableRow tr = new TableRow();
tr = new TableRow();
tr.CssClass = "tableFooter";
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "Total";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(TotPtno);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "0";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(Totcartons);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = Convert.ToString(loadedcarton);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);
td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);
tblOutputGridFooter.Rows.Add(tr);
}
When Bind Grid
AddHeader(); //Create header
gdDPS.DataSource = dsDPS; // BVind Data with gridview
gdDPS.DataBind();
AddFooter(); // Create footer
Css :-
.width300{ width:300px; float:left;}
.alternetGrid{background-color:#ccccff}
.alternetGridWhite{background-color:#fff}
.alternetGridWhite td{padding:5px;}
.footerTable{position:absolute; bottom:0; left:0;}
.xScroll{width:980px; overflow-x:scroll; overflow-y:hidden;}
.headingTable{padding:0 17px 0 0;}
.bodyTable{height:200px; overflow-y:scroll; overflow-x:hidden;}
.bodyTableBig{height:200px; overflow-y:scroll; overflow-x:hidden;}
.tableFooter{padding:0 0px 0 0;}
table tr.tableHeading td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}
table tr.tableFooter td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}
这篇关于在asp.net中具有固定标题的可滚动GridView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!