65.9K
CodeProject 正在变化。 阅读更多。
Home

为ASP.NET中的GridView添加响应式行为

Declan Bright
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (25投票s)

2013 年 2 月 17 日

CPOL

4分钟阅读

viewsIcon

181820

downloadIcon

7090

一种确保ASP.NET GridView在小型屏幕设备上能够良好显示的技术。

引言

GridView是ASP.NET Web Forms中用于显示表格数据的便捷控件。在面向桌面浏览器的Web应用程序中使用时，它效果很好。然而，当在平板电脑和手机等小型屏幕设备上使用这些应用程序时，用户体验并不总是最佳的。数据表通常宽度较大，并且很难很好地缩小以适应小屏幕。页面布局可能会混乱，用户经常需要放大缩小并滚动屏幕才能使用应用程序。

响应式网页设计提供了构建可在任何屏幕尺寸上查看的网页的技术。本文介绍了一种显示表格数据的技术，并展示了如何将其应用于GridView。

背景

人们越来越多地使用移动设备访问Web应用程序，用户期望在使用它们时获得良好的体验。不幸的是，现有项目不总是有时间或资源来开发专用的移动客户端应用程序或专用的移动Web应用程序。在这种情况下，我们能做的最好的事情就是花一些时间进行重构，并应用一些响应式网页设计技术。通过仔细规划，这些更改可以以最小的努力极大地改善用户体验。

响应式设计模式

已经出现了一些模式来帮助解决小屏幕上宽数据表的问题。其中一种模式会将前几列固定到位，让其他列在其下方流动。左侧和右侧的优先级列和操作按钮在表加载时可见，用户可以根据需要水平滚动以查看其他列。这种模式在桌面设备和触摸屏移动设备上都效果良好。

可以使用响应式表格 jQuery 插件将此模式应用于GridView。当触发响应式行为时，GridView的外观不会发生剧烈变化，因此任何已经在桌面上使用该Web应用程序的用户在小型屏幕设备上也会感到熟悉。

设置页面

在应用响应式设计技术时，我们希望控制页面在小型屏幕设备上的显示方式。将视口元标签添加到页面标题将阻止页面被缩放到移动浏览器默认的视口大小。这还将阻止用户进行捏合缩放，因此请确保设置合理的字体大小，以免需要缩放。

<meta name="viewport" 
    content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

设置GridView

我们还希望控制GridView超出其容器宽度时如何表现。因此，我们需要阻止它在页面正常流程中改变。如果表数据包含空格，则这些单元格在表宽度减小时会换行。要阻止这种情况发生，有两种选择：

1. 将GridView上的RowStyle-Wrap属性设置为false。

<asp:GridView runat="server" RowStyle-Wrap="false">

2. 或者添加一些CSS。

table th, table td { white-space: nowrap; }

设置响应式表格 jQuery 插件

将 jQuery 添加到您的页面，然后添加 jquery.responsivetable.min.js 插件脚本。

<script src="scripts/jquery.responsivetable.min.js"></script>

在 jQuery 文档就绪函数中调用响应式表格插件，其中还有一些可以设置的选项。

$(document).ready(function() {
    // Default settings
    $('.myTable1').responsiveTable();
    // Custom settings
    $('.myTable2').responsiveTable({
        staticColumns: 2, 
        scrollRight: true, 
        scrollHintEnabled: true, 
        scrollHintDuration: 2000
    });
});

您不必设置任何预定义的断点，代码会自动检测GridView何时即将溢出其容器。

响应式表格 jQuery 插件选项

  • staticColumns：触发插件时要保持不变的列数，默认为1。
  • scrollRight：将溢出表向右滚动，默认为true。
  • scrollHintEnabled：向用户显示一个提示，表明表内容可以左右滚动，默认为true。
  • scrollHintDuration：提示显示的时间（以毫秒为单位），默认为2000。

在 ASP.NET UpdatePanel 中使用响应式表格插件

如果GridView位于UpdatePanel内，则必须在异步调用结束时调用该插件，因为GridView的HTML将被替换在DOM中。您可以通过向ASP.NET AJAX PageRequestManager注册回调来实现此目的。

$(window).on('load', function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endUpdatePanelRequest);
});
 
function endUpdatePanelRequest() {
    // Setup the responsive gridview ...
}

参考文献

结论

如果您需要GridView在小型屏幕设备上良好显示，那么这项技术可能很有用。

历史

  • v1.0 - 2013年2月17日
  • v1.1 - 2013年2月19日 - 更新了描述和源代码
  • v1.2 - 2014年4月28日 - 将插件更新到最新版本

© . All rights reserved.