【问题标题】:How to add responsive behaviour to the asp:GridView如何将响应行为添加到 asp:GridView
【发布时间】:2016-11-17 06:05:13
【问题描述】:

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

有没有办法实现它。

我之前尝试过一种方法,即用 html 表格替换我的 gridview 并应用 no-more-table 样式 后面的代码。但我不想这样做,因为我想要 asp:GridView. 提供的所有功能

【问题讨论】:

    标签: c# asp.net gridview


    【解决方案1】:

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

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

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

    第 2 步:从后面的代码(在 RowDataBound 函数内部)为每个单元格分配一个 data-title 属性,如下所示,

    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 将样式应用到您希望它生效的任何屏幕尺寸,这应该可以解决问题。

    /*  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); }
    

    【讨论】:

    • 很高兴它有帮助。
    • 我必须添加以下 CSS 代码来隐藏我的 gridview 的标题:#no-more-gridView th { display: none; }
    • @SantiagoTrejo 很高兴您指出了这一点。我已将其省略,以便使用此样式的任何人都可以根据需要自定义标题(因为这是我的许多网格的要求,例如仅在响应视图的标题中保持 SelectAll 复选框可见 - 使我的任务更容易)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-29
    • 2021-02-17
    • 1970-01-01
    相关资源
    最近更新 更多