本文介绍了一个食品箱管理系统的实现细节，包括主表与弹出表的设计、JavaScript交互逻辑及后端Controller与Manager层的具体实现。
主表：
<div class="mini-fit">
<div id="datagrid1" url="/box.do?method=list" class="mini-datagrid" style="width:100%;height:100%;" pageSize="10" showPageInfo="true" multiSelect="true" >
<div property="columns">
<div type="indexcolumn">
</div>
<div type="checkcolumn">
</div>
<div field="id" visible="false">
id
</div>
<div headerAlign="center" allowSort="true" renderer="onActionRenderer" width="80px">
操作
</div>
<div field="code" headerAlign="center" allowSort="true" align="right">
编号
</div>
<div field="boxNumber" headerAlign="center" allowSort="true" align="right">
箱体编号
</div>
<div field="typeId" headerAlign="center" allowSort="true" align="left" visible="false">
所属类别
</div>
<div field="typeName" headerAlign="center" allowSort="true" align="left">
所属类别
</div>
<div field="volume" headerAlign="center" allowSort="true" align="right">
体积
</div>
<div field="color" headerAlign="center" allowSort="true" align="left">
颜色
</div>
<div field="remark" headerAlign="center" allowSort="true" align="left">
备注
</div>
<div field="status" headerAlign="center" allowSort="true" align="left" visible="false">
状态id
</div>
<div field="statusName" headerAlign="center" allowSort="true" align="left">
状态
</div>
<div field="empname" headerAlign="center" allowSort="true" align="left">
制表人
</div>
<div field="createTime" headerAlign="center" allowSort="true" dateformat="yyyy-MM-dd HH:mm:ss" align="right">
创建时间
</div>
</div>
</div>弹出表
<!--流转记录--->
<div id="boxView" class="mini-window" style="width:900px; height:350px;" title: "查看食品箱信息">
<div class="mini-panel" title="食品箱信息" iconCls="icon-add" style="width:100%;height:300px;" showToolbar="false" showFooter="false" >
<div class="mini-fit" style="width:100%;height:100%;" >
<div id="datagrid2" class="mini-datagrid" style="width:100%;height:100%;" pageSize="10" showPageInfo="true" multiSelect="true" allowSortColumn="false">
<div property="columns">
<div type="indexcolumn">
</div>
<div field="boxId" headerAlign="center" allowSort="true" align="left" id="boxId">
箱体编号
</div>
<div field="code" headerAlign="center" allowSort="true" align="left" id="boxId">
箱体名称
</div>
<div field="shortName" headerAlign="center" allowSort="true" align="left">
客户
</div>
<div field="createTime" headerAlign="center" allowSort="true" align="right" dateformat="yyyy-MM-dd HH:mm:ss">
发生时间
</div>
<div field="statusId" headerAlign="center" allowSort="true" align="left" id="statusId" renderer="getTypeId3">
状态
</div>
<div field="empname" headerAlign="center" allowSort="true" align="left">
制表人
</div>
</div>
</div>
</div>
</div>
</div>
JS
//流转记录
var boxView = mini.get("boxView");
var grid2 = mini.get("datagrid2");
//查看详情
function onActionRenderer(e) {
var s = ' <a href="javascript:view()">流转记录</a> ';
return s;
}
//流转记录
function view(){
var row = grid.getSelected();
if(row){
grid2.load({id:row.id});
boxView.show();
}else{
mini.alert("请选择一条记录", "系统提示");
}
}controller显示方法
/**
* @title 取食品箱过程记录列表数据
* @author wangyu
* @data 2017-04-17
*/
public ModelAndView list(HttpServletRequest request,
HttpServletResponse response) {
String p = request.getParameter("pageIndex");
String limit = request.getParameter("pageSize");
int toLimit = NumberUtils.toInt(limit, Constants.VALUE_PAGE_SIZE);
int toStart = (NumberUtils.toInt(p, 0) - 1) * toLimit;
String id = request.getParameter("id");
Page page = boxRecordManager.getBoxRecord(toStart, toLimit,id);
JSONObject jo = new JSONObject();
jo.put("total", page.getTotalCount());
jo.put("data", JsonUtil.pageToJson(page, new JsonCallback() {
@Override
public void process(IJsonArray jsonArray, IJsonObject jsonObject,
Object data) {
}
@Override
public String[] getExcludes() {
return null;
}
}));
this.renderText(response, jo.toString());
return null;
}Manager 查询方法
/**
* @title 取食品食品箱过程记录
* @author wangyu
* @date 2017-04-17
* @param id
* 食品箱id
*/
public Page getBoxRecord(int start, int pageSize, String id) {
StringBuffer sb = new StringBuffer();
sb.append(" select bbr.* ,bb.BC_BOX_NUMBER,");
sb.append(" sde1.DICTNAME AS 'STATUS_name',");
sb.append(" KH_SHORT_NAME,");
sb.append(" su.SU_USER_NAME");
sb.append(" FROM base_box_record bbr");
sb.append(" inner join base_box bb on bb.BC_ID = bbr.XL_BOX_ID");
sb.append(" inner join base_customer bc on bc.KH_ID = bbr.XL_CUSTOMER_ID");
sb.append(" inner join sys_dict_entry sde1 on sde1.DICTID=bbr.XL_STATUS_ID and sde1.DICTTYPEID='YW_BOX_STATUS'");
sb.append(" inner join sys_user su on su.ID=bbr.XL_CREATE_USER_ID");
if (id != null && !id.equalsIgnoreCase("")){
sb.append(" and bbr.XL_BOX_ID ='" + id + "'");
}
sb.append(" ORDER BY bbr.XL_CREATE_TIME desc");
Query query = this.getSqlQuery(sb.toString());
query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
Page page = this.pageSqlQuery(query, sb.toString(), start, pageSize,
super.COUNT_MODE, null);
BoxRecordDto boxRecordDto = null;
List<BoxRecordDto> boxDtos = new ArrayList<BoxRecordDto>();
for (Map<String, Object> map : (List<Map<String, Object>>) page
.getData()) {
boxRecordDto = new BoxRecordDto();
boxRecordDto.setId(String.valueOf(map.get("XL_ID")));
boxRecordDto.setBoxId(String.valueOf(map.get("XL_BOX_ID")));
boxRecordDto.setCustomerId(String.valueOf(map.get("XL_CUSTOMER_ID")));
boxRecordDto.setStatus(String.valueOf(map.get("XL_STATUS_ID")));
boxRecordDto.setCreateTime(String.valueOf(map.get("XL_CREATE_TIME")));
boxRecordDto.setCreateUserId(String.valueOf(map.get("XL_CREATE_USER_ID")));
boxRecordDto.setCode(String.valueOf(map.get("BC_BOX_NUMBER")));
boxRecordDto.setStatusName(String.valueOf(map.get("STATUS_name")));
boxRecordDto.setEmpname(String.valueOf(map.get("SU_USER_NAME")));
boxRecordDto.setShortName(String.valueOf(map.get("KH_SHORT_NAME")));
boxDtos.add(boxRecordDto);
}
page.setData(boxDtos);
return page;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
