ext grid 分页例子(前后台)

js

/*var treeData=parent.top.getComboxData();
treeData=addIconPath(treeData);*/
var slh="",ywmc="",fqr="",cyz="",slsjq="",slsjz="",lczt="",lcsl="";




Ext.onReady(function(){
var htmldata="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_slh\" /></div> <div class=\"textdiv\">受理号</div> <div class=\"inputdiv\"><input type=\"text\" class=\"inputtext\" id=\"slh\"/></div> </div>"; //受理号  
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_ywmc\" /></div> <div class=\"textdiv\">业务名称</div> <div class=\"inputdiv\"><input type=\"text\" class=\"inputtext\" id=\"ywmc\"/></div> </div>";//业务名称
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_fqr\" /></div> <div class=\"textdiv\">发起人</div> <div class=\"inputdiv\"><input type=\"text\" class=\"inputtext\" id=\"fqr\"/></div> </div>";//发起人
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_cyz\" /></div> <div class=\"textdiv\">参与者</div> <div class=\"inputdiv\"><input type=\"text\" class=\"inputtext\" id=\"cyz\"/> <div><input type=\"button\" onclick=\"alert(1)\" value=\"选择人员\"></div> </div> </div>";//参与者
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_slsjq\" /></div> <div class=\"textdiv\">受理时间起</div> <div class=\"inputdiv\" id=\"slsjq\"></div> </div>";//受理时间起
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_slsjz\" /></div> <div class=\"textdiv\">受理时间止</div> <div class=\"inputdiv\" id=\"slsjz\"></div> </div>";//受理时间止
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_lczt\" /></div> <div class=\"textdiv\">流程状态</div> <div class=\"inputdiv\"><select id=\"lczt\" style=\"width:250px\"><option value=\"1\">办理之中</option> <option value=\"2\">正常办结</option> <option value=\"3\">强制办结</option> <option value=\"4\">废弃</option></select></div> </div>";//流程状态
htmldata+="<div class=\"rows\"> <div class=\"checkdiv\"> <input type=\"checkbox\" class=\"cbox\" id=\"c_lcsl\" /></div> <div class=\"textdiv\">流程实例</div> <div class=\"inputdiv\"><input type=\"text\" class=\"inputtext\" id=\"lcsl\"/> <div><input type=\"button\" onclick=\"openFlowWin()\" value=\"选择实例\"></div></div> </div>";//流程实例

function getFlowData(){
slh="",ywmc="",fqr="",cyz="",slsjq="",slsjz="",lczt="",lcsl="";
slh=$("#c_slh").attr("checked")=="checked"?$("#slh").val():"";
ywmc=$("#c_ywmc").attr("checked")=="checked"?$("#ywmc").val():"";
fqr=$("#c_fqr").attr("checked")=="checked"?$("#fqr").val():"";
cyz=$("#c_cyz").attr("checked")=="checked"?$("#cyz").val():"";
slsjq=$("#c_slsjq").attr("checked")=="checked"?$("#slsjq").val():"";
slsjz=$("#c_slsjz").attr("checked")=="checked"?$("#slsjz").val():"";
lczt=$("#c_lczt").attr("checked")=="checked"?$("#lczt").val():"";
lcsl=$("#c_lcsl").attr("checked")=="checked"?$("#lcsl").val():"";
grids.store.load({params:{start:0,limit:page_size,slh:slh,ywmc:ywmc,fqr:fqr,cyz:cyz,slsjq:slsjq,slsjz:slsjz,lczt:lczt,lcsl:lcsl}});
}

var buttonpanel=new Ext.Panel({
frame:true,
border:false,
anchor: "100% 32%",
   html:htmldata,
   buttons:[{text:"查询",listeners:{"click":function(){
    var num=0;
   $("[class='cbox'][checked]").each(function(){num++});
    if(num==0){
    alert("请选择查询条件")
    return
    };
    getFlowData();
    }}},
    {text:"重置"},{text:"导出"}]
});
var page_size = 15; //定义页面记录最大显示数量 
var MyRecord = Ext.data.Record.create([ 
{name : 'slid'},
{name : 'ywmc'},
{name : 'ywlx'},
{name : 'slsj'},
{name : 'fqr'},
{name : 'lczt'}
]); 
var store = new Ext.data.Store({
autoLoad:false,
proxy : new Ext.data.HttpProxy({
type: "ajax",
method: 'POST',
    url : 'http://127.0.0.1:8080/xzyzt/device/device_getFlow.do'
   }),
   reader : new Ext.data.JsonReader({
   root : "root",
   totalProperty : "total"
   }, MyRecord)
});

//点击下一页时传参
store.on("beforeload",function(){
store.baseParams={slh:$("#slh").val(),ywmc:$("#ywmc").val(),fqr:$("#fqr").val(),cyz:$("#cyz").val(),slsjq:$("#slsjq").val(),slsjz:$("#slsjz").val(),lczt:$("#lczt").val(),lcsl:$("#lcsl").val()};
});
var grids = new Ext.grid.GridPanel({
   store:store,
   xtype: "grid",
   loadMask:true,
   columnLines: true,
   anchor: "100% 68%",
   autoWidth: true,
   viewConfig: {
        forceFit: true,
        stripeRows: true
},
  sortableColumns:false,
  bbar : new Ext.PagingToolbar({
   pageSize : page_size, 
   store : store, 
   displayMsg:'当前显示 {0} - {1} 条记录 共 {2} 条记录', 
   displayInfo : true 
  }),
  columns: [
  new Ext.grid.RowNumberer(),
  {id:'slid', header: "受理号", width: 120, sortable: false, dataIndex: 'slid'},
       {id:'ywmc', header: "业务名称", width: 260, sortable: false, dataIndex: 'ywmc'},
       {id:'ywlx', header: "业务类型", width: 220, sortable: false, dataIndex: 'ywlx'},
       {id:'slsj', header: "受理时间", width: 140, sortable: false, dataIndex: 'slsj'},
       {id:'fqr', header: "发起人", width: 100, sortable: false, dataIndex: 'fqr'},
       {id:'lczt', header: "流程状态", width: 80, sortable: false, dataIndex: 'lczt'}]
});





new Ext.Viewport({
layout: 'anchor',
items:[buttonpanel,grids]
})




})
  function init(){
window.setTimeout(setDate1,100); 
window.setTimeout(setDate2,100); 
}


function setDate1(){
if(document.getElementById("slsjq")){
var date1 = new Ext.form.DateField({  
       name:"Date1",  
       editable:false, //不允许对日期进行编辑  
       width:250,
       format:"Y-m-d",  
       emptyText:"请选择日期..."
   });  
date1.render('slsjq');
}else{
window.setTimeout(setDate1,100);
}
}

function setDate2(){
if(document.getElementById("slsjz")){
var date2 = new Ext.form.DateField({
       name:"Date2",  
       editable:false, //不允许对日期进行编辑  
       width:250,
       format:"Y-m-d",  
       emptyText:"请选择日期..."
   });  
date2.render('slsjz');
}else{
window.setTimeout(setDate2,100);
}
}


/*

 function addIconPath(data){
  for(var i=0,len=data.length;i<len;i++){
  if(data[i].icon){
  data[i].icon="http://localhost:8080/xzyzt/css/navtree/ico.png"
  //data[i].icon="../"+data[i].icon;
  if(data[i].children&&data[i].children.length>0){
  addIconPath(data[i].children);
  }
  }
  }
  return data;
 }

  var flowTree=new Ext.tree.TreePanel({
  animate:true,
      enableDD:true,
      enableDrag:true,
      rootVisable:false,
      autoHeight:true,
      lines:true,
      listeners : {click : function(node) {
      }
      },
      root:{  //流程树调用treeData
         nodeType: 'async',  
         text: '业务类型',  
         id: 'source',  
         expanded: true,
         children: treeData
        }
      })




   var flowWin = new Ext.Window({
       title: "选择流程实例",
       closeAction:"hide",
       width: 300,
       height: 400,
       modal:true,
       items:[flowTree]
   });

  function openFlowWin(){
  flowWin.show();
  }*/

