commonHTMLHead.jsp中的jqGrid头代码如下：
<scripttype="text/javascript">
jQuery.extend(jQuery.jgrid.defaults,
{
altRows:true,
altclass:'ui-jqgrid-rowbackgroundColor',
altRows:true,
altclass:'altclass',
rownumbers:true,
autowidth:true,
height:'auto',
//shrinkToFit:false,
gridComplete: function() {
}
});
var ctx ='${ctx}';
var reqUrl ='${requestURI}';
</script>
<style>
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
</style>
要让列表下面的滚动条随着列表宽度自动出现的话，需要加下面两个属性：
shrinkToFit:false,
autoScroll: false
--------------------------------------------------------------------------------------------------
笔者示例如下：
ReceiptStoreReportList.jsp代码如下：
<%@includefile="/receiptcommon/commonJSPHead.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head >
<title>票据收发存情况表</title>
<%@pagecontentType="text/html;charset=UTF-8" language="java"%>
<%@pageisELIgnored="false"%>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<%@includefile="/receiptcommon/commonHTMLHead.jsp" %>
<script type="text/javascript"src="${ctx}/common/SelectUtil.js"></script>
<script type="text/javascript"src="${ctx}/common/DateUtil.js"></script>
<script type="text/javascript"src="${ctx}/common/SelectDateUtil.js"></script>
<script type="text/javascript"src="ReceiptStoreReportList.js"></script>
</head>
<body bgcolor="F2F0F1">
<br />
<form action="" method="post" name="theForm"id="theForm">
<tableid="curtainimg" border=0 width=100% name="titleTable"style="margin-top: 0px;" cellpadding="0"cellspacing="0">
<tr>
<td>
<divalign="left">
<ahref="#"><imgsrc="${ctx}/receiptcommon/images/pclose.gif" border="0"
onclick="hid1(1);" name="expand"style="display:none"
alt="显示查找框">
</a><ahref="#"><imgsrc="${ctx}/receiptcommon/images/popen.gif" border="0"
onclick="hid1(0);" name="shrink"style="display:block"
alt="隐藏查找框">
</a>
</div>
</td>
<th width="100%" class="pay1">
票据收发存情况表
</th>
</tr>
</table>
<tableborder=0 width="100%" id="curtain" cellpadding="0" cellspacing="2"class="tableLine_1">
<tr>
<td>
<tableborder="0" cellspacing="3" bordercolor="red" class="result_list"name="searchTable" width="100%">
<tr>
<td align="left">
票据代码：<inputtype="text" class="content" id="RTYPENO27" name="R.TYPENO.27"size="13" />
</td>
<td align="center">票据名称：
<inputtype="text" name="R.NAME.27" id="RNAME27" value="" class="content"style="width:100px" />
<inputname="button2" type="button" class="newButton" onclick="chooseReceipt()" value="选择" border="0"/>
</td>
<td align="right">年
<selectid="year" name="year" onchange="yearOperaMonth();"disabled="true">
</select>
月<selectid="month"name="month"></select>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<inputname="button2" type="button" class="newButton" value="查 找"onclick="gridReload()" />
<inputname="button2" type="button" class="newButton" value="重 置"onclick="resetCurForm()" />
<inputname="button2" type="button" class="newButton" value="转excel"onclick="exportToExcel()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<br />
<tableid="listTbl"></table>
<divid="listPage"></div>
<br />
</body>
</html>
ReceiptStoreReportList.js代码如下：
var ymFlag = 0; //全局变量，标识默认是1月~当前月的下拉框
$(document).ready(function() {
SelectDateUtil.buildPointYear("year", 0);
SelectDateUtil.buildPointMonth("month", 0);
var thisMonth ="";
if(DateUtil.getCurMonth(1) < 10){
thisMonth = "0" + DateUtil.getCurMonth(1);
}else{
thisMonth = DateUtil.getCurMonth(1);
}
jQuery("select[name='month']option[value='"+thisMonth+"']").attr("selected", "true");
query();
//多表头
jQuery("#listTbl").jqGrid('setGroupHeaders', {
groupHeaders:[
{startColumnName:'BEGIN_PERIOD_COUNT', numberOfColumns: 2, titleText: '期初库存'},
{startColumnName:'CURRENT_IN_COUNT', numberOfColumns: 2, titleText: '本期入库'},
{startColumnName:'YEAR_IN_COUNT', numberOfColumns: 2, titleText: '本期累计入库'},
{startColumnName:'CURRENT_OUT_COUNT', numberOfColumns: 2, titleText: '本期出库'},
{startColumnName:'YEAR_OUT_COUNT', numberOfColumns: 2, titleText: '本期累计出库'},
{startColumnName:'TERM_END_COUNT', numberOfColumns: 2, titleText: '期末库存'}
]
});
});
//定义小计总计的统计字段信息(大写,第一个字段标识在哪列显示“合计”，“小计”字样 )
//可以合计总计可以单独设置。
jsion_sumColumns["sumColumns"] ="TYPENO,BEGIN_PERIOD_COUNT,BEGIN_PERIOD_AMOUNT,CURRENT_IN_COUNT,CURRENT_IN_AMOUNT,YEAR_IN_COUNT,YEAR_IN_AMOUNT,CURRENT_OUT_COUNT,CURRENT_OUT_AMOUNT,YEAR_OUT_COUNT,YEAR_OUT_AMOUNT,TERM_END_COUNT,TERM_END_AMOUNT"; //总计
jsion_sumColumns["subSumColumns"] ="TYPENO,BEGIN_PERIOD_COUNT,BEGIN_PERIOD_AMOUNT,CURRENT_IN_COUNT,CURRENT_IN_AMOUNT,YEAR_IN_COUNT,YEAR_IN_AMOUNT,CURRENT_OUT_COUNT,CURRENT_OUT_AMOUNT,YEAR_OUT_COUNT,YEAR_OUT_AMOUNT,TERM_END_COUNT,TERM_END_AMOUNT"; //小计
//定义小计合计的序列化格式。
//暂时定义三种状态：default：默认，不需要进行处理|integer:只序列化千分位|number：只序列化小数点|currency：金额序列化千分位和小数点
jsion_sumColumns["jsion_columnsFormat"] ="default,integer,currency,integer,currency,integer,currency,integer,currency,integer,currency,integer,currency"; //格式化
function query(){
var sobj = {};
sobj["year"] =jQuery("select[name='year'] option:selected").val();
sobj["month"] =jQuery("select[name='month'] option:selected").val();
jQuery("#listTbl").jqGrid({
url:'queryReceiptStoreReport.do',
datatype: 'json',
postData: sobj,
colNames: ['票据代码','票据名称','计量单位','成本价','本数','金额','本数','金额','本数','金额','本数','金额','本数','金额','本数','金额'],
colModel: [
{
name:'TYPENO',
index:'TYPENO',
width:'80%'
},
{
name:'RTNMAE',
index:'RTNMAE',
sortable:false,
width:'210%'
},
{
name:'BUY_RADIX',
index:'BUY_RADIX',
sortable:false,
width:'65%'
},
{
name:'PRINT_PRICE',
index:'PRINT_PRICE',
sortable:false,
width:'60%'
},
{
name:'BEGIN_PERIOD_COUNT',
index:'BEGIN_PERIOD_COUNT',
sortable:false,
width:'70%',
align:"left"
},
{
name:'BEGIN_PERIOD_AMOUNT',
index:'BEGIN_PERIOD_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
},
{
name:'CURRENT_IN_COUNT',
index:'CURRENT_IN_COUNT',
width:'70%'
},
{
name:'CURRENT_IN_AMOUNT',
index:'CURRENT_IN_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
},
{
name:'YEAR_IN_COUNT',
index:'YEAR_IN_COUNT',
width:'70%'
},
{
name:'YEAR_IN_AMOUNT',
index:'YEAR_IN_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
},
{
name:'CURRENT_OUT_COUNT',
index:'CURRENT_OUT_COUNT',
width:'70%'
},
{
name:'CURRENT_OUT_AMOUNT',
index:'CURRENT_OUT_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
},
{
name:'YEAR_OUT_COUNT',
index:'YEAR_OUT_COUNT',
width:'70%'
},
{
name:'YEAR_OUT_AMOUNT',
index:'YEAR_OUT_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
},
{
name:'TERM_END_COUNT',
index:'TERM_END_COUNT',
width:'70%'
},
{
name:'TERM_END_AMOUNT',
index:'TERM_END_AMOUNT',
width:'70%',
useColSpanStyle:true,
formatter:'currency',
formatoptions:{'thousandsSeparator':','}
}
],
page: 1,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#listPage',
sortname: 'TYPENO',
viewrecords: true,
// sortorder: "desc",
jsonReader: {
repeatitems: false
},
width: "100%",
height: '100%',
footerrow: true,
shrinkToFit:false,
autoScroll: false,
gridComplete: function(){
//如果需要统计则需要定义
if(jsion_sumColumns.sumColumns ||jsion_sumColumns.subSumColumns) {getFooterJsionData($(this))}
// JQGridScale("listTbl");
}
});
onpageresize();
jQuery(window).resize(onpageresize);
}
function onpageresize() {
jQuery("#listTbl").jqGrid('setGridWidth',jQuery("#curtainimg").width() * 0.996);
}
function exportToExcel() {
var year =jQuery("select[name='year'] option:selected").val();
$("#theForm").attr("action","exportReceiptStoreReportExcel.do?year="+year);
$("#theForm").submit();
}
function gridReload() {
var sobj = {};
sobj["year"] =jQuery("select[name='year'] option:selected").val();
sobj["month"] =jQuery("select[name='month'] option:selected").val();
sobj["R.TYPENO.27"] =jQuery("#RTYPENO27").val();
sobj["R.NAME.27"] =jQuery("#RNAME27").val();
jQuery("#listTbl").jqGrid('setGridParam', {
postData: sobj,
page:1
}).trigger("reloadGrid");
}
function resetCurForm(){
SelectDateUtil.buildPointYear("year", 0);
SelectDateUtil.buildPointMonth("month", 0);
var thisMonth ="";
if(DateUtil.getCurMonth(1) < 10){
thisMonth = "0" + DateUtil.getCurMonth(1);
}else{
thisMonth = DateUtil.getCurMonth(1);
}
jQuery("select[name='month']option[value='"+thisMonth+"']").attr("selected", "true");
jQuery("#RTYPENO27").val("");
jQuery("#RNAME27").val("");
}
function yearOperaMonth(){
if(ymFlag == 0){
SelectDateUtil.buildAllMonth("month");
jQuery("select[name='month']option[value='12']").attr("selected", "true");
ymFlag = 1;
}else if(ymFlag ==1){
SelectDateUtil.buildPointMonth("month",1);
var thisMonth = "";
if(DateUtil.getCurMonth(1) <10){
thisMonth= "0" + DateUtil.getCurMonth(0);
}else{
thisMonth= DateUtil.getCurMonth(1);
}
jQuery("select[name='month']option[value='"+thisMonth+"']").attr("selected", "true");
ymFlag = 0;
}
}
function hid1(flag) {
if (flag == 0) {
document.all.curtain.style.display ="none";
document.all.shrink.style.display ="none";
document.all.expand.style.display ="block";
} else if (flag == 1){
document.all.curtain.style.display ="block";
document.all.shrink.style.display ="block";
document.all.expand.style.display ="none";
}
}
//选择票具名称
function chooseReceipt() {
var resObj =showReceiptTypeSelectForm();
$('#RNAME27').val(resObj.name);
}
--------------------------------------------------------------------------------------------------
辅助js文件代码如下：
//总计和小计计算
//@param jqGridObj
function getFooterJsionData(jqGridObj){
varaddFootData = {} ;
varbrStr = "";
// var userData = jqGridObj.jqGrid('getUserData');
var userData =jqGridObj.jqGrid('getGridParam', 'userData');
if(jsion_sumColumns.subSumColumns&& jsion_sumColumns.sumColumns)brStr = "<br>";
try{
//小计
if(jsion_sumColumns.subSumColumns){
var rowCount = jqGridObj.jqGrid('getGridParam','reccount'); //当前页一共有多少行
var _strFormat =jsion_sumColumns.jsion_columnsFormat.split(","); //获得类似"default,currency,currency,currency"的格式化数组
for(var j=1;j<=rowCount; j++){
//得到每行的对象
var rowObj = jqGridObj.jqGrid("getRowData",j);
var _strSubColumns =jsion_sumColumns.subSumColumns.split(","); //获得类似"NAME,CASH,TRANSFER,SUBTOTAL"需要小计和总计的字段名数组
//循环小计参数
for(var k = 0; k <_strSubColumns.length; k++){
if(k ==0){
addFootData[_strSubColumns[k]] = "小计：";
}else{
var oldValue =Number(addFootData[_strSubColumns[k]]);
if(oldValue) {
addFootData[_strSubColumns[k]] =Number(rowObj[_strSubColumns[k]]) + Number(oldValue);
} else {
addFootData[_strSubColumns[k]] =Number(rowObj[_strSubColumns[k]]);
}
}
if( j ==rowCount ) {
if(forMatterNumberType[_strFormat[k]]){
addFootData[_strSubColumns[k]] = formatNumber(addFootData[_strSubColumns[k]],forMatterNumberType[_strFormat[k]]);
// addFootData[_strSubColumns[k]] = formatNumber(addFootData[_strSubColumns[k]],forMatterNumberType['currency2']);
}
}
}
}
}
//总计
if(jsion_sumColumns.sumColumns){
var _strColumns =jsion_sumColumns.sumColumns.split(",");
var t = {};
var piont;
if(jsion_sumColumns.t) {
t =jsion_sumColumns.t.split(",");
piont = ".";
}
else{
piont ="";
for(var k= 0;k<_strColumns.length; k++){
t[k]="";
}
}
//alert(t);
for(var k =0;k<_strColumns.length; k++){
if(k ==0){
if(addFootData[_strColumns[k]]) addFootData[_strColumns[k]] =addFootData[_strColumns[k]] + brStr + "总计：";
else addFootData[_strColumns[k]] = brStr +"总计：";
}else{
var subSum = addFootData[_strColumns[k]];
if(subSum){
if(forMatterNumberType[_strFormat[k]]){
addFootData[_strColumns[k]] = subSum + brStr +formatNumber(userData[t[k]+piont+_strColumns[k]],forMatterNumberType[_strFormat[k]]);
// addFootData[_strColumns[k]] = subSum + brStr +formatNumber(userData[_strColumns[k]],forMatterNumberType['currency2']);
}else{
addFootData[_strColumns[k]] = subSum + brStr +userData[t[k]+piont+_strColumns[k]];
}
}
else {
if(forMatterNumberType[_strFormat[k]]){
addFootData[_strColumns[k]] =brStr +formatNumber(userData[t[k]+piont+_strColumns[k]],forMatterNumberType[_strFormat[k]]);
// addFootData[_strColumns[k]] =brStr +formatNumber(userData[_strColumns[k]],forMatterNumberType['currency2']);
}else{
addFootData[_strColumns[k]] =brStr + userData[t[k]+piont+_strColumns[k]];
}
}
}
}
}
}catch(e){
}
jqGridObj.jqGrid('footerData','set',addFootData,false);
}
SelectDateUtil.js文件代码：
function SelectDateUtil(){}
//构建12个月的下拉列表
//@param 为select标签的id值
SelectDateUtil.buildAllMonth = function(_sel){
SelectUtil.cleanOptions(_sel);
for(var i=1; i<=12; i++){
SelectUtil.addOption(_sel, i, i+"月");
}
};
//构建1月到指定月的下拉列表，
//@param 为select标签的id值
//@param 0为当前月，1为上一月 ...(参数不允许大于当前月)
SelectDateUtil.buildPointMonth = function(_sel, num){
SelectUtil.cleanOptions(_sel);
var date = new Date();
var thisMonth = date.getMonth() + 1;
if(parseInt(num) >= parseInt(thisMonth)){
alert("参数不允许大于当前月!");
return;
}
var k = thisMonth - num;
for(var i=1; i<=k; i++){
if(i < 10){
SelectUtil.addOption(_sel, "0"+i, i+"月");
}else{
SelectUtil.addOption(_sel, i, i+"月");
}
}
//$("select[name='"+_sel+"']option[value='"+thisMonth+"']").attr("selected", "true");
};
//构建当前年到指定年的下拉列表，
//@param 为select标签的id值
//@param 0为当前年，1为当前年和上一年 ...(参数不允许大于当前年)
SelectDateUtil.buildPointYear = function(_sel, num){
SelectUtil.cleanOptions(_sel);
var date = new Date();
var thisYear = date.getFullYear();
if(parseInt(num) >= parseInt(thisYear)){
alert("参数不允许大于当前年!");
return;
}
var k = thisYear - num;
for(var i=parseInt(thisYear); i>=parseInt(k);i--){
SelectUtil.addOption(_sel, i, i);
}
};
SelectUtil.js代码如下：
function SelectUtil(){
}
//清除Select中所有的options
SelectUtil.cleanOptions = function(_sel){
jQuery("#" +_sel).empty();
};
//增加option
SelectUtil.addOption = function(_sel,value,text){
returnjQuery("<option value='"+ value +"'>"+ text + "</option>").appendTo("#" +_sel);
};
