多列HTML表的设计

Question

最近，我遇到了HTML表格设计问题的麻烦。我有一个CS程序，我想将其重建为BS程序。这是UI屏幕截图。

如您所见，它有太多列。将出现一个水平滚动条。如何改善用户体验？

我试图将几列合并为一列，但是这带来了一些新问题-混乱，不利于过滤和排序。

如果您有很好的榜样，请告诉我。

Answer 1

经过长时间的思考，并不完美，但我找到了一些解决方法。我在这里发布我的解决方案以供参考。

1、允许太长列的水平滚动条。 这可以通过添加一个像这样包装表格的 DIV 标签来轻松完成：

<div style="overflow-x: auto;">
    <table class="no-wrap">
    <!-- stuff -->
    <!-- no-wrap is a AdminLTE style which makes the text in the table do not wrap -->
    </table>
</div>

2、允许用户控制显示哪些列。我通过添加一个基于 Bootstrap 的模式对话框来做到这一点。 减少显示列数，你会发现它在窄屏下看起来更好。

通过编写一些 JavaScript 代码并使其在您的项目中通用，这并不难。切记利用好Local Storage技术将用户的配置保存在本地，下次打开该页面时恢复状态。在我的解决方案中，我的本地存储密钥是这样的：

my-datatable-hide-col:/business/order:tb-order

my-datatable-hide-col是固定的，/business/order是路径，tb-order是表的id。这个本地存储键的值是这样的：

[0, 3, 4]

这意味着第 0 列、第 3 列和第 4 列将被隐藏。如果该值不存在或为空，则不会隐藏任何列。

3、允许用户控制列的顺序。类似于上面控制列的显示状态。

这也可以通过编写一些 JavaScript 代码并使其通用来完成。