GridView——标题行自适应单元格列宽与选中单元格变色

首先看效果图：

 

主要实现——

1.前台GridView代码：

<asp:GridView Height="100%" Width="98%" ID="DataGrid1" runat="server" AutoGenerateColumns="False"
    EnableModelValidation="True" Font-Size="9pt"  style="overflow:scroll"
    onrowcommand="DataGrid1_RowCommand" AllowPaging="True" 
    onpageindexchanging="DataGrid1_PageIndexChanging" PageSize="20" 
    onrowdatabound="DataGrid1_RowDataBound">                                                                     
    <Columns>
        <asp:TemplateField HeaderText="图片">
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false" 
                    CommandArgument ='<%# Eval("SEQ_NO") %>'   CommandName="ViewPicture" Text="图片"></asp:LinkButton>
            </ItemTemplate>
            <HeaderStyle />
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        </asp:TemplateField>                                                                        
        <asp:BoundField DataField="CUSTOMS_NAME" HeaderText="关区">
            <HeaderStyle></HeaderStyle>
            <ItemStyle HorizontalAlign="Center"></ItemStyle>
        </asp:BoundField>

主要事件是： onrowdatabound="DataGrid1_RowDataBound"

2.后台代码：

        protected void DataGrid1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            //固定标题行列宽            
            if (e.Row.RowType == DataControlRowType.Header)//当前是标题行
            {
                //保持列不变形有两种方法： 
                //方法一是设置cell的自动换行属性为false，方法二是用html标记的方式实现不换行； 就是一个空格，可以让网格线和里面的内容留有一定的距离保持美观。
                for (int i = 0; i < e.Row.Cells.Count; i++)
                {
                    ////方法一： 
                    //e.Row.Cells[i].Text = " " + e.Row.Cells[i].Text + " ";
                    //e.Row.Cells[i].Wrap = false;

                    //方法二： 
                    e.Row.Cells[i].Text = "<nobr> " + e.Row.Cells[i].Text + " </nobr>";
                }
            }
            else if (e.Row.RowType == DataControlRowType.DataRow)//当前是数据行
            {
                e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this)");//点击行变色
                // e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='#Efefef'}");//当鼠标停留时更改背景色
                // e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}");//当鼠标移开时还原背景色                
                //e.Row.Attributes["style"] = "Cursor:hand"; //设置悬浮鼠标指针形状为"小手"
                //GridView1.HeaderRow.Cells[10].Visible = false;
                // e.Row.Cells[10].Visible = false;//隐藏选择按钮
                //String evt = Page.ClientScript.GetPostBackClientHyperlink(sender as System.Web.UI.WebControls.GridView, "Select$" + e.Row.RowIndex.ToString());
                // e.Row.Attributes.Add("onclick", evt);//执行选择行GridView1_SelectedIndexChanged事件

                //固定单元格行列宽
                for (int i = 0; i < e.Row.Cells.Count; i++)
                {
                    ////方法一： 
                    //e.Row.Cells[i].Text = " " + e.Row.Cells[i].Text + " ";
                    e.Row.Cells[i].Wrap = false;
                }
            }

        }

 

注意：针对标题行，方法一和方法二都试用，针对数据行，则只适用方法一，且方法一的 e.Row.Cells[i].Text = " " + e.Row.Cells[i].Text + " ";  要注释掉 ，即前后增加空格不能用，因为数据行如果遇到模板列TemplateField，列中的数据将会被替换成空内容。

选中的单元格变色，需要加上如下JS代码：

 <script type="text/javascript">
        var prevselitem = null;
        function selectx(row) {
            if (prevselitem != null) {
                prevselitem.style.backgroundColor = '#DDEDFF';
            }
            row.style.backgroundColor = 'PeachPuff';
            prevselitem = row;

        }
    </script>

　　

此外，如果想让GridView出现横向滚动条，需要在外面套一个如下的div：

 <div style="width: 100%; height: auto; overflow: scroll;text-align:center;">