现在的位置: 首页 > 综合 > 正文

如何冻结DataGrid的特定列

2018年04月09日 ⁄ 综合 ⁄ 共 5554字 ⁄ 字号 评论关闭

今天上网找了好久,用了个笨方法,css来实现,据说VS 2005 dataview就可以,可惜小弟还苦苦使用vs 2003

现在把我的方法分享下

第一步:添加datagrid的itembound事件

选择需要冻结列的css样式

 

//冻结前7列
            e.Item.Cells[0].CssClass = "locked";
            e.Item.Cells[
1].CssClass = "locked";
            e.Item.Cells[
2].CssClass = "locked";
            e.Item.Cells[
3].CssClass = "locked";
            e.Item.Cells[
4].CssClass = "locked";
            e.Item.Cells[
5].CssClass = "locked";
            e.Item.Cells[
6].CssClass = "locked";

第二步 :将datagrid放在一个固定列宽的Div中

 

<DIV id="div-datagrid">
                                
<asp:datagrid id="myDataGrid" runat="server" AutoGenerateColumns="False" UseAccessibleHeader="True">
                                    
<AlternatingItemStyle CssClass="GridItem"></AlternatingItemStyle>
                                    
<ItemStyle CssClass="GridItem"></ItemStyle>
                                    
<HeaderStyle CssClass="GridHeader"></HeaderStyle>
                                    
<Columns>
<asp:TemplateColumn HeaderText="客户名称">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:Label id="labCustName" runat="server" Width="128px">Label</asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn HeaderText="寸别">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:Label id="labMeasName" runat="server" Width="61px">Label</asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn HeaderText="客户厂别">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<FONT face="宋体">
                                                    
<asp:DropDownList id="dropCustFactory" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropCustFactory_SelectedIndexChanged"></asp:DropDownList></FONT>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn HeaderText="客户Model Name">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:Label id="labCustmdName" runat="server">Label</asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn HeaderText="客户料号">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:Label id="labCustPN1" runat="server">Label</asp:Label>
                                                
<HR>
                                                
<asp:Label id="labCustPN2" runat="server">Label</asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn HeaderText="达信料号">
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:DropDownList id="dropPartNo1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropPartNo1_SelectedIndexChanged"></asp:DropDownList>
                                                
<HR>
                                                
<asp:Label id="labPartNo2" runat="server"></asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
                                        
<asp:TemplateColumn>
                                            
<HeaderStyle ForeColor="Black"></HeaderStyle>
                                            
<ItemTemplate>
                                                
<asp:Label id="noname" Width="39px" Runat="server">P</asp:Label>
                                            
</ItemTemplate>
                                        
</asp:TemplateColumn>
</Columns>
                                    
<PagerStyle Visible="False" Mode="NumericPages"></PagerStyle>
                                
</asp:datagrid>
                                                            
</DIV>

 

第三步:引用样式表代码

 

/*冻结列*/
/* Div container to wrap the datagrid */
div#div-datagrid 
{
width
: 1024px;
height
:auto;
overflow-x
: auto;
overflow-y
:hidden;
scrollbar-base-color
:#ffeaff;


}


/* Locks the left column */
td.locked, th.locked 
{



position
:relative;
cursor
: default; 
left
: expression(document.getElementById("div-datagrid").scrollLeft); /*IE5+ only*/
}
    

/* Locks table header */
th 
{

position
:relative;
cursor
: default; 
top
: expression(document.getElementById("div-datagrid").scrollTop-6); /*IE5+ only*/
z-index
: 10;
}


/* Keeps the header as the top most item. Important for top left item*/
th.locked 
{z-index: 99;}

 

最后实现效果,大家可以试试,有问题可以联系我,谢谢

【上篇】
【下篇】

抱歉!评论已关闭.