jqGrid——合计、默认查询条件、自适应、序号等

gdclx

墨衍会员 · AI 创作全网分发码龄20年

关注

转载最新推荐文章于 2024-03-15 10:50:29 发布 5.9k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

几个问题的实现方法请参考不同颜色的代码：

1、序号rownumbers: true,

2、合计gridComplete: function()

3、默认日期 $("#actualMonth").attr("value",GetDateStr(-1));

4、获取系统日期的前几天或者后几天function GetDateStr(AddDayCount) ;

5、一上来加载时，默认条件datatype:'local', datatype:'json'

6、调用这行代码保证jqgrid自动根据窗口大小伸缩 autoWidthJqgrid();

7、分层表头，startColumnName是从哪列的头顶上开始、numberOfColumns是贯穿几列

本页里有好多外部引用的js请大家不要完全照搬，关注这几个点即可！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/page/jccp/common/share/taglib.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>煤炭生产综合调度台账</title>
<jsp:include page="/page/jccp/common/share/jsinclude.jsp">
<jsp:param name="groups" value="jqgrid,jquery,jquery-ui,jccp"/>
</jsp:include>
</head>
<body>
<form id="searchForm" method="post">
<div style="height: 26px;">
    <table cellpadding="0" cellspacing="0" class="tbl_search_bg" width="100%" >
      <tr>
    <td class="tbl_td_label" width="20%">日期：</td>
    <td class="tbl_td_input" width="20%">
     <input type="text" id = "actualMonth" name="queryParam.actualMonth" class="Wdate" onClick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})" value="${param.date}"/>
    </td>
    <td class="fotter_btn_other">
        <input type="button" class="NEUDwButton" id="searchBtn" value="查询"/>  
     <input type="button" class="NEUDwButton" id="resetBtn" value="重置"/>  
    </td>
   </tr>
  </table>
</div>
</form>
<table id="resultList"></table>
<div id="resultPager"></div>
</body>
<script type="text/javascript" >
$(document).ready(function(){
  $("#actualMonth").attr("value",GetDateStr(-1));
});

