报表系统开发：QUI表格框架+themlef+springboot实现复杂table展⽰功能
主要⽤了QUI前端框架、themlef渲染模板、springboot技术
效果
1.引⼊⼀堆qui插件
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/language/cn.js}"></script>
<script type="text/javascript" th:src="@{/js/framework.js}"></script>
<link th:href="@{/css/import_basic.css}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" th:href="@{/skins/blue/style.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/skin/style.css}" />
<script type="text/javascript" th:src="@{/js/form/datePicker/WdatePicker.js}"></script>
<!--引⼊弹窗组件start-->
<script type="text/javascript" th:src="@{/js/popup/drag.js}"></script>
<script type="text/javascript" th:src="@{/js/popup/dialog.js}"></script>
<!--引⼊弹窗组件end-->
<!--lodop打印控件start-->
<script th:src="@{/thirdparty/lodop/LodopFuncs.js}" type="text/javascript"></script>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0" >
<embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" ></embed>
<!-- <%-- <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" plugins
page="<%=path%>/libs/thirdparty/lodop/install_"></embed> --%> -->
</object>
2.控件
<form name="myForm" action="" id="queryForm" method="post">
<table align="center">
<tr>
<td >单位:</td>
<td >
<select name="dwdm" id="dw" selWidth="70">
<option selected="selected" value="0">全部</option>
<option value="pc">股份</option>
<option value="pc0dq">⼤庆</option>
<option value="pc0jl">吉林</option>
<option value="pc0lh">辽河</option>
<option value="pc0hb">华北</option>
<option value="pc0dg">⼤港</option>
<option value="pc0jd">冀东</option>
<option value="pc0xj">新疆</option>
<option value="pc0cq">长庆</option>
<option value="pc0ym">⽟门</option>
<option value="pc0th">吐哈</option>
<option value="pc0qh">青海</option>
<option value="pc0xn">西南</option>
<option value="pctlm">塔⾥⽊</option>
<option value="pc0zj">浙江</option>
</select>
</td>
<td >年:</td>
<td >
<input name="ny1" type="text" id="ny1" class="date"
value="" dateFmt='yyyy' />⾄<input
name="ny2" type="text" id="ny2" class="date" value=""
dateFmt='yyyy' />
</td>
</td>
<td >
<button type="button" onclick="onSearch1()">
<span class="icon_find">查询</span>
</button>
</td>
<td th:if="${#Parameter('menu_id')} == 37">
<button type="button" onclick="add()">
<span th:class="${icon}">[[${button}]]</span>
</button>
</td>
<td>
<button type="button" onclick="onDownload()">
<span class="icon_export">下载</span>
</button>
</td>
<td>
<button type="button" onclick="printHandler2()"><span class="icon_print">打印</span></button>
</td>
</tr>
</table>
</form>
<div id="printcontent">
<h3 id="title" align="center" >套损套变井治理总⽬标及分年度⽬标</h3>
<table class="tableStyle" id='table2' align="center" >
<thead id="tb1">
<tr align="center">
<td rowspan="2">单位</td>
<td rowspan="2" >年度</td>
<td rowspan="2" >井别</td>
<td rowspan="2" >新增井数</td>
<td rowspan="2" >治理井数</td>
<td rowspan="2" >报废井数</td>
<td rowspan="2" >存量井数</td>
<td rowspan="2" >备注</td>
<td rowspan="2" id="caozuo" class="printHide" align="center" >操作</td>
</tr>
</thead>
</table>
</div>
3.js
获取table数据，并且动态画表格
function onSearch(){
var year_mon1=$("#ny1").val();
var year_mon2=$("#ny2").val();
//alert(year_mon1+"==="+year_mon2);
if (year_mon1 == year_mon2) {
$("#title").text("近三年"+ "套损套变井治理总⽬标及分年度⽬标");
}else {
$("#title").text(year_mon1+"⾄"+year_mon2+ "套损套变井治理总⽬标及分年度⽬标");
}
//$("#queryForm").serialize());
var tjfs=$("#tjfs").val();
$.post(basePath+"/tsj/Tsjzlzmbjfndmb/getData", $("#queryForm").serialize(), function(results) {
if (results != null && results !="") {
debugger;
var tb="<tbody id='tb2'></tbody>";
$("#tb1").after(tb);
//年相等的情况下
// 直接进来
$("#ny").attr("style","display: none;");
//年相等⽽且是股份的情况下,tjfs，直接跳过进else
//调⽤⽅法
//var y_years=year_mon2-year_mon1+1;//选择的年数
for(var i=0;i<results.length;i++){
y_years=results[i].length/3;
debugger;
one(y_years,results[i]);
}
$("#table2").rowspan(0);
}else{
//没数据的时候
$("#ny").attr("style","display: none;");
var tb="<tbody id='tb2'></tbody>";
$("#tb1").after(tb);
for(i=0;i<15;i++) {
var tr = $("<tr align='center'><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td><td>"
+ "</td></tr>");
$("#tb2").append(tr);
$("#caozuo").attr("style","display: none;");
}
//动态⽣成列表
}
});
}
function one(y_years,result){springboot框架的作用
//⼀年的条件查询，已测
var isfirst=0;//表格的出⼊
var years=1;//数组⾃变量
var num_putong=1;
var new_increased_well_num=new Array();//全局合计累计变量
var incharge_well_num=new Array();
var exausted_well_num=new Array();
var exist_well_num=new Array();
for(var i=0;i<y_years+1;i++){//赋值⾃变量，不然为nan
new_increased_well_num[i]=0;
incharge_well_num[i]=0;
exausted_well_num[i]=0;
exist_well_num[i]=0;
}
//遍历,⼀⾏⼀⾏的加table
$.each(result, function(i, item) {
//var acountyears = new Array();
//进来这⾥
result[i].dwjc=result[i].dwjc==null?"":result[i].dwjc
result[i].nb_year=result[i].nb_year==null?"":result[i].nb_year
result[i].well_classify=result[i].well_classify==null?"":result[i].well_classify
result[i].new_increased_well_num=result[i].new_increased_well_num==null?"":result[i].new_increased_well_num result[i].incharge_well_num=result[i].incharge_well_num==null?"":result[i].incharge_well_num
result[i].exausted_well_num=result[i].exausted_well_num==null?"":result[i].exausted_well_num
result[i].exausted_well_num=result[i].exausted_well_num==null?"":result[i].exausted_well_num
result[i].exist_well_num=result[i].exist_well_num==null?"":result[i].exist_well_num
//累加和，这⾥必须先赋值，否则nan
new_increased_well_num[years]=new_increased_well_num[years]+parseInt(result[i].new_increased_well_num);
incharge_well_num[years]=incharge_well_num[years]+parseInt(result[i].incharge_well_num);
exausted_well_num[years]=exausted_well_num[years]+parseInt(result[i].exausted_well_num);
exist_well_num[years]=exist_well_num[years]+parseInt(result[i].exist_well_num);
result[i].others=result[i].others==null?"":result[i].others
//通过 Jsondates[i].name 可以取出json⾥⾯的值
//1.⾸次进表，不合计,⼀年的情况下
if(i%3==0&&isfirst==0&&y_years<2) {
var tr = $("<tr align='center'><td rowspan='5'>" + result[i].dwjc
+ "</td><td rowspan='4'>" + result[i].nb_year
+ "</td><td>" + result[i].well_classify
+ "</td><td>" + result[i].new_increased_well_num
+ "</td><td>" + result[i].incharge_well_num
+ "</td><td>" + result[i].exausted_well_num
+ "</td><td>" + result[i].exist_well_num
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i] .dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
$("#tb2").append(tr);
$(".caozuopc").attr("style", "display: none;");
isfirst=1;
}
//2.两年以上的⾸次进⼊
else if(i%3==0&&isfirst==0&&y_years>1) {
var frows=(y_years*4+1);//跨⾏
var tr = $("<tr align='center'><td id='ff' rowspan="+frows+">" + result[i].dwjc
+ "</td><td rowspan='4'>" + result[i].nb_year
+ "</td><td>" + result[i].well_classify
+ "</td><td>" + result[i].new_increased_well_num
+ "</td><td>" + result[i].incharge_well_num
+ "</td><td>" + result[i].exausted_well_num
+ "</td><td>" + result[i].exist_well_num
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i] .dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
$("#tb2").append(tr);
//ElementById("ff").rowspan=frows;
$(".caozuopc").attr("style", "display: none;");
isfirst=1;
}
//2.（中间处理）当年数⼤于1，合计，并加⼀⾏表
else if(i%3==0&&isfirst==1&&y_years>1){//年数⼤于1
var tr = $("<tr align='center'> <td>" + "合计"
+ "</td><td>" + new_increased_well_num[years-1]
+ "</td><td>" + incharge_well_num[years-1]
+ "</td><td>" + exausted_well_num[years-1]
+ "</td><td>" + exist_well_num[years-1]
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i] .dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
$("#tb2").append(tr);
$("#tb2").append(tr);
$(".caozuopc").attr("style", "display: none;");
isfirst=0;
//years=years+1；不能合计后再加，把下⼀次的也加上了
//合计完之后，加⼀⾏表
var tr = $("<tr align='center'><td rowspan='4'>" + result[i].nb_year
+ "</td><td>" + result[i].well_classify
+ "</td><td>" + result[i].new_increased_well_num
+ "</td><td>" + result[i].incharge_well_num
+ "</td><td>" + result[i].exausted_well_num
+ "</td><td>" + result[i].exist_well_num
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i] .dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
$("#tb2").append(tr);
$(".caozuopc").attr("style", "display: none;");
isfirst=1;
}
//1与2.加中间普通的情况，以及最后⼀次的情况——加⼤⼩合计。
else {
var tr = $("<tr align='center'> <td>" + result[i].well_classify
+ "</td><td>" + result[i].new_increased_well_num
+ "</td><td>" + result[i].incharge_well_num
+ "</td><td>" + result[i].exausted_well_num
+ "</td><td>" + result[i].exist_well_num
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i] .dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
num_putong=num_putong+1;
if(num_putong==3){
years=years+1;
num_putong=1;
}
$("#tb2").append(tr);
$(".caozuopc").attr("style", "display: none;");
//，最后⼀次追加⼩合计和⼤合计
if(i==result.length-1){
var tr = $("<tr align='center'> <td>" + "合计"
+ "</td><td>" + new_increased_well_num[years-1]
+ "</td><td>" + incharge_well_num[years-1]
+ "</td><td>" + exausted_well_num[years-1]
+ "</td><td>" + exist_well_num[years-1]
+ "</td><td>" + result[i].others
+ "</td><td class=\"printHide\"><input type=\"button\" name=\"button\" class=\"caozuo" + result[i].dwdm + "\" value=\"修改\" onclick=\"edit(" + "\'" + result[i ].dwdm + "\'" + "," + result[i].ny + ")\" />"
+ "</td></tr>");
//动态⽣成列表
$("#tb2").append(tr);
$(".caozuopc").attr("style", "display: none;");
isfirst=0;
//最后加个⼤合计
var sum_new_increased_well_num=0;
var sum_incharge_well_num=0;
var sum_exausted_well_num=0;
var sum_exist_well_num=0;
for(var i=1;i<y_years+1;i++){//for(var i=1;i<years+1;years++)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论