zoukankan      html  css  js  c++  java
  • Infragistics中WebGrid的MultiColumn Headers设计

           一般我们在设计Grid的多行表头时,可能首先考虑到用Repeater或DataList,但现在我们可以用Infragistics的WebGrid来很轻松的实现这个功能,我们要实现的效果图如下:



    实现这样的表头的代码如下:
    在Grid的InitializeLayout事件下加入下面的代码:
            //
            
    //设计多表头
            
    //
            private void ut_grid105_InitializeLayout(object sender, Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
            
    {
                
    foreach(Infragistics.WebUI.UltraWebGrid.UltraGridColumn c in e.Layout.Bands[0].Columns)
                
    {
                    c.Header.RowLayoutColumnInfo.OriginY 
    = 1;
                }


                
    //新建一个表头,设置它的显示名称
                Infragistics.WebUI.UltraWebGrid.ColumnHeader ch = new ColumnHeader(true);
                ch.Caption 
    = "购进量";
                
    //设置Y轴起始位置
                ch.RowLayoutColumnInfo.OriginY = 0;
                
    //设置X轴起始位置
                ch.RowLayoutColumnInfo.OriginX = 4;
                
    //设置该表头X轴方向占几列
                ch.RowLayoutColumnInfo.SpanX = 2;

                
    //将该表头加入到我们的Grid中
                e.Layout.Bands[0].HeaderLayout.Add(ch);

                Infragistics.WebUI.UltraWebGrid.ColumnHeader ch1 
    = new ColumnHeader(true);
                ch1.Caption 
    = "消费量";
                ch1.RowLayoutColumnInfo.OriginY 
    = 0;
                ch1.RowLayoutColumnInfo.OriginX 
    = 6;
                ch1.RowLayoutColumnInfo.SpanX 
    = 5;

                e.Layout.Bands[
    0].HeaderLayout.Add(ch1);


                
    foreach(Infragistics.WebUI.UltraWebGrid.UltraGridColumn c in e.Layout.Bands[0].Columns)
                
    {
                    
    if(c.Key != "A02" && c.Key != "A03" && c.Key != "A04" && c.Key != "A05" && c.Key != "A06" && c.Key != "A07" && c.Key != "A08")
                    
    {
                        c.Header.RowLayoutColumnInfo.OriginY 
    = 0;
                        c.Header.RowLayoutColumnInfo.SpanY 
    = 2;
                    }

                }


    }

    当然,我们还可以固定某一列或某几列,代码如下:

    //固定列
                e.Layout.Bands[0].Columns.FromKey("zbmc").Header.Fixed = true;
                e.Layout.Bands[
    0].Columns.FromKey("jldw").Header.Fixed = true;
                e.Layout.Bands[
    0].Columns.FromKey("zbdm").Header.Fixed = true;

    这样做的效果是,当我们水平拖动滚动条时,被固定的这几列是不随之而动的,适用于一些网上填写表格(表格横向很长)的情况.
    因为爱上你,我才懂得珍惜,每一天日记,都写满了甜蜜
    因为想念你,我每天都可以,对着镜子说我多爱你,有多想见到你。
  • 相关阅读:
    jquery 视觉特效(幻灯片效果)
    jquery 视觉特效(图片内容滑动浏览器)
    jquery之stop()的用法
    网站图片幻灯片效果之左右箭头的制作
    数据库三范式
    jquery 视觉特效(当鼠标悬停时,显示大图)
    jQuery EasyUI 1.2.6 新特性
    VM虚拟机网络设置
    Win7:修改注册表来更改“桌面”、“我的文档”、“收藏夹”的位置
    jQuery EasyUI API 中文文档 数字滑块(Slider)
  • 原文地址:https://www.cnblogs.com/jackzhang/p/616378.html
Copyright © 2011-2022 走看看