Web开发增删查改页面设计

Web开发增删查改页面设计

转自：http://chenjianjx.iteye.com/blog/220723

增删改查有啥好说的？ 

    大多数功能模块，其主要逻辑可能都是数据项的增、删、改和查看。比如 系统中“用户管理”模块，不外乎用户资料查看、增删用户，修改用户资料等。 

界面基本设计 
   在页面上，主要牵涉到的主要界面一般有(以用户管理为例)： 

     1.用户列表界面。把所有用户列出来，要分页，有必要的话还要放一个搜索输入框。列表中点击某用户，就可以进入该用户的明细界面，或者直接进入该用户的修改界面。列表的最下面或最上面应该有一个“增加用户”按钮。 

     2.用户明细界面。显示用户的详细资料，应该提供“修改”按钮，如有必要，还可以提供“删除”按钮和“返回列表”按钮 

     3.用户修改界面。在输入框中显示用户的详细资料，让管理员直接修改。此页面除了提供“确定”按钮，还可以提供“删除”和“返回列表”按钮。在很多情况下，有了修改界面，明细界面其实可以免除。 

     4.用户增加界面。一般是一系列空的输入框，管理员在这里直接设定用户资料。此页面除了提供“确定”按钮，还应该提供“返回列表”按钮。 

其他问题 
    以上列出了最基本的界面设计，但是问题还有： 
      1.如果要批量删除，该在哪里删？ 
      2.从实现的角度来说，增加用户和修改用户的界面其实差不多，逻辑也差不多（比如字段校验）。实现起来可能要写很多重复的东西，不但会增加开发人员的烦恼程度，而且在发生修改时，两边都要做同样的修改，这样很容易出错。 
      3.最关键的问题，增、删、改完成以后，应该跳到哪个界面？  
   下面一一讨论这些问题 


批量删除在哪里删？ 
    一般都放在列表页面。列表中每行的最前面搞一个checkbox，列表的最上面或最下面，放一个“删除按钮”，也就是跟“增加用户”按钮并排着放。勾选若干记录，点击“删除”，即完成批量清除。 


增加用户界面和修改用户界面的功能重叠问题 
    我一般是这样的，增加用户的界面只让输入一两个最核心的字段，增加后跳转到修改用户界面，再输入更多明细信息 


界面之间应该如何跳转？ 
   1.列表中批量删除后，仍回到列表界面。 
   2.用户增加后，比较土的做法是回到列表界面，如果有条件的话，不是回到列表的第一页，而是回到新用户所在的页，这很麻烦的。还有一种做法是立即跳到该用户的明细页面或修改页面。个人倾向于 进入一个 “增加成功”的提示页面，这样可以明确地提示一上。而且这个页面里还要提供三个按钮： 
   “用户明细查看/修改” -- 好奇心 
   “返回用户列表”  -- 只加一个用户 
  “继续新增用户”   -- 今天上午要连加20个用户 
   3.用户修改成功后，比较土的做法也是回到列表界面，而且也要考虑分页问题。个人倾行于修改后跳到明细界面（当然也可以转到 修改界面 ），同时用红字提示“修改成功”。 
   4.在用户明细/修改界面删除用户后，应该跳到哪里？也可以跳到一个“删除成功”提示页面，并在页面中提供返回列表按钮。

 

---

 

""

在一个项目里，增删查改以后的跳转问题，其实是应该在一定程度上做一个统一的。
一个好的做法是，在增删改操作成功或者失败以后跳转到提示页面，在查成功以后跳转到查询结果页面。
另外，对于增删改，可以用Ajax来进行操作，可以直接在同一个页面上进行提示，用户体验更好。也是一个不错的选择

""