DWZ (JUI) 教程 DWZ LookUp Suggest 教程

DWZ (JUI) 教程 DWZ LookUp Suggest 教程

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

效果图片

单个查找带回

jsp 代码lookup.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<h2class="contentTitle">suggest+lookup</h2>
<formaction="demo/common/ajaxDone.html?navTabId=masterList&callbackType=closeCurrent"method="post"class="pageFormrequired-validate"onsubmit="returnvalidateCallback(this,navTabAjaxDone)">
<divclass="pageContent">
<divclass="pageFormContent"layoutH="97">
<dlclass="nowrap">
<dt>用户名称：</dt>
<dd>
<inputname="test1.id"value=""type="text"/>
<inputclass="required"name="test1.name"type="text"postField="name"suggestFields="name"
suggestUrl="./lookup!suggest.do"lookupGroup="test1"/>
<spanclass="info">(suggest)</span>
</dd>
</dl>

<dlclass="nowrap">
<dt>(单个)用户名称：</dt>
<dd>
<inputname="test2.id"value=""type="text"/>
<inputclass="required"name="test2.name"type="text"/>
<aclass="btnLook"href="./lookup!searchUser.do"warn="用户"lookupGroup="test2">查找带回</a>
<spanclass="info">(lookup)</span>
</dd>
</dl>
<divclass="divider"></div>
<dlclass="nowrap">
<dt>(多个)用户名称：</dt>
<dd>
<inputname="test3.id"value=""type="text"/>
<inputclass="required"name="test3.name"type="text"/>
<aclass="btnLook"href="./lookup!searchUsers.do"warn="用户"lookupGroup="test3">查找带回</a>
<spanclass="info">(lookup)</span>
</dd>
</dl>
<divclass="divider"></div>
</div>
<divclass="formBar">
<ul>
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="submit">保存</button></div></div></li>
<li><divclass="button"><divclass="buttonContent"><buttonclass="close"type="button">关闭</button></div></div></li>
</ul>
</div>
</div>
</form>

searchUser.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>

<formid="pagerForm"method="post"action="user!searchUser.do">
<inputtype="hidden"name="status"value="${param.status}">
<inputtype="hidden"name="keywords"value="${param.keywords}"/>
<inputtype="hidden"name="pageNum"value="1"/>
<inputtype="hidden"name="pages.pageNo"value="${pages.pageNo}"/>
<inputtype="hidden"name="pages.pageSize"value="${pages.pageSize}"/>
</form>

<divclass="pageHeader">
<formrel="pagerForm"method="post"action="demo/database/dwzOrgLookup.html"onsubmit="returndwzSearch(this,'dialog');">
<divclass="searchBar">
<ulclass="searchContent">
<li>
<label>用户名称:</label>
<inputclass="textInput"name="user.name"value="${user.name}"type="text">
</li>
</ul>
<divclass="subBar">
<ul>
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="submit">查询</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
<divclass="pageContent">

<tableclass="table"layoutH="118"targetType="dialog"width="100%">
<thead>
<tr>
<thorderfield="orgName">序号</th>
<thorderfield="orgNum">用户名称</th>
<thorderfield="leader">用户电话</th>
<thorderfield="creator">请选择</th>
</tr>
</thead>
<tbody>
<c:forEachvar="user"items="${pages.pages}"varStatus="status">
<trtarget="sid_user"rel="${user.id}">
<td>${status.count+(pages.pageNo-1)*pages.pageSize}</td>
<td>${user.realName}</td>
<td>${user.phone}</td>
<td>
<aclass="btnSelect"href="javascript:$.bringBack({id:'${user.id}',name:'${user.realName}'})"title="查找带回">选择</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>

<divclass="panelBar">
<divclass="pages">
<span>显示</span>
<selectclass="combox"name="numPerPage"onchange="navTabPageBreak({numPerPage:this.value})">
<optionvalue="20">20</option>
<optionvalue="50">50</option>
<optionvalue="100">100</option>
<optionvalue="200">200</option>
</select>
<span>条，共${pages.count}条</span>
</div>

<divclass="pagination"targetType="navTab"totalCount="${pages.count}"numPerPage="${pages.pageSize}"pageNumShown="10"currentPage="${pages.pageNo}"></div>
</div>
</div>

searchUsers.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>

<formid="pagerForm"method="post"action="user!searchUser.do">
<inputtype="hidden"name="status"value="${param.status}">
<inputtype="hidden"name="keywords"value="${param.keywords}"/>
<inputtype="hidden"name="pageNum"value="1"/>
<inputtype="hidden"name="pages.pageNo"value="${pages.pageNo}"/>
<inputtype="hidden"name="pages.pageSize"value="${pages.pageSize}"/>
</form>

<divclass="pageHeader">
<formrel="pagerForm"method="post"action="demo/database/dwzOrgLookup.html"onsubmit="returndwzSearch(this,'dialog');">
<divclass="searchBar">
<ulclass="searchContent">
<li>
<label>用户名称:</label>
<inputclass="textInput"name="user.name"value="${user.name}"type="text">
</li>
</ul>
<divclass="subBar">
<ul>
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="submit">查询</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
<divclass="pageContent">

