jquery - 为移动用户界面提供响应式 asp.net web 网格的方法(使用 block 显示与隐藏某些列)

Question

我正在开发一个 asp.net mvc-4 web 应用程序，我正在使用 bootstrap 2.0。 目前我在几乎每个 Controller 中大量使用 asp.net mvc web 网格。现在，它是一种用最少的代码来排序、分页和查看信息的好方法。但我面临的唯一问题是用户在移动设备上访问网络网格时。网络网格列非常细，其数据几乎无法读取。

现在我找到了两种方法来改进移动设备上的 webgrid 界面:-

1. 在不太重要的列上使用 Style:”hidden-phone” 的一种方法如下，因此这些列将在移动设备上隐藏，而最重要的列将显示并占用空闲区域:-

   var gridcolumns = new List<WebGridColumn>();
   
   gridcolumns.Add(new WebGridColumn()
   {
       ColumnName = "OrderID",
       Header = "",
       Style = "hidden-phone",
       CanSort = false,
   

2. 第二种方法是使用一些 css 样式将故事样式更改为 block 而不是行，方法是遵循此方法 link

根据我自己的经验，第一种方法对用户更友好，因为用户仍然可以将 webgrid 查看为表格，其中包含最重要的列。虽然第二种方法的优点是将显示所有信息(不会隐藏任何信息)，但是将 webgrid 的表格行显示为一个 block 将允许用户查看最多两个 block 而无需向下滚动/上。

那么一般来说哪种方法更好？隐藏一些列并获得更好的用户体验，或者将所有信息作为一个 block 查看但用户体验较差？

Answer 1

没有一种适合所有情况的解决方案。通常，您希望为移动用户预过滤数据(并可能将其显示为列表)，以便用户只能查看很少的行/列。试图在微型手机上显示 100 行 15 列是一个应用程序设计问题，无法通过将行重新排列成 block 来解决。

我想如果您问这个问题，那么您的特定数据网格在某种程度上/几乎适合典型的用户设备。在这种情况下，如果确实需要网格，我会尝试采用第一种方法，并额外要求用户将手机旋转到横向以获得最佳效果。看这里 - Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions