DWZ (JUI) 教程 DWZ LookUp Suggest 教程

DWZ (JUI) 教程 DWZ LookUp Suggest  教程

最近有人问 Lookup 和 Suggest 的问题 ，我做了一个小的 Demo 希望给大家有所帮助，我也简单分析一下流程，有时间的话我也简单录个视频，讲一下原理

效果图片

单个查找带回

jsp 代码 lookup.jsp

[html]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <h2 class="contentTitle">suggest+lookup</h2>  
3. <form action="demo/common/ajaxDone.html?navTabId=masterList&callbackType=closeCurrent" method="post" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone)">  
4. <div class="pageContent">  
5.     <div class="pageFormContent" layoutH="97">  
6.         <dl class="nowrap">  
7.             <dt>用户名称：</dt>  
8.             <dd>  
9.                 <input name="test1.id" value="" type="text"/>  
10.                 <input class="required" name="test1.name" type="text" postField="name" suggestFields="name"   
11.                     suggestUrl="./lookup!suggest.do" lookupGroup="test1"/>     
12.                 <span class="info">(suggest)</span>  
13.             </dd>  
14.         </dl>  
15.   
16.         <dl class="nowrap">  
17.             <dt>(单个)用户名称：</dt>  
18.             <dd>  
19.                 <input name="test2.id" value="" type="text" />  
20.                 <input class="required" name="test2.name" type="text" />  
21.                 <a class="btnLook" href="./lookup!searchUser.do" warn="用户" lookupGroup="test2">查找带回</a>       
22.                 <span class="info">(lookup)</span>  
23.             </dd>  
24.         </dl>  
25.         <div class="divider"></div>  
26.         <dl class="nowrap">  
27.             <dt>(多个)用户名称：</dt>  
28.             <dd>  
29.                 <input name="test3.id" value="" type="text" />  
30.                 <input class="required" name="test3.name" type="text" />  
31.                 <a class="btnLook" href="./lookup!searchUsers.do" warn="用户" lookupGroup="test3">查找带回</a>          
32.                 <span class="info">(lookup)</span>  
33.             </dd>  
34.         </dl>  
35.         <div class="divider"></div>  
36.     </div>  
37.     <div class="formBar">  
38.         <ul>  
39.             <li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>  
40.             <li><div class="button"><div class="buttonContent"><button class="close" type="button">关闭</button></div></div></li>  
41.         </ul>  
42.     </div>  
43. </div>  
44. </form>  

searchUser.jsp

[html]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
3.   
4. <form id="pagerForm" method="post" action="user!searchUser.do">  
5.     <input type="hidden" name="status" value="${param.status}">  
6.     <input type="hidden" name="keywords" value="${param.keywords}" />  
7.     <input type="hidden" name="pageNum" value="1" />  
8.     <input type="hidden" name="pages.pageNo" value="${pages.pageNo}" />  
9.     <input type="hidden" name="pages.pageSize" value="${pages.pageSize}" />  
10. </form>  
11.   
12. <div class="pageHeader">  
13.     <form rel="pagerForm" method="post" action="demo/database/dwzOrgLookup.html" onsubmit="return dwzSearch(this, 'dialog');">  
14.     <div class="searchBar">  
15.         <ul class="searchContent">  
16.             <li>  
17.                 <label>用户名称:</label>  
18.                 <input class="textInput" name="user.name" value="${user.name}" type="text">  
19.             </li>     
20.         </ul>  
21.         <div class="subBar">  
22.             <ul>  
23.                 <li><div class="buttonActive"><div class="buttonContent"><button type="submit">查询</button></div></div></li>  
24.             </ul>  
25.         </div>  
26.     </div>  
27.     </form>  
28. </div>  
29. <div class="pageContent">  
30.   
31.     <table class="table" layoutH="118" targetType="dialog" width="100%">  
32.         <thead>  
33.             <tr>  
34.                 <th orderfield="orgName">序号</th>  
35.                 <th orderfield="orgNum">用户名称</th>  
36.                 <th orderfield="leader">用户电话</th>  
37.                 <th orderfield="creator">请选择</th>  
38.             </tr>  
39.         </thead>  
40.         <tbody>  
41.             <c:forEach var="user" items="${pages.pages}" varStatus="status" >  
42.                 <tr target="sid_user" rel="${user.id}">  
43.                     <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>  
44.                     <td>${user.realName}</td>  
45.                     <td>${user.phone}</td>  
46.                     <td>  
47.                         <a class="btnSelect" href="javascript:$.bringBack({id:'${user.id}', name:'${user.realName}'})" title="查找带回">选择</a>  
48.                     </td>  
49.                 </tr>  
50.             </c:forEach>  
51.         </tbody>  
52.     </table>  
53.   
54.     <div class="panelBar">  
55.         <div class="pages">  
56.             <span>显示</span>  
57.             <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">  
58.                 <option value="20">20</option>  
59.                 <option value="50">50</option>  
60.                 <option value="100">100</option>  
61.                 <option value="200">200</option>  
62.             </select>  
63.             <span>条，共${pages.count}条</span>  
64.         </div>  
65.           
66.         <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>  
67.     </div>  
68. </div>  

