[前端发送ajax, 前端遍历json数据到datagrid列表]
1. 向后台发送AJAX请求
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.contentFontSize {
font-size: 15px;
}
.easyui-textbox {
width: 180px;
}
#titleDiv {
font-size: 15px;
}
.pprListTitle td {
font-size: 15px;
font-weight: bold;
}
.pprListContent td {
font-size: 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="${staticPath }/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${staticPath }/static/easyui/themes/icon.css">
<script type="text/javascript" src="${staticPath }/static/ajaxfileupload.js" charset="utf-8"></script>
<script type="application/javascript">
function calcProductRate() {
var model = $("#model").val();
var len = $("#len").val();
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var collTimeStart = $("#collTimeStart").val();
var url = '${path}/plan/calculate';
var args = {
"model": model,
"len": len,
"startTime": startTime,
"endTime": endTime,
"collTimeStart": collTimeStart,
"time": new Date()
};
$.post(url, args, function(data) {
if (data != null && data != '') {
var jsonObj = eval("("+data+")");
$("#planProductRate").html(jsonObj.realCountSum);
$("#dataGrid").datagrid({
width: 1325,
// 如果不发送AJAX请求, 就在这里定义路径和方法
//url: 'calculate',
//method: 'POST',
title: '生产明细表',
striped: true,
fitColumns: true,
singleSelect: false,
rownumbers: true,
pagination: false,
singleSelect:true,
collapsible:true,
nowrap: false,
pageSize: 10,
pageList: [10, 20, 30],
showFooter: true,
/* 如果不发送AJAX请求, 就在这里向后台传参
queryParams: {
'model': model,
'len': len,
'startTime': startTime,
'endTime': endTime,
'collTimeStart': collTimeStart
}, */
columns: [[
{ field: 'moCodeHand', title: 'moCodeHand', width: 60, align: 'left'},
{ field: 'model', title: 'model', width: 60, align: 'left' },
{ field: 'planQty', title: 'planQty', width: 60, align: 'left' },
{ field: 'loadCount', title: 'loadCount', sortable:true, width: 60, align: 'left' },
{ field: 'realCount', title: 'realCount', sortable:true, width: 60, align: 'left' },
{ field: 'startTime', title: 'startTime', sortable:true, width: 100, align: 'left' },
{ field: 'endTime', title: 'endTime', sortable:true, width: 100, align: 'left' },
{ field: 'collTime', title: 'collTime', sortable:true, width: 100, align: 'left' },
{ field: 'equiCode', title: 'equiCode', sortable:true, width: 170, align: 'left' }
]],
data: jsonObj.rows
});
} else {
alert("操作失败!");
}
});
}
</script>
</head>
<body>
<font style="font-size: 25px;">统计生产完工率</font>
<a href="javascript:void(0);" id="refreshBtn" class="easyui-linkbutton" onclick="calcProductRate();" data-options="iconCls:'icon-search'" style="width:70px; margin-left: 300px;">刷新</a>
<hr>
<div id="titleDiv">
生产机型:
<input type="text" name="model" id="model" value="C8S" class="easyui-textbox"/><br><br>
统计周期:
<input type="text" name="len" id="len" value="2" class="easyui-textbox"/> 小时<br><br>
统计开始:
<input type="text" name="collTimeStart" id="collTimeStart" value="2017-06-03 08:00:00.000" class="easyui-textbox"/> (默认为当天8点整)<br><br>
开始时间:
<input type="text" name="startTime" id="startTime" value="2017-06-03 08:00:00.000" class="easyui-textbox"/> (默认为当天8点整)<br><br>
结束时间:
<input type="text" name="endTime" id="endTime" value="2017-06-03 22:00:00.000" class="easyui-textbox"/> (默认为当天22点整)
</div>
<br><br>
<font style="font-size: 25px;">生产完工率: <span id="planProductRate" style="font-size: 25px;"></span></font>
<hr>
<div id="dataGrid"/>
</body>
</html>
2. 后台Controller
@Controller
@RequestMapping("/plan")
public class PlanController extends BaseController {
@Autowired
private IPlanService planService;
@PostMapping("/calculate")
@ResponseBody
public Object calculate(HttpServletRequest request, PlanProductRate planProductRate, HttpServletResponse response) {
String modelInput = planProductRate.getModel();
String startTimeInput = planProductRate.getStartTime();
String endTimeInput = planProductRate.getEndTime();
String collTimeStartInput = planProductRate.getCollTimeStart();
Integer lenInput = planProductRate.getLen();
JSONObject json = new JSONObject();
List<PlanProductRate> pprList = null;
String realCountSum = "";
if ( !"".equals(modelInput) &&
!"".equals(startTimeInput) &&
!"".equals(endTimeInput) &&
!"".equals(collTimeStartInput) &&
lenInput != 0
) {
PlanProductRate pprCondiction = new PlanProductRate();
pprCondiction.setModel(modelInput);
pprCondiction.setStartTime(startTimeInput);
pprCondiction.setEndTime(endTimeInput);
pprCondiction.setCollTimeStart(collTimeStartInput);
pprCondiction.setLen(lenInput);
try {
pprList = planService.calculatePlanProductDetail(pprCondiction);
if (pprList != null && pprList.size() > 0) {
System.out.println("============================返回数: " + pprList.size());
System.out.println("============================生产明细: ");
json.accumulate("total", pprList.size());
for (PlanProductRate ppr : pprList) {
JSONObject jsonObj = JSONObject.fromBean(ppr);
System.out.println(jsonObj.toString());
json.accumulate("rows", jsonObj.toString());
}
realCountSum = this.calcRate(pprList);
json.accumulate("realCountSum", realCountSum);
//request.setAttribute("realCountSum", realCountSum);
}
} catch (Exception e) {
e.printStackTrace();
}
}
System.out.println("============================向客户端返回的数据: ");
System.out.println(json.toString());
//ModelAndView mv = new ModelAndView();
//mv.addObject("planProductRateList", pprList);
//mv.addObject("realCountSum", realCountSum);
//mv.setViewName("goupload");
//return mv;
return json.toString();
}
}
3. 中间层省略掉, 这是Mapper.xml
<!-- 计算生产达成率 -->
<select id="calculatePlanProductDetail" parameterType="com.wangzhixuan.model.vo.PlanProductRate" resultType="com.wangzhixuan.model.vo.PlanProductRate">
SELECT
p.MoCodeHand AS moCodeHand, p.Model AS model, p.PlanQty AS planQty, m.LoadCount AS loadCount, m.RealCount AS realCount,
p.StartTime AS startTime, p.EndTime AS endTime, e.EquiCode AS equiCode, m.CollTime AS collTime
FROM
[sMes].[dbo].[PlanInfo] p, [sMes].[dbo].[EquiInfo] e, [sMes].[dbo].[MachineNum] m
WHERE p.Model = e.Model
AND e.EquiCode = m.EquiCode
AND m.RealCount > 0
<if test="model != null and model != ''">
AND p.Model = #{model}
</if>
<if test="startTime != null and startTime != '' and endTime != null and endTime != ''">
<![CDATA[ AND p.StartTime >= #{startTime} AND p.EndTime <= #{endTime} ]]>
</if>
<if test="collTimeStart != null and collTimeStart != '' and len != null and len != ''">
AND m.CollTime BETWEEN #{collTimeStart} AND DATEADD(HOUR, #{len}, #{collTimeStart})
</if>
ORDER BY m.LoadCount
</select>
4. 结果:
浙公网安备 33010602011771号