asp.net-mvc-4 - Telerik Extensions for ASP.NET MVC 根据视口宽度隐藏/取消隐藏各种网格列

Question

我在 Razor 语法中的 Telerik Extensions for ASP.NET MVC 中有一个相当宽的（1200 + px）Telerik Grid，我希望能够根据最终用户在浏览器中的视口宽度隐藏/取消隐藏某些列。这可能吗？

如果视口宽度> 1024px，我希望显示3列，否则设置为.Hidden（true）。

Answer 1

一种可能的解决方案是使用媒体查询和响应式设计技术。

基本原则是渲染所有列，以便它们都在 HTML 中发出（即在所有列上将 Hidden 设置为 false），然后使用 CSS 中的媒体查询根据视口宽度显示/隐藏适当的列。

我不确定 Telerik 网格发出的确切标记，但我创建了一个 jsfiddle，在此处使用基本 HTML 表演示该概念：http: //jsfiddle.net/peRq2/

HTML：

<table>
    <thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th class="wide">Header (wide)</th>
        <th class="wide">Header (wide)</th>
        <th class="wide">Header (wide)</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
        </tr>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
        </tr>
    </tbody>
</table>

CSS3（基于 600px 宽度的媒体查询 - 您可以更改为 1200px）：

@media (max-width: 600px) {

.wide {
    display: none;
}

}

这个想法是当视口小于 600px 时，用 class 标记的ths 和s 是隐藏的。尝试更改 jsfiddle 上结果窗格的宽度，以查看媒体查询的工作结果。tdwide

需要注意的一件事是媒体查询的浏览器兼容性（基本上是 IE9 及更高版本以及所有其他现代浏览器）：http ://caniuse.com/css-mediaqueries - 这里还有更多内容：http ://webdesignerwall.com/tutorials/ css3-媒体查询

希望这能给你一些启发！