<tableclass="table"layoutH="140"width="100%">
<thead>
<tr>
<thorderfield="orgName">序号</th>
<thorderfield="orgNum">用户名称</th>
<thorderfield="leader">用户电话</th>
<thorderfield="creator">请选择</th>
</tr>
</thead>
<tbody>
<c:forEachvar="user"items="${pages.pages}"varStatus="status">
<trtarget="sid_user"rel="${user.id}">
<td>${status.count+(pages.pageNo-1)*pages.pageSize}</td>
<td>${user.realName}</td>
<td>${user.phone}</td>
<td>
<inputtype="checkbox"name="orgId"value="{id:'${user.id}',name:'${user.realName}'}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<divclass="panelBar">
<divclass="pages">
<span>显示</span>
<selectclass="combox"name="numPerPage"onchange="navTabPageBreak({numPerPage:this.value})">
<optionvalue="20">20</option>
<optionvalue="50">50</option>
<optionvalue="100">100</option>
<optionvalue="200">200</option>
</select>
<span>条，共${pages.count}条</span>
</div>

<divclass="pagination"targetType="navTab"totalCount="${pages.count}"numPerPage="${pages.pageSize}"pageNumShown="10"currentPage="${pages.pageNo}"></div>
</div>
<divclass="formBar">
<ul>
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="button"multLookup="orgId">选择</button></div></div></li>
<li><divclass="button"><divclass="buttonContent"><buttonclass="close"type="button">关闭</button></div></div></li>
</ul>
</div>
</div>

suggest.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
[
<c:forEachvar="u"items="${userList}"varStatus="status">
{"id":"${u.id}","name":"${u.name}"}<c:iftest="${!status.last}">,</c:if>
</c:forEach>
]

Action 代码

packagecom.web.action;

importjava.util.List;

importjavax.annotation.Resource;

importorg.springframework.context.annotation.Scope;
importorg.springframework.stereotype.Controller;

importcom.dwz.util.Pages;
importcom.web.model.User;
importcom.web.service.UserService;

@Controller()
@Scope("prototype")
publicclassLookupActionextendsBaseAction{

privateStringname;
@Resource
privateUserServiceuserService;
privateList<User>userList;
privatePagespages=newPages();
privateUseruser;
privateStringorderField;
privateStringorderDirection;


/**
*用户提示补全
*@return
*/
publicStringsuggest(){
userList=userService.listUser(name);
returnRESULT;
}

/**
*查询用户(单个)
*@return
*/

publicStringsearchUser(){
pages=userService.searchUser(pages.getPageNo(),pages.getPageSize(),user,orderField,orderDirection);
returnRESULT;
}

/**
*查询用户（多个）
*@return
*/

publicStringsearchUsers(){
pages=userService.searchUser(pages.getPageNo(),pages.getPageSize(),user,orderField,orderDirection);
returnRESULT;
}


publicStringgetName(){
returnname;
}

publicvoidsetName(Stringname){
this.name=name;
}

publicvoidsetUserService(UserServiceuserService){
this.userService=userService;
}

publicUserServicegetUserService(){
returnuserService;
}

publicvoidsetUserList(List<User>userList){
this.userList=userList;
}

publicList<User>getUserList(){
returnuserList;
}

publicPagesgetPages(){
returnpages;
}

publicvoidsetPages(Pagespages){
this.pages=pages;
}

publicUsergetUser(){
returnuser;
}

publicvoidsetUser(Useruser){
this.user=user;
}

publicStringgetOrderField(){
returnorderField;
}

publicvoidsetOrderField(StringorderField){
this.orderField=orderField;
}

publicStringgetOrderDirection(){
returnorderDirection;
}

publicvoidsetOrderDirection(StringorderDirection){
this.orderDirection=orderDirection;
}



}

service 代码

packagecom.web.service.impl;

importjava.util.List;

importjavax.annotation.Resource;

importorg.springframework.stereotype.Service;

importcom.dwz.util.Pages;
importcom.web.dao.UserDao;
importcom.web.model.User;
importcom.web.service.UserService;


@Service("userService")
publicclassUserServiceImplimplementsUserService{

@Resource
privateUserDaouserDao;


@Override
publicUsergetUser(intid){
returnuserDao.get(id);
}

@Override
publicvoidaddUser(Useruser){
userDao.insert(user);
}

@Override
publicvoidupdateUser(Useruser){
userDao.update(user);
}

@Override
publicvoiddeleteUser(intid){
userDao.delete(id);
}

@Override
publicvoidreportUser(Useruser){
userDao.insertOrUpdate(user,user.getId());
}

@Override
publicPagessearchUser(intpageNo,intpageSize,Useruser,StringorderField,StringorderDirection){
Stringwhere="where1=1";
if(orderField!=null&&!orderField.trim().equals("")){
if(orderDirection==null||orderDirection.trim().equals("")){
orderDirection="asc";
}

where+="orderby"+orderField+""+orderDirection;
}
returnuserDao.listInPages(pageNo,pageSize,where);
}

@Override
publicList<User>listUser(Stringname){
Stringwhere="";
if(name!=null&&!"".equals(name)){
where="wherenamelike'%"+name+"%'";
}
returnuserDao.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中是怎么写的

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

单个返回

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

注意一下函数$.bringBack

<buttontype="button"multLookup="orgId">选择</button>

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

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

转载请标明出处http://blog.csdn.net/jiweigang1/article/details/7829829