zoukankan      html  css  js  c++  java
  • 如何利用GridView纵向显示数据?

    有的时候想实现类似下图,第二个图示的效果:

    我们可能首先会想到DataList,其实DataList我们这里设置:

    <asp:DataList id="DataList1" runat="server" RepeatColumns="10">
                    
    <ItemTemplate>
                        
    <%# DataBinder.Eval(Container.DataItem,"test") %>
                    
    </ItemTemplate>
            
    </asp:DataList>

    这样显示出来的是上图的效果,并不能得到预期的纵向显示一定行的效果。
    其实遇到这样的情况可以对数据源做一下转换。
    比如我们建立这样的测试数据源:

    DataTable dt=new DataTable();
                 DataColumn dc
    =new DataColumn("test",Type.GetType("System.String"));
                 dt.Columns.Add(dc);
                
    for(int i=1;i<=54;i++)
                
    {
                     DataRow dr
    =dt.NewRow();
                     dr[
    "test"]="测试"+i;
                     dt.Rows.Add(dr);
                 }


    数据表中有54行数据,我们希望它一列显示8行,也就是分7列显示,达到上图的效果,写一个方法进行转换。

    private DataTable MakeData(DataTable dt,int iSize,int iColumnID)
            
    {
                
    int itmp=dt.Rows.Count%iSize;
                
    int iColumn;
                
    if(itmp==0)
                     iColumn
    =dt.Rows.Count/iSize;
                
    else
                     iColumn
    =dt.Rows.Count/iSize+1;
                 DataTable newdt
    =new DataTable();
                
    for(int i=0;i<iColumn;i++)
                
    {
                     DataColumn dc
    =new DataColumn(dt.Columns[iColumnID].ColumnName+i,dt.Columns[iColumnID].DataType);
                     newdt.Columns.Add(dc);
                 }

                
    for(int i=0;i<iSize;i++)
                
    {        
                     DataRow dr
    =newdt.NewRow();
                    
    for(int j=0;j<iColumn;j++)
                    
    {
                        
    if((i+j*iSize)<dt.Rows.Count)dr[dt.Columns[iColumnID].ColumnName+j]=dt.Rows[i+j*iSize][iColumnID];
                     }

                     newdt.Rows.Add(dr);                
                 }

                
    return newdt;
             }


    然后绑定即可:

    this.DataGrid1.DataSource=MakeData(dt,8,0);
                
    this.DataGrid1.DataBind();


    在这里仅仅说明一下这个方法三个参数的含义:
    第一个参数传递一个原来的数据表进去
    第二个参数表示希望这一列显示多少行
    第三个参数表示这个字段是数据表的第几列的字段,这里的数据表只有1列,所以写0

    其实这么做的好处在于DataGrid能够方便的进行分页,这个排列次序接近于DataList的RepeatDirection="Vertical"效果
    今天再来对上次的程序进行一下修改,实现RepeatDirection="Horizontal"的效果,同时启用DataGrid的分页。
    这样可以弥补DataList不能自动分页的不足,但是效率上来说其实是很差的。

  • 相关阅读:
    【转】浮点数与IEEE 754
    最小二乘
    黑科技!两行代码完美解决:同时设置overflow-x:hidden,overflow-y:visible无效的问题
    js过滤html标签
    react native 项目版本升级
    react-native中显示手机本地图片/视频
    SourceTree推送分支时遇到ArgumentException encountered错误的解决办法
    开发自己的react-native组件并发布到npm[转]
    react native 中实现个别页面禁止截屏
    JS数字转中文
  • 原文地址:https://www.cnblogs.com/yangfan/p/1207256.html
Copyright © 2011-2022 走看看