JAVA

public void getFlow(){
DeviceDao dao = new DeviceDao();
String slh=request.getParameter("slh");
String ywmc=request.getParameter("ywmc");
String fqr=request.getParameter("fqr");
String cyz=request.getParameter("cyz");
String slsjq=request.getParameter("slsjq");
String slsjz=request.getParameter("slsjz");
String lczt=request.getParameter("lczt");
String lcsl=request.getParameter("lcsl");
int start=Integer.parseInt(request.getParameter("start"));
int limit=Integer.parseInt(request.getParameter("limit"));
System.out.println("start:"+start+" limit:"+limit);
start = start + 1;
limit = start + limit;
String sql1 = "select count(*) from （ ";//查询total语句 sql1 += "select distinct a.slid,nvl(a.title,0) as ywmc,nvl(a.buss_type,0) as ywlx,b.fg_stime as slsj,c.us_name as fqr,a.task_status as lczt from MH_TASK a,oa2_flog b,oa2_user c where b.fg_ruser=c.us_ident and a.slid=b.fg_inst and b.fg_ident=1 "; String sql = "select * from (select rownum as rn,d.* from（";//查询流程数据语句 sql += "select distinct a.slid,nvl(a.title,0) as ywmc,nvl(a.buss_type,0) as ywlx,b.fg_stime as slsj,c.us_name as fqr,a.task_status as lczt from MH_TASK a,oa2_flog b,oa2_user c where b.fg_ruser=c.us_ident and a.slid=b.fg_inst and b.fg_ident=1 "; if(slh!=""&&slh!=null){ sql += " and a.slid like '%"+slh+"%'"; sql1 += " and a.slid like '%"+slh+"%'"; } if(ywmc!=""&&ywmc!=null){ sql += " and a.title like '%"+ywmc+"%'"; sql1 += " and a.title like '%"+ywmc+"%'"; } if(fqr!=""&&fqr!=null){ sql += " and b.fg_ruser = '"+fqr+"'"; sql1 += " and b.fg_ruser = '"+fqr+"'"; } if(cyz!=""&&cyz!=null){ sql += " and a.users like '%|"+cyz+"|%'"; sql1 += " and a.users like '%|"+cyz+"|%'"; } if(slsjq!=""&&slsjq!=null){ sql += " and b.fg_stime >= '"+slsjq+"'"; sql1 += " and b.fg_stime >= '"+slsjq+"'"; } if(slsjz!=""&&slsjz!=null){ sql += " and b.fg_stime <= '"+slsjz+"'"; sql1 += " and b.fg_stime <= '"+slsjz+"'"; } if(lczt!=""&&lczt!=null){ sql += " and a.task_status = '"+lczt+"'"; sql1 += " and a.task_status = '"+lczt+"'"; } if(lcsl!=""&&lcsl!=null){ sql += " and a.flowid = '"+lcsl+"'"; sql1 += " and a.flowid = '"+lcsl+"'"; } sql += " order by a.slid desc"; sql += " ）d) where rn >= "+start+" and rn <"+limit+" "; sql1 += " order by a.slid desc )"; System.out.println(sql); System.out.println("sql1:"+sql1); int count = dao.getCountExec(sql1); ArrayList<flowEntity> lst = dao.getFlowData(sql); String json="{\"total\":"+count+",\"root\":[";
for(flowEntity tmp:lst){
json+="{\"slid\":\""+tmp.getSlid().toString()+"\",\"ywmc\":\""+tmp.getYwmc().toString()+"\",\"ywlx\":\""+tmp.getYwlx().toString()+"\",\"slsj\":\""+tmp.getSlsj().toString()+"\",\"fqr\":\""+tmp.getFqr().toString()+"\",\"lczt\":\""+tmp.getLczt().toString()+"\"},";
}
String data=json.substring(0, json.length()-1);
data+="]}";
//System.out.println(data);
HtmlUtil.writerJson(response, data);
}