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

2023年4月3日 219次阅读

我正在使用asp.net mvc-4 Web应用程序,我正在使用bootstrap 2.0.

目前,我几乎在每个控制器中大量使用asp.net mvc web网格.现在,这是一种使用最少编写的代码对信息进行排序,分页和查看的好方法.但我面临的唯一问题是用户在移动设备上访问网格时. Web网格列将非常薄,其数据几乎无法读取.

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

>使用Style的一种方法：在不太重要的列上使用“hidden-phone”,如下所示,因此这些列将隐藏在移动设备上,而最重要的列将显示并占据释放区域： –

var gridcolumns = new List<WebGridColumn>();

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

>虽然第二种方法是使用一些css样式来通过遵循此方法将块状样式更改为块而不是行

根据我自己的经验,第一种方法更加用户友好,因为用户仍然可以将webgrid视为表格,其中包含最重要的列.虽然第二种方法的优点是所有信息都将被呈现(没有任何内容会被隐藏),但是将webgrid的表行显示为块将允许用户查看最多两个块而无需向下滚动/起来.

那么一般来说哪种方法更好？隐藏一些列并获得更好的用户体验,或者将所有信息视为一个块,但用户体验较少？

最佳答案 没有一种尺寸适合所有解决方案.通常,您希望为移动用户预过滤数据(并可能将其显示为列表),以便用户只能查看很少的行/列.尝试在小巧的手机上显示一百行乘15列是一个应用程序设计问题,无法通过将行重新排列为块来解决.

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

点赞