如何将响应行为添加到asp：GridView [英] How to add responsive behaviour to the asp:GridView

问题描述

我希望 asp gridview 显示响应式行为，就像html表所做的那样，使用no-more-table css样式，就像这里看到的
http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-

有没有办法实现它。

我曾尝试过一种方法，它是用html表格替换我的gridview，并且在
代码后面应用no-more-table样式。但我不想这样做，因为我想要 asp：GridView提供的所有功能。

解决方案

我已经编写了自定义css来实现此功能。要使用我的代码，请按照以下步骤操作：

Step1 ：将GridView封闭在ID为no-more-gridView的部分内
如下

 < section id =no-more-gridView> 
< asp：GridView ..> 
。 
< / asp：GridView> 
< / section> 
  

Step2 ：为每个单元格指定一个数据标题属性后面的代码（在RowDataBound函数中），如下所示，

  e.Row.Cells [0] .Attributes [data-title ] =Col1Name; 
 e.Row.Cells [1] .Attributes [data-title] =Col2Name; 
 e.Row.Cells [2] .Attributes [data-title] =Col3Name; 
。 
。 
  

Step3 ：最后包含下面给出的自定义样式。使用媒体查询将样式应用于您希望它实现的任何屏幕大小，并且应该几乎可以做到这一点。

  / *作者：Vinay 
描述：响应式GridView 
 * / 
 
 / *强制gridview不像gridview * / 
＃no-more-gridView表，
＃no-more-gridView thead，
＃no-more-gridView tbody，
＃no-more-gridView th ，
＃no-more-gridView td，
＃no-more-gridView tr {
 display：block; 
} 
 / *隐藏表头（但不显示：无，用于辅助功能）* / 
＃no-more-gridView .table_column_head> * {
 display：none; 
 
＃no-more-gridView tr {all：revert; border：2px solid #ccc; height：auto！important;} 
＃no-more-gridView td {
 / *表现为行* / 
 border：none; 
 border-bottom：1px solid #eee; 
职位：亲属; 
 padding-left：50％; 
空格：正常; 
 text-align：left; 
 padding-bottom：1em; 
} 
＃no-more-gridView td：before {
 / *现在像表格标题* / 
 position：absolute; 
 / *顶部/左侧值模拟填充* / 
 left：6px; 
宽度：45％; 
 padding-right：10px; 
 white-space：nowrap; 
 text-align：left; 
 font-weight：bold; 
 
 
标记数据
 * / 
＃no-more-gridView td：before {content：attr（data-title）; } 
  

I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.

Is there a way to achieve it.

I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from code behind. But I don't want to do this as I want to all the features offered by the asp:GridView.

解决方案

I have written custom css to achieve this feature. To use my code follow the below steps,

Step1: Enclose your GridView inside a section with Id as no-more-gridView as below

<section id="no-more-gridView">
    <asp:GridView..>
    .
    </asp:GridView>
</section>

Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,

e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.

Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.

/*  Author     : Vinay
    Description: Responsive GridView
*/

    /* Force gridview to not be like gridview anymore */
    #no-more-gridView table, 
    #no-more-gridView thead, 
    #no-more-gridView tbody, 
    #no-more-gridView th, 
    #no-more-gridView td, 
    #no-more-gridView tr { 
        display: block; 
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-gridView .table_column_head > * { 
        display:none;
    }
    #no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
    #no-more-gridView td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
        padding-bottom: 1em;
    }
    #no-more-gridView td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
    /*
    Label the data
    */
    #no-more-gridView td:before { content: attr(data-title); }

这篇关于如何将响应行为添加到asp：GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！