为移动用户界面提供响应式asp.net web网格的方法(使用块显示而不是隐藏某些列)

Question

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

现在我找到了两种方法来改进移动设备上的网络网格界面：-

1. 使用样式的一种方法：在不太重要的列上使用"隐藏电话"，如下所示，因此这些列将隐藏在移动设备上，而最重要的列将显示并占据空闲区域：-

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

2. 而第二种方法是使用一些css样式，通过以下方法将tale样式更改为块而不是行链接

根据我自己的经验，第一种方法对用户更友好，因为用户仍然可以将网络网格视为具有最重要列的表。虽然第二种方法的优点是所有信息都会被显示(没有什么会被隐藏)，但将网络网格的表行显示为一个块将允许用户查看最多两个块，而不必向下/向上滚动。

那么，一般来说，遵循哪种方法更好呢？隐藏一些列并获得更好的用户体验，还是将所有信息作为一个块查看但用户体验较少？

Answer 1

没有一刀切的解决方案。通常，您希望为移动用户预先筛选数据(并可能将其显示为列表)，以便用户只能查看很少的行/列。试图在一部小型手机上显示100行乘15列是一个应用程序设计问题，无法通过将行重新排列成块来解决。

我想，如果你问这个问题，那么你的特定数据网格在某种程度上/几乎适合典型的用户设备。在这种情况下，如果真的需要网格，我会尝试采取第一种方法，并要求用户将手机旋转到横向，以获得最佳效果。请参阅此处-检测视口方向，如果方向为纵向显示警告消息，则建议用户使用指令

Answer 2

您还可以使用引导程序在小型设备上水平滚动表格的方式。

<div class="table-responsive">
<table class="table"> 
...
</table>
</div>

我遇到了一个类似的挑战，最终得到了隐藏一些列、具有可见xs列并在其中堆叠值，以及使用"table-responsive"添加滑动的组合。