Gridview应用技巧收集

本文介绍如何通过代码和CSS自定义DataGrid与GridView的样式,包括设置表头背景、实现分页不足填充空行、添加滚动条、响应点击事件及合并相同单元格等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在某些情况下,DataGrid或者GridView的默认样式并不能满足日益高涨的用户的要求,很多人追求美观的样式。对表头设定背景也是其中的一个方面,那么有什么好的方法可以达到这一要求呢,我的方法如下:
DataGrid:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
   
if(e.Item.ItemType == System.Web.UI.WebControls.ListItemType.Header)
    {
        e.Item.Attributes.Add(
"style", "background-image:url('background.gif')");
    }
}
GridView:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
   
if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Attributes.Add(
"style", "background-image:url('background.gif')");
    }
}

在DataGrid和GridView中对表头设定背景图片,不需要后台代码。 

HTML code <asp:GridViewrunat="server" ID="gvStatList" AllowPaging="false" Width="100%" CssClass="grid"
                AutoGenerateColumns
="false" Visible="true" ShowFooter="false">
               
<HeaderStyleCssClass="grid-head" />
</asp:GridView>CSS code
.grid-head { font-size: 14px; font-weight: normal; color: #FFFFFF; background-image: url(../images/grid-bg.gif); text-align:center; vertical-align:middle; height: 28px; }
假设这样一种模型,显示用GridView,数据源用DataSet。每次获取10条信息,按每页10条分页。
有的时候数据可能不足10条,而客户要求不足10条显示为空行,以下代码解决了这个问题。

private DataTable FillBlank(int pageSize, DataTable dt)if (dt.Rows.Count < pageSize) { for (int i = dt.Rows.Count - 1; i < pageSize; i++) { DataRow dr = dt.NewRow(); dt.Rows.Add(dr); } } return dt; } private void BindGrid(DataTable dt) { GridView.DataSource = dt; GridView.DataBind(); }
让GridView产生纵向横向的滚动条。这样就不会吧页面撑打了。
CSS code
 <style type="text/css"  id="print" media="print">
        #leftSide, #footerSide {
            display:none;
        }
    </style>
    <style type="text/css" > 
.Freezing 
   { 
    
   position:relative ; 
   table-layout:fixed;
   top:expression(this.offsetParent.scrollTop);   
   z-index: 10;
   } 

.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
    </style>
HTML code
<div id="Div1" style="overflow: scroll; height: 140px;width:638px" > Gridview 在这里 </div>
让GridView响应单击,双击事件的简单方法:
添加选择命令字段,并设置为不可见!
如DataView   ID   为   DataView1.然后在RowDataBound事件中,加上:
C# code 单击 if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onclick", "__doPostBack('GridView1','Select$" + e.Row.RowIndex + "');"); }
双击
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("ondbclick", "__doPostBack('GridView1','Select$" + e.Row.RowIndex + "');"); }
合并gridview列(模板列)相同单元格
    /// <summary>
    /// 合并gridview列(模板列)相同单元格
    /// </summary>
    /// <param name="GridViewList"></param>
    /// <param name="cellNum">合并第几列单元格</param>
    //
    public static void CombineCell(GridView GridViewList, int cellNum)
    {
        int i = 0, rowSpanNum = 1;
        while (i < GridViewList.Rows.Count - 1)
        {
            GridViewRow gvr = GridViewList.Rows[i];

            for (++i; i < GridViewList.Rows.Count; i++)
            {
                GridViewRow gvrNext = GridViewList.Rows[i];
                Label lblproject1 = gvr.Cells[cellNum].FindControl("lblproject") as Label;
                Label lblproject2 = gvrNext.Cells[cellNum].FindControl("lblproject") as Label;
                if (lblproject1.Text == lblproject2.Text)
                {
                    gvrNext.Cells[cellNum].Visible = false;
                    rowSpanNum++;
                }
                else
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                    rowSpanNum = 1;
                    break;
                }

                if (i == GridViewList.Rows.Count - 1)
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                }
            }
        }
    }
    #endregion

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值