searchUsers.jsp

[html]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
3.   
4. <form id="pagerForm" method="post" action="user!searchUser.do">  
5.     <input type="hidden" name="status" value="${param.status}">  
6.     <input type="hidden" name="keywords" value="${param.keywords}" />  
7.     <input type="hidden" name="pageNum" value="1" />  
8.     <input type="hidden" name="pages.pageNo" value="${pages.pageNo}" />  
9.     <input type="hidden" name="pages.pageSize" value="${pages.pageSize}" />  
10. </form>  
11.   
12. <div class="pageHeader">  
13.     <form rel="pagerForm" method="post" action="demo/database/dwzOrgLookup.html" onsubmit="return dwzSearch(this, 'dialog');">  
14.     <div class="searchBar">  
15.         <ul class="searchContent">  
16.             <li>  
17.                 <label>用户名称:</label>  
18.                 <input class="textInput" name="user.name" value="${user.name}" type="text">  
19.             </li>     
20.         </ul>  
21.         <div class="subBar">  
22.             <ul>  
23.                 <li><div class="buttonActive"><div class="buttonContent"><button type="submit">查询</button></div></div></li>  
24.             </ul>  
25.         </div>  
26.     </div>  
27.     </form>  
28. </div>  
29. <div class="pageContent">  
30.   
31.     <table class="table" layoutH="140"  width="100%">  
32.         <thead>  
33.             <tr>  
34.                 <th orderfield="orgName">序号</th>  
35.                 <th orderfield="orgNum">用户名称</th>  
36.                 <th orderfield="leader">用户电话</th>  
37.                 <th orderfield="creator">请选择</th>  
38.             </tr>  
39.         </thead>  
40.         <tbody>  
41.             <c:forEach var="user" items="${pages.pages}" varStatus="status" >  
42.                 <tr target="sid_user" rel="${user.id}">  
43.                     <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>  
44.                     <td>${user.realName}</td>  
45.                     <td>${user.phone}</td>  
46.                     <td>  
47.                         <input type="checkbox" name="orgId" value="{id:'${user.id}', name:'${user.realName}'}" />  
48.                     </td>  
49.                 </tr>  
50.             </c:forEach>  
51.         </tbody>  
52.     </table>  
53.     <div class="panelBar">  
54.         <div class="pages">  
55.             <span>显示</span>  
56.             <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">  
57.                 <option value="20">20</option>  
58.                 <option value="50">50</option>  
59.                 <option value="100">100</option>  
60.                 <option value="200">200</option>  
61.             </select>  
62.             <span>条，共${pages.count}条</span>  
63.         </div>  
64.           
65.         <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>  
66.     </div>  
67.     <div class="formBar">  
68.         <ul>  
69.             <li><div class="buttonActive"><div class="buttonContent"><button type="button" multLookup="orgId" >选择</button></div></div></li>  
70.             <li><div class="button"><div class="buttonContent"><button class="close" type="button">关闭</button></div></div></li>  
71.         </ul>  
72.     </div>  
73. </div>  

suggest.jsp

[html]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
3. [  
4. <c:forEach var="u" items="${userList}" varStatus="status" >   
5.     {"id":"${u.id}", "name":"${u.name}" } <c:if test="${!status.last}">,</c:if>   
6. </c:forEach>  
7. ]  

Action 代码

[java]  view plain copy

