DWZ (JUI) 教程 DWZ LookUp Suggest 教程
最近有人问 Lookup 和 Suggest 的问题 ,我做了一个小的 Demo 希望给大家有所帮助,我也简单分析一下流程,有时间的话我也简单录个视频,讲一下原理
效果图片
单个查找带回
jsp 代码 lookup.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <h2 class="contentTitle">suggest+lookup</h2>
- <form action="demo/common/ajaxDone.html?navTabId=masterList&callbackType=closeCurrent" method="post" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone)">
- <div class="pageContent">
- <div class="pageFormContent" layoutH="97">
- <dl class="nowrap">
- <dt>用户名称:</dt>
- <dd>
- <input name="test1.id" value="" type="text"/>
- <input class="required" name="test1.name" type="text" postField="name" suggestFields="name"
- suggestUrl="./lookup!suggest.do" lookupGroup="test1"/>
- <span class="info">(suggest)</span>
- </dd>
- </dl>
- <dl class="nowrap">
- <dt>(单个)用户名称:</dt>
- <dd>
- <input name="test2.id" value="" type="text" />
- <input class="required" name="test2.name" type="text" />
- <a class="btnLook" href="./lookup!searchUser.do" warn="用户" lookupGroup="test2">查找带回</a>
- <span class="info">(lookup)</span>
- </dd>
- </dl>
- <div class="divider"></div>
- <dl class="nowrap">
- <dt>(多个)用户名称:</dt>
- <dd>
- <input name="test3.id" value="" type="text" />
- <input class="required" name="test3.name" type="text" />
- <a class="btnLook" href="./lookup!searchUsers.do" warn="用户" lookupGroup="test3">查找带回</a>
- <span class="info">(lookup)</span>
- </dd>
- </dl>
- <div class="divider"></div>
- </div>
- <div class="formBar">
- <ul>
- <li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>
- <li><div class="button"><div class="buttonContent"><button class="close" type="button">关闭</button></div></div></li>
- </ul>
- </div>
- </div>
- </form>
searchUser.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- <form id="pagerForm" method="post" action="user!searchUser.do">
- <input type="hidden" name="status" value="${param.status}">
- <input type="hidden" name="keywords" value="${param.keywords}" />
- <input type="hidden" name="pageNum" value="1" />
- <input type="hidden" name="pages.pageNo" value="${pages.pageNo}" />
- <input type="hidden" name="pages.pageSize" value="${pages.pageSize}" />
- </form>
- <div class="pageHeader">
- <form rel="pagerForm" method="post" action="demo/database/dwzOrgLookup.html" onsubmit="return dwzSearch(this, 'dialog');">
- <div class="searchBar">
- <ul class="searchContent">
- <li>
- <label>用户名称:</label>
- <input class="textInput" name="user.name" value="${user.name}" type="text">
- </li>
- </ul>
- <div class="subBar">
- <ul>
- <li><div class="buttonActive"><div class="buttonContent"><button type="submit">查询</button></div></div></li>
- </ul>
- </div>
- </div>
- </form>
- </div>
- <div class="pageContent">
- <table class="table" layoutH="118" targetType="dialog" width="100%">
- <thead>
- <tr>
- <th orderfield="orgName">序号</th>
- <th orderfield="orgNum">用户名称</th>
- <th orderfield="leader">用户电话</th>
- <th orderfield="creator">请选择</th>
- </tr>
- </thead>
- <tbody>
- <c:forEach var="user" items="${pages.pages}" varStatus="status" >
- <tr target="sid_user" rel="${user.id}">
- <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>
- <td>${user.realName}</td>
- <td>${user.phone}</td>
- <td>
- <a class="btnSelect" href="javascript:$.bringBack({id:'${user.id}', name:'${user.realName}'})" title="查找带回">选择</a>
- </td>
- </tr>
- </c:forEach>
- </tbody>
- </table>
- <div class="panelBar">
- <div class="pages">
- <span>显示</span>
- <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
- <option value="20">20</option>
- <option value="50">50</option>
- <option value="100">100</option>
- <option value="200">200</option>
- </select>
- <span>条,共${pages.count}条</span>
- </div>
- <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>
- </div>
- </div>
searchUsers.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- <form id="pagerForm" method="post" action="user!searchUser.do">
- <input type="hidden" name="status" value="${param.status}">
- <input type="hidden" name="keywords" value="${param.keywords}" />
- <input type="hidden" name="pageNum" value="1" />
- <input type="hidden" name="pages.pageNo" value="${pages.pageNo}" />
- <input type="hidden" name="pages.pageSize" value="${pages.pageSize}" />
- </form>
- <div class="pageHeader">
- <form rel="pagerForm" method="post" action="demo/database/dwzOrgLookup.html" onsubmit="return dwzSearch(this, 'dialog');">
- <div class="searchBar">
- <ul class="searchContent">
- <li>
- <label>用户名称:</label>
- <input class="textInput" name="user.name" value="${user.name}" type="text">
- </li>
- </ul>
- <div class="subBar">
- <ul>
- <li><div class="buttonActive"><div class="buttonContent"><button type="submit">查询</button></div></div></li>
- </ul>
- </div>
- </div>
- </form>
- </div>
- <div class="pageContent">
- <table class="table" layoutH="140" width="100%">
- <thead>
- <tr>
- <th orderfield="orgName">序号</th>
- <th orderfield="orgNum">用户名称</th>
- <th orderfield="leader">用户电话</th>
- <th orderfield="creator">请选择</th>
- </tr>
- </thead>
- <tbody>
- <c:forEach var="user" items="${pages.pages}" varStatus="status" >
- <tr target="sid_user" rel="${user.id}">
- <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>
- <td>${user.realName}</td>
- <td>${user.phone}</td>
- <td>
- <input type="checkbox" name="orgId" value="{id:'${user.id}', name:'${user.realName}'}" />
- </td>
- </tr>
- </c:forEach>
- </tbody>
- </table>
- <div class="panelBar">
- <div class="pages">
- <span>显示</span>
- <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
- <option value="20">20</option>
- <option value="50">50</option>
- <option value="100">100</option>
- <option value="200">200</option>
- </select>
- <span>条,共${pages.count}条</span>
- </div>
- <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>
- </div>
- <div class="formBar">
- <ul>
- <li><div class="buttonActive"><div class="buttonContent"><button type="button" multLookup="orgId" >选择</button></div></div></li>
- <li><div class="button"><div class="buttonContent"><button class="close" type="button">关闭</button></div></div></li>
- </ul>
- </div>
- </div>
suggest.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
- [
- <c:forEach var="u" items="${userList}" varStatus="status" >
- {"id":"${u.id}", "name":"${u.name}" } <c:if test="${!status.last}">,</c:if>
- </c:forEach>
- ]
Action 代码
- package com.web.action;
- import java.util.List;
- import javax.annotation.Resource;
- import org.springframework.context.annotation.Scope;
- import org.springframework.stereotype.Controller;
- import com.dwz.util.Pages;
- import com.web.model.User;
- import com.web.service.UserService;
- @Controller()
- @Scope("prototype")
- public class LookupAction extends BaseAction {
- private String name;
- @Resource
- private UserService userService;
- private List<User> userList;
- private Pages pages = new Pages() ;
- private User user;
- private String orderField;
- private String orderDirection;
- /**
- *用户提示补全
- * @return
- */
- public String suggest(){
- userList = userService.listUser(name);
- return RESULT;
- }
- /**
- * 查询用户(单个)
- * @return
- */
- public String searchUser(){
- pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);
- return RESULT;
- }
- /**
- * 查询用户(多个)
- * @return
- */
- public String searchUsers(){
- pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);
- return RESULT;
- }
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public void setUserService(UserService userService) {
- this.userService = userService;
- }
- public UserService getUserService() {
- return userService;
- }
- public void setUserList(List<User> userList) {
- this.userList = userList;
- }
- public List<User> getUserList() {
- return userList;
- }
- public Pages getPages() {
- return pages;
- }
- public void setPages(Pages pages) {
- this.pages = pages;
- }
- public User getUser() {
- return user;
- }
- public void setUser(User user) {
- this.user = user;
- }
- public String getOrderField() {
- return orderField;
- }
- public void setOrderField(String orderField) {
- this.orderField = orderField;
- }
- public String getOrderDirection() {
- return orderDirection;
- }
- public void setOrderDirection(String orderDirection) {
- this.orderDirection = orderDirection;
- }
- }
service 代码
- package com.web.service.impl;
- import java.util.List;
- import javax.annotation.Resource;
- import org.springframework.stereotype.Service;
- import com.dwz.util.Pages;
- import com.web.dao.UserDao;
- import com.web.model.User;
- import com.web.service.UserService;
- @Service("userService")
- public class UserServiceImpl implements UserService {
- @Resource
- private UserDao userDao;
- @Override
- public User getUser(int id) {
- return userDao.get(id);
- }
- @Override
- public void addUser(User user) {
- userDao.insert(user);
- }
- @Override
- public void updateUser(User user) {
- userDao.update(user);
- }
- @Override
- public void deleteUser(int id) {
- userDao.delete(id);
- }
- @Override
- public void reportUser(User user) {
- userDao.insertOrUpdate(user ,user.getId());
- }
- @Override
- public Pages searchUser(int pageNo ,int pageSize ,User user , String orderField ,String orderDirection){
- String where = " where 1 = 1";
- if(orderField!=null&&!orderField.trim().equals("")){
- if(orderDirection==null||orderDirection.trim().equals("")){
- orderDirection = "asc";
- }
- where +=" order by "+orderField +" "+orderDirection;
- }
- return userDao.listInPages(pageNo, pageSize, where);
- }
- @Override
- public List<User> listUser(String name){
- String where = "";
- if(name!=null&&!"".equals(name)){
- where = " where name like '%"+name+"%' " ;
- }
- return userDao.listQuery(where);
- }
- }
lookupGroup 是一个组的意思,suggest 和 lookup 返回的字段,是根据名字进行查找的。如果指定的 lookupGroup 为 test1,返回的字段是 userName,sex 那么就会超找
name 属性为 test1.userName , test1.sex 进行赋值 一般用的话 一个Model就可以是一个group ,这些东西看看源代码 dwz. database.js
poseField 进行代码提示时 已经输入的字 传到后台 一般进行 like 查找 poseField 设置的字段名称和action接收的属性名一直就行了的一样就可以了
suggestFields 是显示返回的字段
[
- {"id":"${u.id}", "name":"${u.name}" }
返回是一个数组,显示的字段可以是多个 多个的话就 name-name-name 格式
suggestUrl 是提示的后台地址 可以看看我在Action中是怎么写的
查找带回没有什么难的地方,上面说的有些也是通用的
单个返回
- <a class="btnSelect" href="javascript:$.bringBack({id:'${user.id}', name:'${user.realName}'})" title="查找带回">选择</a>
注意一下函数$.bringBack
- <button type="button" multLookup="orgId" >选择</button>
批量带回的格式为 name,name,name,name 逗号间隔方式,我一般在后台进行 手动分隔一下。
转载请标明出处 http://blog.csdn.net/jiweigang1/article/details/7829829