如何向 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-responsive-table.

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.

有没有办法实现它.

我之前尝试过一种方法，就是将我的 gridview 替换为 html table 并应用 no-more-table 样式后面的代码.但我不想这样做，因为我想要 asp:GridView.

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.

推荐答案

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

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

Step1:将您的 GridView 包含在 Id 为 no-more-gridView 的部分中如下

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:从后面的代码(在 RowDataBound 函数内部)为每个单元格分配数据标题属性，如下所示，

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:最后包括下面给出的我的自定义样式.使用 media query 在您希望它生效的任何屏幕尺寸上应用样式，这几乎可以解决问题.

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屋！