JSP页面通过jQuery EasyUI重新实现问题
有一原始页面如下图所示：
现在想通过jQuery-EasyUI来实现相同的页面效果，JSP代码（新人一枚，凑合着看哈）如下：
<%@ page language="java" import="java.util.*,model.Entt,model.entts.*" pageEncoding="utf-8" %>
<%@ taglib uri="/WEB-INF/tld/page.tld" prefix="p"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>提交情况统计</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/easyui/demo.css"/>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loadDataWindow').window({
width:400,
height:100,
title:'提示',
closable:false,
collapsible:false,
minimizable:false,
maximizable:false,
closed:true,
modal:true
});
$('#submitStatisticsListGrid').width(document.body.clientWidth);
$('#submitStatisticsListGrid').height(document.body.clientHeight);
$('#submitStatisticsListGrid').treegrid({
pagination:true,
pageList:[10,20,30],
pageSize:10,
pageNumber:1,
rownumbers:false,
singleSelect:true,
striped:true,
loadMsg:'请稍等，数据加载中...',
method:'post',
idField: 'buildoffice',
treeField: 'buildoffice',
initialState:'collapsed',
onContextMenu: onContextMenu,
toolbar:'#submitScheduleListToolbar',
onLoadSuccess:function(data){
},
});
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var title = year + "年" + month +"月进度提交情况统计";
$('#submitStatisticsListGrid').datagrid("getPanel").panel('setTitle',title);
$("#nd").combobox('setValues',[year]);
$("#jdnd").combobox('setValues',[year]);
$("#themonth").combobox('setValues',[month]);
})
function onContextMenu(){
}
function doQuery(vpageNumber,vpageSize){
$("#fl").form("submit",{
url:'<%=request.getContextPath() %>/StatisticsSubmitScheduleService',
onSubmit:function(param){
$('#loadDataWindow').window('open').window('center');
param.pageNumber = vpageNumber;
param.pageSize = vpageSize;
param.operationType = 'loadJsonList';
return $(this).form('enableValidation').form('validate');
},
success:function(data){
//data = eval('(' + data + ')');
data = $.parseJSON(data);
if(data.total != 0 && data.total != 1){
$('#submitStatisticsListGrid').treegrid('loadData',{"total" : data.total,"rows" : data.rows});
var jdnd = data.rows[0].jdnd;
var themonth = data.rows[0].themonth;
var title = jdnd + "年" + themonth +"月进度提交情况统计";
$('#submitStatisticsListGrid').datagrid("getPanel").panel('setTitle',title);
var checkNodes = document.getElementsByName("input_query_projecttype");
for(var i=0;i<checkNodes.length;i++){
checkNodes[i].checked = false;
}
var pager = $('#submitStatisticsListGrid').treegrid('getPager');
$(pager).pagination({
pageNumber:vpageNumber,
pageSize:vpageSize,
total:data.total,
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '共{total}条数据',
onBeforeRefresh: function(){
},
onSelectPage: function (pageNumber, pageSize){//分页触发
doQuery(pageNumber,pageSize);
}
});
$('#loadDataWindow').window('close');
$('#submitStatisticsListGrid').datagrid('collapseAll');
}else{
$('#loadDataWindow').window('close');
$.messager.alert('提示','您查找的记录不存在！','info');
}
}
});
}
</script>
</head>
<body>
<div id="loadDataWindow">数据加载中，请稍后。。。</div>
<table id="submitStatisticsListGrid" title=2016年1月进度提交情况统计 class="easyui-datagrid" style="width: auto;height:600px;">
<thead>
<tr>
<th data-options="field:'buildoffice',align:'center',resizable:true" width=150px>单位名称</th>
<th data-options="field:'projectTotal',align:'center',resizable:true" width=150px >项目总数</th>
<th data-options="field:'filledProNum',align:'center',resizable:true" width=150px >已填报项目个数</th>
<th data-options="field:'unfilledProNum',align:'center',resizable:true" width=150px >未填报项目个数</th>
</tr>
</thead>
</table>
<div id="submitScheduleListToolbar" style="padding: 5px; height: auto">
<form id="fl" method="post">
<div>
<table>
<tr>
<td style="white-space: nowrap;">项目筛选条件：所属年度
<select id="nd" name="nd" class="easyui-combobox" style="width: 70px;" panelHeight="auto">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</td>
<td style="white-space: nowrap;">批次
<select id="batchnumber" name="batchnumber" class="easyui-combobox" style="width: 60px;" panelHeight="auto" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td style="white-space: nowrap;">管理类型
<select id="managetype" name="managetype" class="easyui-combobox" style="width: 120px;" panelHeight="auto" >
<option value="normal">大本项目</option>
<option value="ssgc">实事工程项目</option>
</select>
</td>
<td style="white-space: nowrap;">投资类型
<select id="companytype" name="companytype" class="easyui-combobox" style="width: 100px;" panelHeight="auto" >
<option value="">请选择</option>
<option value="财政投资">财政投资</option>
<option value="区属公司">区属公司</option>
</select>
</td>
<td style="white-space: nowrap;">申报类型
<select id="sec_flag" name="sec_flag" class="easyui-combobox" style="width: 120px;" panelHeight="auto" >
<option value="">请选择</option>
<option value="1">政府性项目</option>
<option value="2">城市维护项目</option>
</select>
</td>
<td style="white-space: nowrap;">项目性质
<input id="input_query_projecttype" type="checkbox" name="input_query_projecttype" value="1" />一级储备库
<input id="input_query_projecttype" type="checkbox" name="input_query_projecttype" value="2" />二级储备库
<input id="input_query_projecttype" type="checkbox" name="input_query_projecttype" value="3" />三级储备库
<input id="input_query_projecttype" type="checkbox" name="input_query_projecttype" value="4" />结转
<input id="input_query_projecttype" type="checkbox" name="input_query_projecttype" value="5" />新开
</td>
</tr>
<tr>
<td style="white-space: nowrap;">进度筛选条件：填报年度
<select id="jdnd" name="jdnd" class="easyui-combobox" style="width: 70px;" panelHeight="auto" >
<c:forEach begin="2014" end="2030" var="year">
<option value="${year}" ${year eq jdnd?"selected":""}>${year}</option>
</c:forEach>
</select>
</td>
<td style="white-space: nowrap;">月份
<select id="themonth" name="themonth" class="easyui-combobox" style="width: 60px;" panelHeight="auto" >
<c:forEach begin="1" end="12" var="month">
<option value="${month}" ${month eq themonth?"selected":""}>${month}</option>
</c:forEach>
</select>
</td>
<td>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doQuery(1,15)">查询</a>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>目前可以实现的效果如下图：
最终要达到的页面效果为（即点击“查询”按钮后）：
请各位大虾指点，谢谢！！！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
datagrid footer就是合计那行 你无非就是在datagrid外面加个div 通过el表达式读取你传递到作用域的值。