【JavaScript】jsp表格页面记录
页面效果如下：
jsp代码如下(里面引入了很多其他js文件，很多方法调用来自其他js)：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path +"/"; %> <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <meta charset="utf-8" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <title>仓库商品成本-查询</title> <link rel="stylesheet" type="text/css" href="../resources/core/assets/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="../resources/core/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" /> <link rel="stylesheet" type="text/css" href="../resources/core/js/select2.css" /> <script type="text/javascript" src="../resources/core/assets/js/jquery.js"></script> <script type="text/javascript" src="../resources/core/js/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript" src="../resources/core/js/dictionaryInit.js"></script> <link rel="stylesheet" href="../resources/core/js/zTree35/zTreeStyle/zTreeStyle.css" /> <script src="../resources/core/js/zTree35/jquery.ztree.core-3.5.js"></script> <script src="../resources/core/js/zTree35/jquery.ztree.excheck-3.5.js"></script> <!-- <script src="../resources/core/js/reportform/ckspcbQuery.js"></script> --> <style> /*模拟下拉多选样式*/ #Pricetype_main { position: fixed; display: none; border: 1px solid #ddd; -moz-box-shadow: 1px 1px 3px #ddd; -webkit-box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd; background: #fff; z-index: 99999; } #dopemain { padding: 5px 0 5px 15px; width: 130px; height: 180px; overflow: auto; background: #fff; font-size: 12px; } #biuuu_city { margin: 10px 0 15px 0; height: 25px; } .spkcxx_ul { height: 32px; line-height: 40px; margin: 0 0 10px 8px; } .spkcxx_ul li { float: left; list-style: none; } .spkcxx_li2 { height: 30px; line-height: 45px; } .spkcxx_li2 label { cursor: pointer; } .spkcxx_li2 input { margin-right: 7px; position: relative; top: 2px; } .wrq div select { height: 24px; } .isZero input { position: relative; top: 2px; margin-right: 5px; } #chenkbox1 { overflow-x: auto; overflow-y: hidden; } </style> </head> <body> <!-- 商品分类树形弹窗 --> <div class="md-modal md-effect-19" id="modal-2" style="width:17%;z-index:99999;"> <div class="md-content"> <h3>选择商品分类</h3> <button class="md-close">X</button> <div> <div id="main" style="padding:5px 0 5px 15px;"> <div class="content_wrap" style="height:300px;overflow: auto;"> <div class="zTreeDemoBackground left"> <ul id="classificationtree" class="ztree spflZtree"></ul> </div> </div> <button class="btn_new btn-primary btn-default btn-bold abc" id="qudingok">确定</button> </div> </div> </div> </div> <!-- 仓库下拉多选 --> <div id="Pricetype_main"> <div id="dopemain"> </div> <div style="position:raletive;bottom:0px;padding:5px;border-top:1px solid #ddd;"> <button type="button" class="btn-bd" id="okjglx">确定</button> <input type="button" class="btn-bd offs" value="关闭" /> </div> </div> <!-- 查询条件 --> <div class="row"> <div id="current-group"></div> <div class="col-xs-12"> <form class="search-wrapper wrq" id="orderIframeForm"> <div class="height25"> <label>仓库</label> <input class="wid8" name="ckbm" id="ckids" type="hidden" /> <input class="wid8 drop_check" id="ckname" type="text"/> </div> <div> <label>商品</label> <input name="spbm" id="goodsid" type="hidden"> <input class="goods_entryselect" type="text" id="goodsnameall" name="goodsnameall" style="width:110px;" > </div> <div class="height25"> <label class="isZero"><input name="isZero" id="chbox" type="checkbox" value="0" />包括保管账为零</label> </div> <div class="height25" style="margin-top: 3px;"> <a class="icon-search onrch" onclick="contractIframeSeach(1)">查询</a> <a class="icon-search onrch" onclick="GJquery()">高级查询</a> <a class="icon-search onrch" style="margin-left: 0px;" onclick="outExcel()">导出到Excel</a> <a id="excel_a" href="export_excel" target="_blank" style="text-decoration:none"></a> <a class="icon-search onrch" onclick="resetForm()">重置</a> </div> <!-- 高级查询点击弹出 GJquery()方法--> <!-- <div style="clear:both"> --> <div style="display:none;" id="gjcx"> <div class="height25" style="margin-top: 3px;"> <label>商品分类</label> <input class="wid8" name="spfl" id="classid" type="hidden" /> <input class="wid8" id="classname" name="classname" type="text" /> <button type="button" class="md-trigger butok" data-modal="modal-2">...</button> </div> <div class="height25" style="margin-top: 3px;"> <label>品牌</label> <input class="wid8" name="pp" id="brandid" type="hidden" /> <input class="wid8 brand_entry" id="brandname" type="text" /> </div> </div> </div> </form> </div> </div> <!-- 总单表格 --> <div class="hr hr-18 dotted"></div> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-12"> <div id="chenkbox" class="ckbox"> <table id="sample-table-1" class="table table-bordered"> <thead class="fixedHeader"> <tr> <td class="min-3 center"><span>选择</span><div></div></td> <td class="min-7 td_center"><span>序号</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>商品编码</span><div class="ww"></div></td> <td class="min-20 td_center" sort="string"><span>商品名称</span><div class="ww"></div></td> <td class="min-7 td_center" sort="string"><span>品牌</span><div class="ww"></div></td> <td class="min-7 td_center" sort="string"><span>仓库</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>保管账</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int" style="display:none"><span>stgoodsid</span><div class="ww"></td> <td class="min-7 td_center" sort="int" style="display:none"><span>depotid</span><div class="ww"></td> <td class="min-7 td_center" sort="int"><span>待出数量</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>待入数量</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>可卖数量</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>平均成本</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>成本均价</span><div class="ww"></div></td> </tr> </thead> <tbody class="scrollContent radio-ch" id="biuuu_city_list"></tbody> <tfoot class="tfoot" id="tfoot_city_list"></tfoot> </table> <div class="row"> <div class="col-xs-12"> <!-- <strong>往来明细</strong> --> </div> </div> </div> </div> </div> </div> </div> <!-- 总单分页 --> <div id="biuuu_city"></div> <!-- 细单明细表格 --> <div class="hr hr-18 dotted"></div> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-12"> <div id="chenkbox" class="ckbox2"> <table id="sample-table-2" class="table table-bordered"> <thead class="fixedHeader"> <tr> <td class="min-7 td_center"><span>序号</span><div class="ww"></div></td> <td class="min-7 td_center" sort="string"><span>仓库</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>批次号</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>批次小号</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>入库单号</span><div class="ww"></div></td> <td class="min-27 td_center" sort="string"><span>供应商</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>单价</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>税率</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>入库数量</span><div class="ww"></div></td> <td class="min-7 td_center" sort="int"><span>结余数量</span><div class="ww"></div></td> </tr> </thead> <tbody class="scrollContent" id="dtl_list"> </tbody> <tfoot class="tfoot" id="tfoot_dtl_list"> <tr style="color:#FF0000;"> <td class="min-7"></td> <td class="min-7 center" >合计：</td> <td class="min-7"></td> <td class="min-7"></td> <td class="min-7"></td> <td class="min-27"></td> <td class="min-7"></td> <td class="min-7"></td> <td class="min-7 td_center" sum="rksl"></td> <td class="min-7 td_center" sum="jysl"></td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </br> <!-- 分页 --> <div id="dtl_list_page" style="margin:10px 0 0 7px;"></div> <script type="text/javascript"> var baseUrl="<%=basePath%>"; //var baseUrl="${URL.baseUrl}"; var baseURL="${URL.baseURL}"; var sessionId="${sessionId}"; var enterpriseid="${URL.enterpriseid}"; var employeeid = '${employeeid}'; var goodsclassListUrl="${URL.goodsclassListUrl}"; var goodsnameUrl="${URL.goodsnameUrl}"; /* var goodsnameUrl="http://172.19.13.207:8080/goods-web-enterprise/"; */ var _csrfName = "${_csrf.parameterName}"; var _csrfValue = "${_csrf.token}"; //下载文档 function outExcel(){ window.location.href=baseUrl+"reportform/outExcelCKSPCB"; } //高级查询 function GJquery(){ var divD = document.getElementById('gjcx'); if(divD.style.display=='none'){ divD.style.display='block'; }else{ divD.style.display='none'; } }; var count =1; var sample_table_clone = $("#sample-table-1").clone(true);//05.29 var sample_table_clones = $("#sample-table-2").clone(true);//05.29 var curr = 1;//从第几页开始 var currPc = 1;//从第几页开始 function contractIframeSeach(curr) { document.getElementById('biuuu_city_list').innerHTML = ''; document.getElementById('dtl_list').innerHTML = ''; document.getElementById('biuuu_city').innerHTML = ''; document.getElementById('dtl_list_page').innerHTML = ''; document.getElementById('tfoot_dtl_list').innerHTML = ''; showLoading(); var pageSize = 4; // 每页出现的数量 var data = $("#orderIframeForm").serializeArray(); $.ajax({ url:baseUrl+'reportform/queryData'+"?pageSize=" + pageSize + "&pageNo="+ curr+"&enterpriseid="+enterpriseid, type:'post', data:data, dataType:'json', beforeSend:function() {}, success:function(result) { clearLoading(); var returnCode = result.returnCode; if(result.data[0]!=null){ var list = result.data[0].content; var pages = result.data[0].totalPages; laypage({ cont:'biuuu_city', pages:pages, curr:curr, skip: true, //是否开启跳页false skin: '#0065b3', jump:function(obj, first) { if (!first) { contractIframeSeach(obj.curr); } } }); sampletable = sample_table_clone.clone(true); /* $("#biuuu_city_list").append(thisData(list)); */ sampletable.find("#biuuu_city_list").html(thisData(list)); //将表一的区域替换成添加了list内容的表一副本 $(".ckbox").html(sampletable);//05.29 // 加载表底部的小计和总计 document.getElementById('tfoot_city_list').innerHTML = thisDataf(list); table("sample-table-1"); reloadTableEffect();//加载表格特效 dictInit();//重新加载数字字典 reloadTrClick();//选择总单一条数据加载对应的细单明细 sumCompute("biuuu_city_list");//合计 } }, error:function() {clearLoading();}, }); } // 加载表一的小计，合计 var thisDataf = function(data){ var str = '' var zmslhj = 0;//保管帐合计 var dcslhj = 0;//待出数量合计 var drslhj = 0;//待入数量合计 var kmslhj = 0;//可卖数量合计 var ysslhj = 0;//预售数量合计 var fmslhj = 0;//负买数量合计 var zmcbhj = 0;//实际成本合计 var cbjjhj = 0;//成本均价合计 var stayinqtyhj=0; var stayoutqtyhj=0; var presaleqtyhj=0; var totalzmslhj = 0;//保管帐合计 var totaldcslhj = 0;//待出数量合计 var totaldrslhj = 0;//待入数量合计 var totalkmslhj = 0;//可卖数量合计 var totalysslhj = 0;//预售数量合计 var totalfmslhj = 0;//负买数量合计 var totalzmcbhj = 0;//实际成本合计 var totalcbjjhj = 0;//成本均价合计 var totalstayinqty=0; var totalstayoutqty=0; var totalpresaleqty=0; for (var i = 0; i < data.length; i++) { stayinqtyhj += NaNHandle(parseInt(data[i].stayinqty)); stayoutqtyhj += NaNHandle(parseInt(data[i].stayoutqty)); presaleqtyhj += NaNHandle(parseInt(data[i].presaleqty)); cbjjhj += NaNHandle(parseFloat(data[i].cbjj)); zmslhj += NaNHandle(parseInt(data[i].zmsl)); totalstayinqty = parseInt(data[i].totalstayinqty); totalstayoutqty = parseInt(data[i].totalstayoutqty); totalpresaleqty = parseInt(data[i].totalpresaleqty); totalzmsl = parseInt(data[i].totalzmsl); totalzmcbhj = parseInt(data[i].totalzmcb); //totalcbjjhj = NaNHandle(parseFloat(data[i].totalcbjj)); if(i==(data.length-1)){ str += '<tr style="color:#FF0000;">'; str += '<td class="min-3 center"><input type="radio" name="aa"></td>'; str += '<td class="min-7 center"></td>'; str += '<td class="min-7 center">小计：</td>'; str += '<td class="min-20 center"></td>'; str += '<td class="min-7 center"></td>'; str += '<td class="min-7 center"></td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+zmslhj+'</td>'; str += '<td class="min-7 td_center" style="display:none"></td>'; str += '<td class="min-7 td_center" style="display:none"></td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+stayoutqtyhj+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+stayinqtyhj+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+presaleqtyhj+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+zmcbhj+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+cbjjhj+'</td>'; str += '</tr>'; str += '<tr style="color:#FF0000;">'; str += '<td class="min-3 center"><input type="radio" name="tt"></td>'; str += '<td class="min-7"></td>'; str += '<td class="min-7 center">总计：</td>'; str += '<td class="min-20 center"></td>'; str += '<td class="min-7 center"></td>'; str += '<td class="min-7 center"></td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+totalzmsl+'</td>'; str += '<td class="min-7 td_center" style="display:none"></td>'; str += '<td class="min-7 td_center" style="display:none"></td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+totalstayoutqty+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+totalstayinqty+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+totalpresaleqty+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2">'+totalzmcbhj+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2"></td>'; str += '</tr>'; } } return str; }; // 加载表一 var thisData = function(data) { var s=1; var str = '' for (var i = 0; i < data.length-1; i++) { str += '<tr>'; str += '<td class="min-3 center"><input name="aa" type="radio" /></td>'; str += '<td class="min-7 td_center" >'+ s++ + '</td>'; str += '<td class="min-7 td_center" name="spbm" >'+nullShow(data[i].spcode)+ '</td>'; str += '<td class="min-20 td_center" name="spmc" >'+nullShow(data[i].spmc)+ '</td>'; str += '<td class="min-7 td_center" name="pp">'+nullShow(data[i].pp)+ '</td>'; str += '<td class="min-7 td_center" name="ck">'+nullShow(data[i].ck)+ '</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="zmsl">'+nullShow(data[i].zmsl)+ '</td>'; str += '<td class="min-7 td_center" name="stgoodsid" style="display:none">'+nullShow(data[i].stgoodsid)+'</td>'; str += '<td class="min-7 td_center" name="depotid" style="display:none">'+nullShow(data[i].depotid)+'</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="stayoutqty">'+nullShows(data[i].stayoutqty)+ '</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="stayinqty">'+nullShows(data[i].stayinqty)+ '</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="presaleqty">'+nullShows(data[i].presaleqty)+ '</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="zmcb">'+nullShows(data[i].zmcb)+ '</td>'; str += '<td class="min-7 td_right parseFormatNum_2" name="cbjj">'+nullShows(data[i].cbjj)+ '</td>'; } return str; }; //去掉返回的null值 function nullShow(obj){ return obj == null?"":obj; } function nullShows(obj){ return obj == null?0:obj; } function NaNHandle(obj,param){ var value; if(param == undefined){ value = 0; }else{ value = param; } if(isNaN(obj)){ return value; }else{ return obj } } // 加载表二明细 function reloadTrClick(){ $("#biuuu_city_list tr").click(function(){ $(this).find("input[type='radio']").prop("checked",true); // $('#myTab a:first').tab('show') checkradio(this,1); }) } //加载细单明细数据 function checkradio(tr,currPc){ $("#sample-table-1 tbody tr").removeClass("bgss"); $(tr).addClass("bgss"); document.getElementById('dtl_list').innerHTML = ''; document.getElementById('dtl_list_page').innerHTML = ''; var stgoodsid = $(tr).find("td[name='stgoodsid']").text(); var depotid = $(tr).find("td[name='depotid']").text(); showLoading(); var pageSize = 4; // 每页出现的数量 var spbm2 = $("#biuuu_city_list input[type='radio']:checked").val(); var data="pageSize="+pageSize+"&pageNo="+curr; $.ajax({ /* url:baseUrl+'reportform/queryDatasm'+"?pageSize=" + pageSize + "&pageNo="+ currPc+"&stgoodsid="+''+"&depotid="+'', */ url:baseUrl+'reportform/queryDatasm'+"?pageSize=" + pageSize + "&pageNo="+ currPc+"&enterpriseid="+enterpriseid+"&stgoodsid="+stgoodsid+"&depotid="+depotid, type:'post', //data:data, beforeSend:function() {}, success:function(result) { clearLoading(); var returnCode = result.returnCode; if(result.data[0]!=null){ var listPc = result.data[0].content; var pagesPc = result.data[0].totalPages; laypage({ cont:'dtl_list_page', pages:pagesPc, curr:currPc, skip: true, //是否开启跳页false skin: '#0065b3', jump:function(obj, first) { if (!first) { checkradio(tr,obj.curr); } } }); sampletables = sample_table_clones.clone(true);//05.29 sampletables.find("#dtl_list").html(thisData2(listPc)); $(".ckbox2").html(sampletables); table("sample-table-2"); reloadTableEffect();//加载表格特效 dictInit();//重新加载数字字典 sumCompute("dtl_list");//合计 } }, error:function() {clearLoading();}, }); } // 加载表二 var thisData2 = function(data) { var count=1; var str = '' for (var i = 0; i < data.length; i++) { str += '<tr>'; str += '<td class="min-7 td_center">'+ count++ +'</td>'; str += '<td class="min-7 td_center" name="ck" >'+nullShow(data[i].ck)+ '</td>'; str += '<td class="min-7 td_center" name="pch" >'+nullShow(data[i].pch)+ '</td>'; str += '<td class="min-7 td_center" name="pcxh" >'+nullShow(data[i].pcxh)+ '</td>'; str += '<td class="min-7 td_center" name="rkdh">'+nullShow(data[i].rkdh)+ '</td>'; str += '<td class="min-27 td_center" name="gys">'+nullShow(data[i].gys)+ '</td>'; str += '<td class="min-7 td_center" name="dj">'+nullShow(data[i].dj)+ '</td>'; str += '<td class="min-7 td_center" name="sl">'+nullShow(data[i].sl)+ '</td>'; str += '<td class="min-7 td_center" name="rksl">'+nullShow(data[i].rksl)+ '</td>'; str += '<td class="min-7 td_center" name="jysl">'+nullShow(data[i].jysl)+ '</td>'; str += '</tr>'; } return str; }; //-----------------------------------------------------------------------------------------后备 </script> <script type="text/javascript" src="../resources/core/js/laypage/laypage.js"></script> <script type="text/javascript" src="../resources/core/js/commen.js"></script> <script type="text/javascript" src="../resources/core/js/jquery.bigautocomplete.js"></script> <!-- 遮罩层 --> <div class="md-overlay"></div> <script src="../resources/core/js/popup/classie.js"></script> <script src="../resources/core/js/popup/modalEffects.js"></script> <script type="text/javascript" src="../resources/core/assets/js/bootstrap.js"></script> <script type="text/javascript" src="../resources/core/js/style.js"></script> </body> </html>
