版权声明：原创不易，转载请注明出处~ https://blog.csdn.net/qq_34266804/article/details/88415106
第一步：JSP+JS
对应的图片展示：
<tr>
<td width="5%" style="font-size:20px">在线：</td>
<td width="20%" style="font-size:20px"><a href = "javascript:void(0)"
onclick="online()">${onlineSum}</a></td>
<td width="15%" style="font-size:20px">离线：</td>
<td width="15%" style="font-size:20px"><a href = "javascript:void(0)"
onclick="offline()">${offlineSum}</a></td>
<td width="15%" style="font-size:20px">告警：</td>
<td width="15%" style="font-size:20px"><a href = "javascript:void(0)"
onclick="alarm()">${alarmSum}</a></td>
</tr>function online() {
quiDialog.open({
URL : "${basePath}terwarning/terminal/terminalList.view?type=1",
Title : "在线",
Width : 1000,
Height : 500
});
}
function offline() {
quiDialog.open({
URL : "${basePath}terwarning/terminal/terminalList.view?type=2",
Title : "离线",
Width : 1000,
Height : 500
});
}
function alarm() {
quiDialog.open({
URL : "${basePath}terwarning/terminal/terminalList.view?type=3",
Title : "告警",
Width : 1000,
Height : 500
});
}
由JS跳转到action中。
第二步：action+jsp跳转
根据上面的URL跳转到指定的action中。然后将携带的type参数放进request作用域中，然后return到相应的JSP界面中。
对应的图片展示：
Action代码：
/**
* 终端信息 主列表跳转
*
* @return
* @throws Exception
*/
@RequestMapping("terminalList.view")
public String terminalList(String type,HttpServletRequest request) {
// HttpSession session = request.getSession();
// session.setAttribute("type",type);
request.setAttribute("type", type);
return "terwarning/terminal/terminalNumList";
}图片展示：
JSP代码：
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/views/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>终端信息</title>
<%@ include file="/WEB-INF/views/common/refOutResource.jsp"%>
<!--数据表格start-->
<script src="${basePath }libs/js/table/quiGrid.js"
type="text/javascript"></script>
<!--数据表格end-->
<!--表单异步提交start-->
<script src="${basePath }libs/js/form/form.js" type="text/javascript"></script>
<!--表单异步提交end-->
<!-- 树组件start -->
<script type="text/javascript"
src="${basePath}libs/js/tree/ztree/ztree.js"></script>
<link type="text/css" rel="stylesheet"
href="${basePath}libs/js/tree/ztree/ztree.css"></link>
<!-- 树组件end -->
<!-- 树形下拉框start -->
<script type="text/javascript"
src="${basePath}libs/js/form/selectTree.js"></script>
<!-- 树形下拉框end -->
</head>
<body>
<input type="hidden" value="${type}" id="type" name="type" />
<div class="padding_right5">
<div id="dataBasic"></div>
</div>
<script type="text/javascript">
//grid
var grid = null;
function initComplete() {
var type = document.getElementById("type").value;
grid = $("#dataBasic")
.quiGrid({ columns : [{display : '所属组织',name : 'orgData.name',align : 'left',width : "10%",type : "orgFields"},
{display : '设备负责人',name : 'masterName',align : 'left',width : "10%",type : "orgFields"},
{display : '终端IP',name : 'ip',align : 'left',width : "15%"},
{
display : 'MAC地址',
name : 'mac',
align : 'left',
width : "20%"
},
{
display : '硬盘序列号',
name : 'hardDisk',
align : 'left',
width : "15%"
},
{
display : 'CPU序列号',
name : 'cpu',
align : 'left',
width : "10%"
},
{
display : '主机名',
name : 'hostName',
align : 'left',
width : "10%"
},
{
display : '状态',
isAllowHide : false,
align : 'center',
width : "10%",
render : function(rowdata,
rowindex, value, column) {
var value = rowdata.type;
if (value == '1')
return '<font color="green">在线</fon>';
else if (value == '2')
return '离线';
else if (value == '3')
return '<font color="red">告警</fon>';
}
},
],
url :'${basePath}terwarning/terminal/list.json?stasus=1&type=${type}',
sortOrder : 'desc',
rownumbers : true,
checkbox : false,
height : '100%',
width : "100%",
pageSize : 10,
pageSizeOptions : [ 10, 15, 20, 30, 40, 50 ],
percentWidthMode : true
});
//监听查询框的回车事件
$(".searchInput").keydown(function(event) {
if (event.keyCode == 13) {
searchHandler();
}
});
$("#searchPanel").bind("stateChange", function(e, state) {
grid.resetHeight();
});
}
function handleResult(result) {
if (result.operFlag == 'S') {
quiDialog.alert(result.message, function() {
grid.loadData();
});
} else {
quiDialog.alert(result.message);
}
}
//刷新表格数据并重置排序和页数
function refresh(isUpdate) {
if (!isUpdate) {
//重置排序
grid.options.sortName = 'id';
grid.options.sortOrder = "asc";
//页号重置为1
grid.setNewPage(1);
}
grid.loadData();
}
//新增
function addUnit() {
quiDialog.open({
ID : "distribution",
URL : "${basePath}terwarning/terminal/addOrUpdate.save",
Title : "添加",
Width : 500,
Height : 270
});
}
function excelAdd() {
quiDialog.open({
URL : "${basePath}terwarning/terminal/excelAdd.view",
Title : "EXCEL新增",
Width : 500,
Height : 270
});
}
function excelDownload() {
window.open("${basePath}terwarning/terminal/downloadExcle.json")
}
//查看
function onView(id) {
quiDialog.open({
URL : "${basePath}terwarning/terminal/getView.view?id=" + id,
Title : "查看",
Width : 700,
Height : 240
});
}
//处理
function onHandle(id) {
quiDialog.confirm("确定要处理该告警记录吗？", function() {
$.post("${basePath}terwarning/terminal/doHandleObj.save?id="
+ id, {
"id" : id
}, function(result) {
handleResult(result);
}, "json");
/* quiDialog.open({
URL:"${basePath}terwarning/terminal/handle.save?id="+id,
Title:"处理",Width:500,Height:270}); */
});
}
//修改
function onEdit(id) {
quiDialog.open({
URL : "${basePath}terwarning/terminal/addOrUpdate.save?id="
+ id,
Title : "修改",
Width : 500,
Height : 270
});
}
//删除
function onDelete(id) {
quiDialog.confirm("确定要删除该记录吗？", function() {
$.post("${basePath}terwarning/terminal/deleteObj.delete?id="
+ id, {
"id" : id
}, function(result) {
handleResult(result);
}, "json");
});
}
//查询
function searchHandler() {
var query = $("#queryForm").formToArray();
//alert(JSON.stringify(query))
grid.setOptions({
params : query
});
//页号重置为1
grid.setNewPage(1);
grid.loadData();//加载数据
}
//调试查询
function timingQuery() {
var query = $("#queryForm").formToArray();
//alert(JSON.stringify(query))
grid.setOptions({
params : query
});
//页号重置为1
grid.loadData();//加载数据
alert(11111111111)
}
//重置查询
function resetSearch() {
$("#queryForm")[0].reset();
$("#queryForm select").resetValue();
$("#queryForm .selectTree").resetValue();
searchHandler();
}
//刷新表格数据并重置排序和页数
function refresh(isUpdate) {
if (!isUpdate) {
//重置排序
grid.options.sortName = 'id';
grid.options.sortOrder = "asc";
//页号重置为1
grid.setNewPage(1);
}
grid.loadData();
}
</script>
</body>
</html>
其中比较重要的代码部分：
url :'${basePath}terwarning/terminal/list.json?stasus=1&type=${type}',下图中的“${type}”是上面的action中request作用域中取出的type，名字要一致的，用EL表达式进行取出。
第三步：action后台处理+service+dao
图片展示：
action代码：
/**
* 数据列表
*
* @param pagerModel
* @param conData
* @return
* @throws Exception
*/
@RequestMapping("list.json")
public ResponseEntity<String> queryListJson1(TerminalData conData,
HttpServletRequest request, PagerModel pagerModel) throws Exception {
// String s=online.Value;
if (conData.getOrgData() == null) {
conData.setOrgData(new OrgData());
}
String s = request.getParameter("type");
// public ResponseEntity<String> queryListJson(TerminalData conData, HttpServletRequest request, PagerModel pagerModel)
// throws Exception {
pagerModel.setPageType(true);
/* if(type != null){
// conData.setType(type);
// pagerModel = terminalService.queryList(conData, pagerModel);
// showlistpage();
}*/
pagerModel = terminalService.queryList(conData, pagerModel);
return PrintUtil.printResponseEntity(pagerModel);
}service代码：
public PagerModel queryList(TerminalData conData,
PagerModel pagerModel) throws Exception {
return terminalDao.queryList(conData, pagerModel);
}Dao代码：
public PagerModel queryList(TerminalData conData, PagerModel pagerModel)
throws Exception {
List<Object> params = new ArrayList<Object>();
String hql = "from TerminalData u where 1=1 and u.delflag='F' ";
if (conData != null) {
if (conData.getOrgData()!=null&&conData.getOrgData().getKeyId() != null && !conData.getOrgData().getKeyId().equals("")) {
hql += " and u.orgData.keyId = ? ";
params.add(conData.getOrgData().getKeyId());
}
if (conData.getMasterName() != null && !conData.getMasterName().equals("")) {
hql += " and u.masterName = ? ";
params.add(conData.getMasterName());
}
if (conData.getIp() != null && !conData.getIp().equals("")) {
hql += " and u.ip = ? ";
params.add(conData.getIp());
}
if (conData.getMac() != null && !conData.getMac().equals("")) {
hql += " and u.mac = ? ";
params.add(conData.getMac());
}
if (conData.getType() != null && !conData.getType().equals("")) {
hql += " and u.type = ? ";
params.add(conData.getType());
}
if (conData.getHostName() != null
&& !conData.getHostName().equals("")) {
hql += " and u.hostName = ? ";
params.add(conData.getHostName());
}
if (conData.getHardDisk() != null
&& !conData.getHardDisk().equals("")) {
hql += " and u.hardDisk = ? ";
params.add(conData.getHardDisk());
}
if (conData.getCpu() != null && !conData.getCpu().equals("")) {
hql += " and u.cpu = ? ";
params.add(conData.getCpu());
}
if (conData.getStasus() != null && conData.getStasus()>=0) {
hql += " and u.stasus = ? ";
params.add(conData.getStasus());
}
}
if (pagerModel.getSort() != null && !"".equals(pagerModel.getSort())) {
hql += " order by u." + pagerModel.getSort() + " "
+ pagerModel.getDirection();
}
return baseDao.searchPaginated(hql, params, pagerModel);
}