页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。
经过实验发现，使用.datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条件，重新加载页面时，由于没有请求后台，只加载表格，则会发生页面条件清空，表格数据还在或者表格数据为空分页展示的记录却不为0的现象，所以也需要重置数据和分页参数，具体代码如下：
[javascript] view plain copy
/**
* dataGrid初始化表格
* @param id datagrid的id
* @param column 展示的列名
* @param opt 设置自定义datagrid属性
*/
function commonInitDataGrid(id, column, opt){
var initData =
{
"code":100,
"msg":"",
"data":{"totalDataCount":0,"totalPageCount":0,"list":[],"properties":{"footer": []}}
}
//校验参数
if(isEmpty(id) || isEmpty(column)){
jQuery.messager.alert("系统提示", "系统错误，请联系技术人员！")
return
}
//默认属性
var defaultOpt= {
"url": null,
"method": 'POST', //请求方式
"columns": column,
"width": document.body.clientWidth < 756 ? 756 - 18 : document.body.clientWidth - 18,
"remoteSort": false,
"rownumbers": true,
"pagination": true,
"showFooter": true,
"fitColumns": true,
"pageNumber": 1,
"pageSize": 20,
"pageList": [10, 20, 30, 50, 100],
"singleSelect": true,
"striped": true,
"loadFilter": function (result) {
if (result.code == "100") {
//解析json结果集，返回给datagrid
var obj =
{
"total": result.data.totalDataCount,
"rows": result.data.list,
"footer": result.data.properties.footer
}
return obj
} else {
jQuery.messager.alert("系统提示", result.msg)
return false
}
}
}
if(!isEmpty(opt)){
//替换自定义属性
$.extend(defaultOpt, opt)
}
//把属性与事件放到表格中，进行初始化
$("#" + id).datagrid(defaultOpt)
$("#" + id).datagrid('loadData', initData)
}
说明：1.设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；
2.pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。
3.loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面
用Jatools打印插件，目前好像都是收费的版本，但我在网上找到个免费的版本就拿来用了，做的练习。可实现分页，打印。
<script type="text/javascript">
function JatoolsPrinterViewPDFReport(page){
var frm = document.getElementById("toolsForm")
var url = "<%=webapp %>/B1F216Action.do?method=JatoolsPrinterViewPDFReport"
url+="&page="+page
frm.action=url
frm.target='_self'
frm.submit()
}
function doPrint(how)
{
//打印文档对象
var myDoc = {
documents:document,// 打印页面(div)们在本文档中
copyrights:'杰创软件拥有版权 www.jatools.com'
}
// 调用打印方法
if(how == '打印预览...')
jatoolsPrinter.printPreview(myDoc,true ) // 打印预览
else if(how == '打印...')
jatoolsPrinter.print(myDoc ,true) // 打印前弹出打印设置对话框
else
jatoolsPrinter.print(myDoc ,false) // 不弹出对话框打印
}
<body style="margin:10px">
<html:form styleId="toolsForm" method="post"
action="/B1F216Action.do?method=JatoolsPrinterViewPDFReport"
enctype="multipart/form-data">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%"></td>
<td align="left">
<hr size="1" color="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%" align="left"><img src="<%=webapp
%>/jasReports/images/reload.GIF" border="0"
onclick="JatoolsPrinterViewPDFReport(0)"></td>
<td> </td>
<%
if (pageIndex >0)
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/first.GIF" border="0" onclick="JatoolsPrinterViewPDFReport(0)">
<img src="<%=webapp
%>/jasReports/images/previous.GIF" border="0"
onclick="JatoolsPrinterViewPDFReport(<%=pageIndex - 1%>)">
</td>
<%
}
else
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/first_grey.GIF" border="0">
<img src="<%=webapp %>/jasReports/images/previous_grey.GIF" border="0">
</td>
<%
}
if (pageIndex <lastPageIndex)
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/next.GIF"
border="0" onclick="JatoolsPrinterViewPDFReport(<%=pageIndex +
1%>)">
<img src="<%=webapp %>/jasReports/images/last.GIF"
border="0"
onclick="JatoolsPrinterViewPDFReport(<%=lastPageIndex%>)">
</td>
<%
}
else
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/next_grey.GIF" border="0">
<img src="<%=webapp %>/jasReports/images/last_grey.GIF" border="0">
</td>
<%
}
%>
<td width="50%" align="center">
<input type="button" value="打印预览..." onclick="doPrint(this.value)">
<input type="button" value="打印..." onclick="doPrint(this.value)">
<input type="button" value="直接打印" onclick="doPrint(this.value)">
</td>
</tr>
</table>
<hr size="1" color="#000000">
</td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td align="center">
<%=sbuffer%>
</td>
<td width="50%"></td>
</tr>
</table>
</html:form>
</body>
后台代码
// 1.html显示
JRHtmlExporter exporter = new JRHtmlExporter()
//设置导出参数
request.getSession().setAttribute( BaseHttpServlet.DEFAULT_JASPER_PRINT_SESSION_ATTRIBUTE, jasperPrint)
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint)
exporter.setParameter(JRExporterParameter.OUTPUT_WRITER, out)
exporter.setParameter(JRHtmlExporterParameter.IS_USING_IMAGES_TO_ALIGN, Boolean.FALSE)//页面显示图片为X，可设置false
exporter.setParameter(JRExporterParameter.CHARACTER_ENCODING, "GBK")
int pageIndex = 0
int lastPageIndex = 0
if (jasperPrint.getPages() != null)
{
lastPageIndex = jasperPrint.getPages().size() - 1
}
String pageStr = request.getParameter("page")
try
{
pageIndex = Integer.parseInt(pageStr)
}
catch(Exception e)
{
}
if (pageIndex <0)
{
pageIndex = 0
}
if (pageIndex >lastPageIndex)
{
pageIndex = lastPageIndex
}
StringBuffer sbuffer = new StringBuffer()
exporter.setParameter(JRExporterParameter.PAGE_INDEX, Integer.valueOf(pageIndex))
exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "")
exporter.setParameter(JRHtmlExporterParameter.BETWEEN_PAGES_HTML, "")
exporter.setParameter(JRHtmlExporterParameter.HTML_FOOTER, "")
exporter.setParameter(JRExporterParameter.OUTPUT_STRING_BUFFER, sbuffer)
request.setAttribute("pageIndex", pageIndex)
request.setAttribute("lastPageIndex", lastPageIndex)
request.setAttribute("sbuffer", sbuffer)
//此处就是html导出方式，打印部分在页面通过插件实现
exporter.exportReport()
