jqGrid——合计、默认查询条件、自适应、序号等
来源:互联网 发布:阿里云服务器租用费用 编辑:程序博客网 时间:2024/06/05 15:04
几个问题的实现方法请参考不同颜色的代码:
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>
- jqGrid——合计、默认查询条件、自适应、序号等
- jqGrid————使用心得 合计、默认查询条件、自适应、序号等
- jqgrid 条件查询
- 【JqGrid】JqGrid前端分页+排序+查询条件
- ireport 序号 合计,分组序号
- Jqgrid之合计行
- JqGrid自动合计汇总
- Jqgrid 底部合计功能
- JqGrid自动合计汇总
- 【JqGrid】JqGrid使用后台分页+查询条件+排序
- MySQL 设置数据按条件查询下的序号
- Mysql 设置数据按条件查询下的序号
- MySQL 设置数据按条件查询下的序号
- jqGrid使用multipleSearch产生的查询条件filters分析
- OrmLite—复杂条件查询
- jqgrid查询
- jqGrid查询
- extjs summary合计等
- Oracle DB 诊断数据库
- mathquill 未解决的弊端
- Supported Values for @SuppressWarnings
- UNIX_shell_programming(几道练习题目)
- php array的用法
- jqGrid——合计、默认查询条件、自适应、序号等
- IOS中处理异步连接中的超时
- windows任务定时重启tomcat
- ios排序
- 前端开发必备!Emmet使用手册
- B. Playing Cubes
- 通用的用户登录过滤器(SessionFilter)
- Oracle 货币符号
- cocos2d 'root' is no longer supported问题解决办法