使用jquery的ajax get将页面条件请求到后台，取得数据库数据，分页查询，返回前台grid中。
引入所需文件：
<script>window.dhx_globalImgPath = "dhtmlxCombo/codebase/imgs/";</script> <link rel="stylesheet" href="css/dhtmlxgrid.css" type="text/css"></link> <link rel="stylesheet" type="text/css" href="js/pagination/jquery.pagination/pagination.css" /> <script type="text/javascript" src="js/jquery-1.6.1.js"></script> <script type="text/javascript" src="js/pagination/jquery.pagination/jquery.pagination.js"></script> <script type="text/javascript" src="js/dhtmlxgrid.js"></script> <link rel="stylesheet" href="css/dhtmlxcalendar.css" type="text/css"></link> <link rel="stylesheet" href="css/dhtmlxcalendar_dhx_blue.css" type="text/css"></link> <link rel="stylesheet" type="text/css" href="dhtmlxCombo/codebase/dhtmlxcombo.css" /> <link rel="stylesheet" type="text/css" href="css/dhtmlxgrid_dhx_custom.css" /> <link href="css/storemanage.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="css/dhtmlxgrid.css" type="text/css"></link> <script type="text/javascript" src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_cntr.js"></script> <script type="text/javascript" src="dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script> <script type="text/javascript" src="dhtmlxGrid/codebase/ext/dhtmlxgrid_validation.js"></script> <script type="text/javascript" src="js/dhtmlxcalendar.js"></script> <script type="text/javascript" src="js/wpCalendar.js"></script>
js代码
<script>
var mygrid;
var combo_unite;
var myCalendar;
var combo_intype;
var intype='';
var insheetno='';
var date1='';
var date2='';
var unitname='';
var sheetmname='';
var checkmname='';
$(document).ready(function(){
adjustDisp();
mygrid = new dhtmlXGridObject('grid_storein');
mygrid.enableAutoWidth(true);
mygrid.setImagePath("dhtmlxGrid/codebase/imgs/");
mygrid.setSkin("dhx_custom");
mygrid.setHeader("入库单号,往来单位,入库类型,制单人,制单日期,金额,审核人,审核时间,记账人,记账日期,备注");
mygrid.setInitWidths("*,*,*,*,*,*,*,*,*,*,*");
mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
mygrid.setColAlign("left,left,left,left,left,left,left,left,left,left,left");
mygrid.init();
combo_intype = new dhtmlXCombo("combo_zone1", "alfa1", 105);
combo_intype.enableFilteringMode(true);
//combo_intype.attachEvent("comboFilter",comboFilter(13, json, 'combo_intype', 'py', true, true));
combo_unite = new dhtmlXCombo("combo_zone2", "alfa2", 155);
combo_unite.enableFilteringMode(true);
//combo_unite.attachEvent("comboFilter",comboFilter(13, json, 'combo_intype', 'py', true, true));
// y.addOption([[1, 'aaaa', "color:red"], [2, 'bbbb'], [3, 'cccc'], [4, 'dddd'], [5, 'eeee']]);
combo1();
combo2();
//alert('1');
myCalendar = new dhtmlXCalendarObject(["date1", "date2"]);
loadCount_no();
});
function loadCount_no(){
intype=combo_intype.getComboText();// 取得页面上条件，入库类型 作为查询条件传到后台
insheetno=$('#insheetno').val();// 取得页面上条件，入库单号 作为查询条件传到后台
date1=$('#date1').val();// 取得页面上条件，入库日期1 作为查询条件传到后台
date2=$('#date2').val();// 取得页面上条件，入库日期2 作为查询条件传到后台
unitname=combo_unite.getComboText();//
// alert($('#sheetmname').val());
sheetmname=$('#sheetmname').val();// 取得页面上条件，制单人
checkmname=$('#checkmname').val();// 取得页面上条件，审核人
if(intype==''||intype==null){
intype='';
}
if(insheetno==''||insheetno==null){
insheetno='';
}
if(date1==''||insheetno==null){
date1='';
}
if(date2==''||insheetno==null){
date2='';
}
if(unitname==''||unitname==null){
unitname='';
}
if(sheetmname==''||sheetmname==null){
sheetmname='';
}
if(checkmname==''||checkmname==null){
checkmname='';
}
//intype = encodeURI(encodeURI(intype));
//insheetno = encodeURI(encodeURI(insheetno));
//unitname = encodeURI(encodeURI(unitname));
//date1 = encodeURI(encodeURI(date1));
//date2 = encodeURI(encodeURI(date2));
//sheetmname = encodeURI(encodeURI(sheetmname));
//checkmname = encodeURI(encodeURI(checkmname));
intype=encodeURIComponent(intype);
insheetno=encodeURIComponent(insheetno);
unitname=encodeURIComponent(unitname);
date1=encodeURIComponent(date1);
date2=encodeURIComponent(date2);
sheetmname=encodeURIComponent(sheetmname);
checkmname=encodeURIComponent(checkmname);
$.ajax({
async:false,
cache:false,
type:"GET",
url:"sick3/getCounttnb.htm?intype="+intype+"&insheetno="+insheetno+"&unitname="+unitname+"&date1="+date1+"&date2="+date2+"&sheetmname="+sheetmname+"&checkmname="+checkmname,
error:function(){
alert("服务器内部错误！");
},
success:function(data){
if(data=='fail'){
alert("获取数据失败！");
}else{
//alert(data);
createPagination_no(data);
}
}
});
}
var pageSize = 10;
var pageIndex = 0;
function createPagination_no(pageCount){//创建分页标签，pageCount为返回的记录数
if(pageCount==0){
pageCount=0;
}
//分页，pageCount是总条目数，这是必选参数，其它参数都是可选
$("#pagination").pagination(pageCount, {
callback: pageCallback_no,
prev_text: '上一页', //上一页按钮里text
next_text: '下一页', //下一页按钮里text
items_per_page: pageSize, //显示条数
num_display_entries: 6, //连续分页主体部分分页条目数
current_page: pageIndex, //当前页索引
num_edge_entries: 2 //两侧首尾分页条目数
});
}
function pageCallback_no(index, jq){//翻页回调
pageIndex = index; //当前页索引
loadgrid_no(index);
return false;
}
//条件查询获取当前页未处理报表
function loadgrid_no(index){
intype=combo_intype.getComboText();
insheetno=$('#insheetno').val();
date1=$('#date1').val();
date2=$('#date2').val();
unitname=combo_unite.getComboText();
sheetmname=$('#sheetmname').val();
checkmname=$('#checkmname').val();
if(intype==''||intype==null){
intype='';
}
if(insheetno==''||insheetno==null){
insheetno='';
}
if(date1==''||insheetno==null){
date1='';
}
if(date2==''||insheetno==null){
date2='';
}
if(unitname==''||unitname==null){
unitname='';
}
if(sheetmname==''||sheetmname==null){
sheetmname='';
}
if(checkmname==''||checkmname==null){
checkmname='';
}
//intype = encodeURI(encodeURI(intype));
//insheetno = encodeURI(encodeURI(insheetno));
//unitname = encodeURI(encodeURI(unitname));
//date1 = encodeURI(encodeURI(date1));
//date2 = encodeURI(encodeURI(date2));
//sheetmname = encodeURI(encodeURI(sheetmname));
//checkmname = encodeURI(encodeURI(checkmname));
intype=encodeURIComponent(intype);
insheetno=encodeURIComponent(insheetno);
unitname=encodeURIComponent(unitname);
date1=encodeURIComponent(date1);
date2=encodeURIComponent(date2);
sheetmname=encodeURIComponent(sheetmname);
checkmname=encodeURIComponent(checkmname);
if(index!=0){
index = pageIndex;
}
//mygrid.clearAndLoad("sick3/loadtnb.htm");
//alert('3');
//alert(intype);
mygrid.clearAndLoad("sick3/loadtnb.htm?index="+index+"&size="+pageSize+"&intype="+intype+"&insheetno="+insheetno+"&unitname="+unitname+"&date1="+date1+"&date2="+date2+"&sheetmname="+sheetmname+"&checkmname="+checkmname);
}
function adjustDisp(){//高度自适应，取相应的数据
var avalibleHeight = $(window).height()-250;
if(avalibleHeight>260){
pageSize = Math.floor((avalibleHeight-27)/26);
$("#grid_newApply").css("height",avalibleHeight);
}
}
function combo1(){
$.ajax({
type:"post",
url: "sick3/hellohello.htm",
cache: false,
error:function(){
// alert("没有该病人记录！");
},
success: function(data){
if(data=="fail"){
alert("错误");
}else{
//alert(data[0].contents);
var json = eval("{" + data + "}");
//alert(json[0].contents);
for(var i=0;i<json.length;i++){
// alert(json[i].contents);
combo_intype.addOption(i,json[i].contents);
}
}
}
});
}
function combo2(){
$.ajax({
type:"post",
url: "sick3/combo2.htm",
cache: false,
error:function(){
//alert("没有该病人记录！");
},
success: function(data){
if(data=="fail"){
alert("错误");
}else{
//alert(data[0].contents);
var json = eval("{" + data + "}");
//alert(json[0].contents);
for(var i=0;i<json.length;i++){
//alert(json[i].contents);
combo_unite.addOption(i,json[i].contents);
}
}
}
});
}
function dosearch(){
loadCount_no();
}
文本框，combo的html略，放table里设计界面更整洁，
<div id="grid_storein" style="height: 389px; width: 900px;"></div> <div id="pagination" style="position: relative; margin-left: 580px"></div>
后台action代码（传中文get请求需要转码）
@RequestMapping(value = "getCounttnb", method = RequestMethod.GET)
public void getCount(HttpServletRequest request,HttpServletResponse response,String status) throws IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
List<Map> list = null;
DBOperator db = null;
PrintWriter pw = response.getWriter();
int count = 0;
String intype = request.getParameter("intype");
// System.out.println(intype);
String insheetno = request.getParameter("insheetno");
String date1 = request.getParameter("date1");
String date2 = request.getParameter("date2");
String unitname = request.getParameter("unitname");
String sheetmname = request.getParameter("sheetmname");
String checkmname = request.getParameter("checkmname");
try {
db = new DBOperator();
String sql="select count(*) as count from (" +
"select s.insheetno,s.unitname,s.intype,s.sheetmname," +
"to_char(s.sheetdate, 'yyyy-MM-dd'),d.inqty * d.pprice as price," +
"s.checkmname,to_char(s.checkdate, 'yyyy-MM-dd'),s.regmname,to_char(s.regdate, 'yyyy-MM-dd'),s.comments " +
"from mw_insheets s, mw_insheets_details d where s.insheetno = d.insheetid ";
if(insheetno!=null &&!"".equals(insheetno)){
// insheetno=URLEncoder.encode(insheetno, "utf-8");
insheetno=new String(insheetno.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.insheetno='"+insheetno+"'";
}
if(intype!=null &&!"".equals(intype)){
// intype=URLEncoder.encode(intype, "utf-8");
intype=new String(intype.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.intype='"+intype+"'";
System.out.println(intype);
}
if(date1!=null &&!"".equals(date1)){
sql += " and to_char(s.sheetdate,'yyyy-mm-dd')>='"+date1+"'";
}
if(date2!=null &&!"".equals(date2)){
sql += " and to_char(s.sheetdate,'yyyy-mm-dd')<='"+date2+"'";
}
if(unitname!=null &&!"".equals(unitname)){
// unitname=URLEncoder.encode(unitname, "utf-8");
unitname=new String(unitname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.unitname='"+unitname+"'";
}
if(sheetmname!=null &&!"".equals(sheetmname)){
// sheetmname=URLEncoder.encode(sheetmname, "utf-8");
sheetmname=new String(sheetmname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.sheetmname='"+sheetmname+"'";
}
if(checkmname!=null &&!"".equals(checkmname)){
// checkmname=URLEncoder.encode(checkmname, "utf-8");
checkmname=new String(checkmname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.checkmname='"+checkmname+"'";
}
sql+=")";
list = db.find(sql);
db.commit();
count=Integer.valueOf(String.valueOf(list.get(0).get("count")));
pw.print(count);
}catch(Exception e){
e.printStackTrace();
pw.print("fail");
}finally{
db.freeCon();
}
pw.flush();
pw.close();
}
//返回疾病结果
@RequestMapping(value = "loadtnb", method = RequestMethod.GET)
public void loadGrid(HttpServletRequest request,HttpServletResponse response,String status) throws IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
int Pagesize = Integer.parseInt(request.getParameter("size"));
int index = Integer.parseInt(request.getParameter("index"));
String intype = request.getParameter("intype");
String insheetno = request.getParameter("insheetno");
String date1 = request.getParameter("date1");
String date2 = request.getParameter("date2");
String unitname = request.getParameter("unitname");
String sheetmname = request.getParameter("sheetmname");
String checkmname = request.getParameter("checkmname");
String pagingSql1 = "select OHYEAH.* from (select OHNO.*,rownum no from ("; // 用于分页// 段1
String pagingSql2 = ") OHNO where rownum <= ?) OHYEAH where no > ?"; // 用于分页段2
String sql = "select s.insheetno,s.unitname,s.intype,s.sheetmname,to_char(s.sheetdate,'yyyy-MM-dd') as sheetdate," +
"d.inqty*d.pprice as price,s.checkmname,to_char(s.checkdate,'yyyy-MM-dd') as checkdate,s.regmname,to_char(s.regdate,'yyyy-MM-dd') as regdate,s.comments " +
"from mw_insheets s,mw_insheets_details d where s.insheetno=d.insheetid ";
if(insheetno!=null &&!"".equals(insheetno)){
// insheetno=URLEncoder.encode(insheetno, "utf-8");
insheetno=new String(insheetno.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.insheetno='"+insheetno+"'";
}
if(intype!=null &&!"".equals(intype)){
// intype=URLEncoder.encode(intype, "utf-8");
intype=new String(intype.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.intype='"+intype+"'";
System.out.println(intype);
}
if(date1!=null &&!"".equals(date1)){
sql += " and to_char(s.sheetdate,'yyyy-mm-dd')>='"+date1+"'";
}
if(date2!=null &&!"".equals(date2)){
sql += " and to_char(s.sheetdate,'yyyy-mm-dd')<='"+date2+"'";
}
if(unitname!=null &&!"".equals(unitname)){
// unitname=URLEncoder.encode(unitname, "utf-8");
unitname=new String(unitname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.unitname='"+unitname+"'";
}
if(sheetmname!=null &&!"".equals(sheetmname)){
// sheetmname=URLEncoder.encode(sheetmname, "utf-8");
sheetmname=new String(sheetmname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.sheetmname='"+sheetmname+"'";
}
if(checkmname!=null &&!"".equals(checkmname)){
// checkmname=URLEncoder.encode(checkmname, "utf-8");
checkmname=new String(checkmname.getBytes("iso-8859-1"), "utf-8");
sql+=" and s.checkmname='"+checkmname+"'";
}
DBOperator db = null;
try {
db = new DBOperator();
List list = db.find(pagingSql1+sql+pagingSql2,new Object[]{Pagesize*index+Pagesize,Pagesize*index});
response.setContentType("text/xml;charset=utf-8");
PrintWriter pw = null;
pw = response.getWriter();
String vmpagckage = "com/cpinfo/learn/template/";
String vmname = "hello.vm";
String vm = VelocityUtils.generateGridVm(vmpagckage, vmname,"MW_hello", list);
pw.print(vm);
pw.flush();
pw.close();
}catch(Exception e){
e.printStackTrace();
}finally{
db.freeCon();
}
}