CRUD 应用程序中网格的替代品？

Question

So you were assigned to build a basic CRUD application. And it has this one page that serves to list all of the inventory items... if your user wants to edit any of them, there's the "Edit" button next to every item.

You know the drill.

I was recently tasked to modified one of such CRUD page and it looked rather ugly. So I decided it could use some polishing.

But thinking about it... I wonder what are the good alternatives to using grids when creating a CRUD page that display a lot of data?

Setting aside ajax/speed/security/implementation concerns...

What are some good alternatives to using a grid in large CRUD pages?

I'm willing to trade some usability for aesthetics if that would matter.

Answer 1

For displaying relatively few fields for a lot of records, there's nothing wrong with a tabular display like a grid, especially if the task involves searching for or comparing records. There is something wrong with Edit buttons to open a separate window or page for editing. It means the user has to learn two windows and how to navigate between them, and it takes longer to do.

A big usability improvement is edit-in-place: rather than a read-only grid, have an array of appropriate controls for the fields (text boxes, check boxes, comb boxes, etc.) within your grid (or instead of your grid). A single Save button on the page saves all changes to all records (or you post changes automatically for appropriate events).

Form-like layout (possibly tabbed) is the alternative to a tabular layout if you need to display lots of fields for few records. You can provide paging controls (eg, something that looks like a Recordset control) to allow the user to page among records.

If you have lots of records and lots of fields, you can combine the tabular with the form-like layout by having a master-detail combination. A table at the top of page displays the key fields for the records while a form at the bottom of the page display “overflow” fields for whatever record in the table currently has focus.

Another alternative is to display the records graphically. Pick two fields and represent their values for each record by x and y coordinates used to locate an icon on the page. This is good if the task involves searching for patterns or inter-related records. Additional fields for the record (icon) with focus may be shown in form-like layout in a detail portion of the page.

Another thing you can do is represent certain fields graphically within a tabular or form-like layout (eg, with icons, mini bar graphs, shade or color coding, etc.). This can aid user searches for records with certain values. It can also display the general gist of a lot of data in a small space (eg, as sparklines).

Pick the layout that maximizes user performance for your users, tasks, and work environment.

Answer 2

A list (instead of a grid) that opens up more fields for editing when clicked, or opens a new window or form. This way the screen isn't overloaded with data from the start, and it's very usable as long as the most important data is usable.

An example would be the Gmail Chat contacts list (screenshot here ).

In some applications a very nice usability touch that helps reduce the information needed to display is a good search/filter box: as you type into the box, the list is filtered to matching entries.

Answer 3

The data to be displayed are tabular data, so it makes sense to display them in table form, I can't see any other acceptable solution.

However, different solutions can be combined to present the data in a functional way:

• If your main data table retrieves and shows some data coming from a relational MySQL table you can display them in a collapsible nested table
• The native browser scrollbars are a bit ugly, you can use some Javascript plugins like OverlayScrollbars to improve the user experience
• Some MySQL data have to be displayed at first sight, the main important information, whereas others are secondary data, details which can be displayed only if the user want to see them. I use another plugin for this purpose that adds a first column to the table, when you click it it shows a collapsible row with the additional secondary data.
• At last, if you wish you can stick the table main header to the top for the user can always see the columns titles.

You can see all these tricks in action here in the MySQL Sakila database demo .