处理潜在的大型数据矩阵有哪些好的 UI 模式？
我正在将旧的 vb 桌面应用程序迁移到 ASP.NET Web 应用程序版本。该应用程序允许人们逐层详细说明建筑物的报价，并指定每层楼需要的每种物品的数量。现有的数据库是一个非常简单的 M:N Join
+----------+ +-----------+ +----------+
| Floors | | FloorItems| | Items |
+----------+ +-----------+ +----------+
| FloorId |--->| FloorId | | |
| ... | | ItemId |<---| ItemId |
| | | Quantity | | ... |
+----------+ +-----------+ +----------+
在现有的桌面应用程序中，开发人员将这个 2D 矩阵网格组合在一起，以允许最终用户在一个屏幕中添加所有楼层上所有物品的数量。例如，
| Item 1 | Item 2 | Item 3 | Item 4 | ....
--------+--------+--------+--------+--------+------
Floor 1 |
Floor 2 |
Floor 3 |
Floor 4 |
... |
这会在 Web UI 中引发各种问题，因为随着项目/产品目录的增长，网格可能会变得非常宽。页面大小也是一个问题。更不用说验证可能数百个屏幕输入和内容了。定期自动保存它们...
任何人都可以推荐任何其他 UI 模式来处理 Web 应用程序中潜在的大型输入矩阵吗？或者在网上指出一些好的例子？
（我正在考虑在 Silverlight 中执行此一个屏幕，允许网格在 UI 内根据需要尽可能向右滚动，并在焦点退出时保存每个文本框）
I'm migrating an old vb desktop app to an ASP.NET web application version. The app allows someone to spec out a quote for a building, floor by floor, specify how many of each item, are needed on each floor. The existing DB is a very simple M:N Join
+----------+ +-----------+ +----------+
| Floors | | FloorItems| | Items |
+----------+ +-----------+ +----------+
| FloorId |--->| FloorId | | |
| ... | | ItemId |<---| ItemId |
| | | Quantity | | ... |
+----------+ +-----------+ +----------+
In the existing desktop app, the developers hacked together this 2D Matrix Grid for allowing the End-User to add the quantities of all items on all floors in one Screen. e.g.
| Item 1 | Item 2 | Item 3 | Item 4 | ....
--------+--------+--------+--------+--------+------
Floor 1 |
Floor 2 |
Floor 3 |
Floor 4 |
... |
This raises all sorts of problems though in a web UI as the Grid can potentially grow very wide as the item/product catalogue grows. page size is also an issue. not to mention validation of potentially hundreds of on screen inputs & auto saving them at regular intervals...
Can anyone recommend any other UI patterns for dealing with potentially large matrices of inputs in a web-app? Or point out some good examples online ?
(I'm toying with the idea of doing this one screen in Silverlight allowing a grid to scroll as far right as needed within the UI, and saving every textbox on-focus-exit)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，我会尝试了解客户是否愿意减少他们想要查看的数据量。
在编辑4楼的物品数量时，是否真的需要查看2楼的物品？
或者，也许在编辑项目#3 时，用户并不真正关心项目#12 的数量。
如果上述任何一个问题的答案是肯定的，您可以重新设计屏幕以一次仅显示一个楼层/项目，这几乎消除了您的问题。
如果您只是必须显示大量数据，有许多网格控件可以很好地处理大量数据。
就我个人而言，我喜欢 jQuery 的 jqgrid。显然还有更多。
Firstly, I'd try to see if the customer is open for reducing the amount of data they want to view.
When editing items quantities on the 4th floor, is it really necessary to view the 2nd floor's items?
Alternatively- perhaps, when editing item #3, the user isn't really bothered with the quantity of item #12.
If the answer to any of the above is positive, you can re-design the screen to show only one floor / item at a time, which pretty much eliminates your problem.
If you simply must display that huge amount of data, there are many grid controls that can handle large volumes of data nicely.
Personally I like jQuery's jqgrid. obviously there are many more.
如果您只是想让列表向下而不是横向增长，为什么不使用树控件呢？显示屏只会向下显示，您可以展开和折叠视图，这样它们一次只能在一层楼上工作。如果您想实现一些检查点验证/保存，请在底层添加“编辑”、“取消”和“保存”按钮，数据在单击“编辑”之前是只读的，并且您可以在“保存”时进行验证。如果用户尝试编辑另一个楼层，则警告他们需要保存或取消当前楼层。
If you are just trying to have the list grow down instead of across, why not use a tree control? The display only gros down, and you can expand and collapse the view so they are only working on one floor at a time. If you want to implement some checkpointed validate/save then add Edit, Cancel and Save buttons at the floor level, with the data being readonly until they hit Edit, and you can validate upon Save. If the user tries to edit another floor then warn they need to Save or Cancel the current.