var resultList = $('#resultList');
resultList.jqGrid({
= request.getContextPath() %>/coalOutputActual_queryDispatchBook.ac",
datatype:'local',
rownumbers: true,
colModel:[
   {name:'id', label:'编号', width:80, hidden:true, sortable:false,resizable:false},
   {name:'name', label:'煤矿', align:'left',width:180,sortable:false,resizable:false},
   {name:'onDutyLeader', label:'值班领导',align:'left', width:120,sortable:false,resizable:false},
   {name:'onDutyViceLeader0', label:'早', align:'left',width:70, sortable:false,resizable:false},
   {name:'onDutyViceLeader8', label:'中', align:'left', width:70, sortable:false,resizable:false},
   {name:'onDutyViceLeader16',label:'晚', align:'left', width:70, sortable:false,resizable:false},
   {name:'minerCount0', label:'早', align:'right', width:80, sorttype:'integer',formatter:'integer',summaryType:'sum',sortable:false,resizable:false},
   {name:'minerCount8', label:'中', align:'right', width:80, sorttype:'integer',formatter:'integer',summaryType:'sum',sortable:false,resizable:false},
   {name:'minerCount16', label:'晚', align:'right', width:80, sorttype:'integer',formatter:'integer',summaryType:'sum',sortable:false,resizable:false},
   {name:'sumOutput0', label:'早', align:'right', width:80, sorttype:'number',formatter:'number',sortable:false,resizable:false},
   {name:'cutCount0', label:'早', align:'right', width:80, sorttype:'number',formatter:'number',sortable:false,resizable:false},
   {name:'sumOutput8', label:'中', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'cutCount8', label:'中', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'sumOutput16', label:'晚', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'cutCount16', label:'晚', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'sumOutput', label:'小计', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'cutCount', label:'小计', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'remarks', label:'生产情况存在的问题', align:'right', width:200,sortable:false,resizable:false},
   {name:'avgOutput', label:'吨/刀', align:'right', width:80, sorttype:'number',formatter:'number',summaryType:'sum',sortable:false,resizable:false},
   {name:'dispatcher', label:'调度员', align:'left', width:80, sortable:false,resizable:false},
   {name:'notes', label:'备注', align:'left', width:80,sortable:false,resizable:false}
   ],
pager: $('#resultPager'),
height: 'auto',
autowidth:true,
rowNum: 10,
   rowList:[10,20,30,50,100],
   footerrow: true,
    gridComplete: function() {
    var rowNum = parseInt($(this).getGridParam('records'),10);
    if(rowNum > 0){
      $(".ui-jqgrid-sdiv").show();
         var id = jQuery(this).getCol('id',false);
         var minerCount0 = jQuery(this).getCol('minerCount0',false,'sum');
         var minerCount8 = jQuery(this).getCol('minerCount8',false,'sum');
         var minerCount16 = jQuery(this).getCol('minerCount16',false,'sum');
         var sumOutput0 = jQuery(this).getCol('sumOutput0',false,'sum');
         var sumOutput8 = jQuery(this).getCol('sumOutput8',false,'sum');
         var sumOutput16 = jQuery(this).getCol('sumOutput16',false,'sum');
         var sumOutput = jQuery(this).getCol('sumOutput',false,'sum');
         var cutCount0 = jQuery(this).getCol('cutCount0',false,'sum');
         var cutCount8 = jQuery(this).getCol('cutCount8',false,'sum');
         var cutCount16 = jQuery(this).getCol('cutCount16',false,'sum');
         var cutCount = jQuery(this).getCol('cutCount',false,'sum');
         var avgOutput =sumOutput/ cutCount;
          $(this).footerData("set",{name:"合计",minerCount0:minerCount0,minerCount8:minerCount8,
         minerCount16:minerCount16,sumOutput0:sumOutput0,sumOutput8:sumOutput8,sumOutput16:sumOutput16,sumOutput:sumOutput,
         cutCount0:cutCount0,cutCount8:cutCount8,cutCount16:cutCount16,cutCount:cutCount,avgOutput:avgOutput
          });
    }else{
        $(".ui-jqgrid-sdiv").hide();
    }
    },
    userDataOnFooter: true,
    ondblClickRow: function(rowid,iRow,iCol,e){
            if(rowid != null){
    viewDialog.params = rowid;
    viewDialog.open();
   }
    }

});

resultList.jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[

//startColumnName是从哪列的头顶上开始、numberOfColumns是贯穿几列
  {startColumnName: 'onDutyViceLeader0', numberOfColumns: 3, titleText: '跟班领导'},
  {startColumnName: 'minerCount0', numberOfColumns: 3, titleText: '下井人数'},
  {startColumnName: 'sumOutput0', numberOfColumns: 8, titleText: '产量、进刀数'},
  {startColumnName: 'avgOutput', numberOfColumns: 1, titleText: '平均产量'}
]
});
//查询
$("#searchBtn").click(search);
//重置
$("#resetBtn").click(resetSearch);
// 刷新
function reload(){
search();
}
// 查询
function search(){
resultList.setGridParam({datatype:'json',postData:null}); //Don't delete this line! Fix the problem for none query parameter reload.
resultList.setGridParam({postData:$('#searchForm').serializeJqgrid(),page:1}).trigger("reloadGrid");
return false;
}
//重置
function resetSearch(){
   $('#actualMonth').val('');
}

//获取系统日期的前几天或者后几天
/*使用实例：
* document.write("前天："+GetDateStr(-2));
* document.write("<br />昨天："+GetDateStr(-1));
* document.write("<br />今天："+GetDateStr(0));
* document.write("<br />明天："+GetDateStr(1));
* document.write("<br />后天："+GetDateStr(2));
* document.write("<br />大后天："+GetDateStr(3));
*/
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount);// 获取AddDayCount天后的日期
var y = dd.getYear();
var m = dd.getMonth() + 1;// 获取当前月份的日期
if (m < 10) {
m = "0" + m;
}
var d = dd.getDate();
if (d < 10) {
d = "0" + d;
}
return y + "-" + m + "-" + d;
}

//调用这行代码保证jqgrid自动根据窗口大小伸缩
autoWidthJqgrid();
</script>
</html>