dhtmlxGrid分页查询,条件查询实例

使用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();
		}
	}






  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论
1 之前上传了dhtmlx的官方demo上去 都很久了 (http: download csdn net detail pxzsky 2946815)看大家最近有需求 希望得到实际的使用代码 因为组件很多 所以我觉得大家可能对一些核心组件还是很感兴趣的 特别是分页列表 树等 这个在项目测试中我都用过了 这次先把列表的拿出来 2 因为涉及版权问题 如果你的产品要开源或者花钱购买授权 都没问题 否则最好还是仅仅内网学习使用 否 则需要考虑后果的 目前dhmtl只有GPL协议和商业协议 3 在我的其他资源中也有关于列表和树的组件使用示例: http: download csdn net detail pxzsky 6659071 这个工程是免费的(也可以认为开源) 里面使用了dhtml tree grid 很多地方用了tree 而grid目前只剩下角色管理列表了 后续也不想再用grid了 你可以参考 如果不想麻烦 那么就接着往下看 4 在它的免费版中(就是可以开源的) 最早(2 5)是没有分页库的 只有商业版有 后来经过高人指点 得到了crack 带有分页js库 很好用 其实主要是知道js中要传递的分页参数名字就ok了 5 资源包中有具体使用代码和组件的整个js 前端使用jsp 你只需要看分页那部分即可 其他的传的变量可以不管 以下粘贴重要的ui代码调用: <script type "text javascript"> var currpage <% request getParameter "cntPage" %>; 记录当前页面 $ document ready function { 初始化列表 initGrid ; } ; window dhx globalImgPath "${ctx} images public "; 初始化列表 function initGrid { showSkyLoading "数据加载中 请稍候 " ; mygrid new dhtmlXGridObject "projectlist" ; mygrid setImagePath " script dhtml grid imgs " ; mygrid setHeader "客户 项目 状态 是否ZZ 审核 提交时间 提交人 编辑 删除" ; mygrid setInitWidths " 180 90 50 70 90 70 50 50" ; mygrid setColAlign "left left left center left left left left left" ; mygrid setColTypes "ro ro ro ro ro ro ro ro ro" ; mygrid enableAutoHeight true "460" ; mygrid init ; mygrid setSkin "gray" ; mygrid enablePaging true ${splitPageSize} 5 "pagingArea" true "recinfoArea" ; mygrid loadXML "${ctx} project getProjectList action userScope " + ${userScope} ajustDms "xml" ; } function ajustDms { hideSkyLoading ; ajustFrameDms ; if currpage null && currpage "" && currpage "null" { mygrid changePage currpage ; } } < script> 后台接收分页参数: int iposStart 0; String posStart this getParameter "posStart" ; 相当于request getParameter "posStart" ; if posStart null && posStart equals "" { iposStart Integer parseInt posStart ; } int splitPageSize PreferenceUtil getSplitPageSize ; 当前列表分页条数配置(pageSize) 默认15条 SplitPageInfo spi new SplitPageInfo ; spi setPageSize splitPageSize ; 设置当前页信息 int currentPage 0; currentPage iposStart splitPageSize + 1; spi setCurrentPage currentPage ; 因为这个版本已经很老了 所以在IE10或其他新浏览器中会有些变形 如果用新版本 这个分页库能不能继续使用只有自己再尝试了 希望这个对大家有用 ">1 之前上传了dhtmlx的官方demo上去 都很久了 (http: download csdn net detail pxzsky 2946815)看大家最近有需求 希望得到实际的使用代码 因为组件很多 所以我觉得大家可能对一些核心组件还是很感兴趣的 特别是分页列表 树等 [更多]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

caiyl1314

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值