1. package com.web.action;  
2.   
3. import java.util.List;  
4.   
5. import javax.annotation.Resource;  
6.   
7. import org.springframework.context.annotation.Scope;  
8. import org.springframework.stereotype.Controller;  
9.   
10. import com.dwz.util.Pages;  
11. import com.web.model.User;  
12. import com.web.service.UserService;  
13.   
14. @Controller()  
15. @Scope("prototype")  
16. public class LookupAction extends BaseAction {  
17.   
18.         private String      name;  
19.         @Resource  
20.         private UserService userService;  
21.         private List<User>  userList;  
22.         private Pages       pages = new Pages() ;  
23.         private User        user;  
24.         private String      orderField;  
25.         private String      orderDirection;  
26.           
27.           
28.         /** 
29.          *用户提示补全     
30.          * @return 
31.          */  
32.         public String suggest(){  
33.                 userList = userService.listUser(name);  
34.                 return RESULT;        
35.         }  
36.           
37.         /** 
38.          * 查询用户(单个) 
39.          * @return 
40.          */  
41.           
42.         public String searchUser(){  
43.             pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);  
44.             return RESULT;  
45.         }  
46.           
47.         /** 
48.          * 查询用户（多个） 
49.          * @return 
50.          */  
51.           
52.         public String searchUsers(){  
53.             pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);  
54.             return RESULT;  
55.         }  
56.           
57.   
58.         public String getName() {  
59.             return name;  
60.         }  
61.   
62.         public void setName(String name) {  
63.             this.name = name;  
64.         }  
65.   
66.         public void setUserService(UserService userService) {  
67.             this.userService = userService;  
68.         }  
69.   
70.         public UserService getUserService() {  
71.             return userService;  
72.         }  
73.   
74.         public void setUserList(List<User> userList) {  
75.             this.userList = userList;  
76.         }  
77.   
78.         public List<User> getUserList() {  
79.             return userList;  
80.         }  
81.   
82.         public Pages getPages() {  
83.             return pages;  
84.         }  
85.   
86.         public void setPages(Pages pages) {  
87.             this.pages = pages;  
88.         }  
89.   
90.         public User getUser() {  
91.             return user;  
92.         }  
93.   
94.         public void setUser(User user) {  
95.             this.user = user;  
96.         }  
97.   
98.         public String getOrderField() {  
99.             return orderField;  
100.         }  
101.   
102.         public void setOrderField(String orderField) {  
103.             this.orderField = orderField;  
104.         }  
105.   
106.         public String getOrderDirection() {  
107.             return orderDirection;  
108.         }  
109.   
110.         public void setOrderDirection(String orderDirection) {  
111.             this.orderDirection = orderDirection;  
112.         }  
113.           
114.           
115.           
116. }  

service 代码

[java]  view plain copy

1. package com.web.service.impl;  
2.   
3. import java.util.List;  
4.   
5. import javax.annotation.Resource;  
6.   
7. import org.springframework.stereotype.Service;  
8.   
9. import com.dwz.util.Pages;  
10. import com.web.dao.UserDao;  
11. import com.web.model.User;  
12. import com.web.service.UserService;  
13.   
14.   
15. @Service("userService")  
16. public class UserServiceImpl implements UserService {  
17.       
18.     @Resource  
19.     private UserDao userDao;  
20.       
21.       
22.     @Override  
23.     public User getUser(int id) {  
24.         return userDao.get(id);  
25.     }  
26.       
27.     @Override  
28.     public void addUser(User user) {  
29.          userDao.insert(user);  
30.     }  
31.       
32.     @Override  
33.     public void updateUser(User user) {  
34.          userDao.update(user);  
35.     }  
36.       
37.     @Override  
38.     public void deleteUser(int id) {  
39.          userDao.delete(id);  
40.     }  
41.       
42.     @Override  
43.     public void reportUser(User user) {  
44.          userDao.insertOrUpdate(user ,user.getId());  
45.     }  
46.   
47.     @Override  
48.     public Pages searchUser(int pageNo ,int pageSize ,User user , String orderField ,String orderDirection){  
49.            String where = " where 1 = 1";  
50.            if(orderField!=null&&!orderField.trim().equals("")){  
51.                if(orderDirection==null||orderDirection.trim().equals("")){  
52.                    orderDirection = "asc";  
53.                }  
54.                  
55.                where +=" order by "+orderField +" "+orderDirection;  
56.            }  
57.            return userDao.listInPages(pageNo, pageSize, where);  
58.     }  
59.       
60.     @Override  
61.     public List<User> listUser(String name){  
62.         String where = "";  
63.         if(name!=null&&!"".equals(name)){  
64.             where = " where name like '%"+name+"%' " ;  
65.         }  
66.         return userDao.listQuery(where);  
67.     }  
68.               
69. }  

有几个注意的地方

lookupGroup  是一个组的意思，suggest 和 lookup 返回的字段，是根据名字进行查找的。如果指定的 lookupGroup 为 test1，返回的字段是 userName，sex 那么就会超找

name 属性为  test1.userName , test1.sex 进行赋值  一般用的话 一个Model就可以是一个group ,这些东西看看源代码              dwz. database.js  

poseField   进行代码提示时 已经输入的字 传到后台 一般进行 like 查找  poseField 设置的字段名称和action接收的属性名一直就行了的一样就可以了

suggestFields 是显示返回的字段

[

[html]  view plain copy

1. {"id":"${u.id}", "name":"${u.name}" }  

]

返回是一个数组，显示的字段可以是多个  多个的话就  name-name-name 格式

suggestUrl 是提示的后台地址 可以看看我在Action中是怎么写的

查找带回没有什么难的地方，上面说的有些也是通用的

单个返回

[html]  view plain copy

1. <a class="btnSelect" href="javascript:$.bringBack({id:'${user.id}', name:'${user.realName}'})" title="查找带回">选择</a>  

注意一下函数$.bringBack

[html]  view plain copy

1.   

[html]  view plain copy

1. <button type="button" multLookup="orgId" >选择</button>  

批量带回的话注意上面的  multLookup 和 checkbox name 设置的一致就行了

批量带回的格式为 name,name,name,name 逗号间隔方式，我一般在后台进行 手动分隔一下。