初始化JqGrid的方法:
function initJQGrid(){ $("#jqgridTable").jqGrid({ multiselectWidth : 30, scrollOffset : 20, altRows : false, deepempty : true, sortable : true, hidegrid : false, height : '308', multiselect : true, multiboxonly : true, viewsortcols : [true,'horizontal',false], datatype : 'json', jsonReader : { repeatitems : false }, mtype : 'post', url : "${ctx}/babyis/wcbj/txgl/searchTree.action?yunzStart=1&yunzEnd=40", colModel : [ { name : 'mmxm', label : '姓名', width : 90, sortable : false }, { name : 'zhm', label : '主号', width : 110, sortable : false }, { name : 'chmstr', label : '从号', width : 145, sortable : false } ], pager : '#jqgridDiv', //分页栏div的id rowNum : 10, //初始行数 rowList : [10,15], //每页的行数 viewrecords : true, subGrid : true, //子表 subGridRowExpanded: function(subgrid_id, row_id) { //下拉,显示详细信息 $("#"+subgrid_id).css("height","190"); //设置下拉详细信息的高度 $("#"+subgrid_id).html("<iframe src='${ctx}/babyis/wcbj/txgl/showYhDetail.action?userId="+row_id+"' width='100%' height='190' frameborder='0'></iframe>"); //加载html }, onSelectRow: function(id){ var ids = jQuery("#jqgridTable").jqGrid('getGridParam', 'selarrrow'); //获得所有选中的行 for (var i = 0; i < ids.length; i++) { var rowData = JQuery("#jqgridTable").jqGrid('getRowData',ids[i]); //获得每行的数据 var sjh = rowData.zhm; //行对象.列名 可获得该行该列的值 if(rowData.chmstr != "") { sjh = sjh+","+rowData.chmstr; } var value = rowData.mmxm+"("+sjh+")"; window.sxrJson[ids[i]] = value; } var sxr = document.getElementById("sxr"); setValueToSxr(sxrJson, sxr); $("#wcbj_txgl_sendAllTxdx").hide(); }, onSelectAll: function(aRowids,status){ //checkbox复选框,全选事件 aRowids 所有选中的行id status 头上全选 true为选中 if(status){ for (var i = 0; i < aRowids.length; i++) { var rowData = jQuery("#jqgridTable").jqGrid('getRowData',aRowids[i]); var sjh = rowData.zhm; if(rowData.chmstr != "") { sjh = sjh+","+rowData.chmstr; } var value = rowData.mmxm+"("+sjh+")"; window.sxrJson[aRowids[i]] = value; } var sxr = document.getElementById("sxr"); setValueToSxr(sxrJson, sxr); $("#wcbj_txgl_sendAllTxdx").hide(); } } }); }
html页面:
<!--很简单的div--> <table id="jqgridTable"></table> <div id="jqgridDiv"></div>
从前台改变jgrid加载时的url,传入相应的参数,后台传入JSon数据重新加载JqGrid
function searchTxYh(urlEn) { jQuery("#jqgridTable").jqGrid("setGridParam", { url: urlEn, //设置表格的url datatype: "json" //设置数据类型 }).trigger("reloadGrid"); }
后台数据的组装:
public void searchTree() throws Exception { String mmxm = getParameter("mmxm"); String mmdh = getParameter("mmdh"); String mcyjStart = getParameter("mcyjStart"); String mcyjEnd = getParameter("mcyjEnd"); String yunzStart = getParameter("yunzStart"); String yunzEnd = getParameter("yunzEnd"); StringBuffer sb = new StringBuffer(); if(StringUtils.isNotEmpty(mcyjStart)) { sb.append(" and wbda.mcyj >= "+mcyjStart.replaceAll("-", "")); } if(StringUtils.isNotEmpty(mcyjEnd)) { sb.append(" and wbda.mcyj <= "+mcyjEnd.replaceAll("-", "")); } if (StringUtils.isNotEmpty(yunzStart) && StringUtils.isNotEmpty(yunzEnd)) { sb.append(" and wbda.mcyj is not null "); Long d = CalendarUtil.getLongDate();// 得到当前时间 String date = CalendarUtil.formatByChar(d, '/', '/'); // 根据孕周计算mcyj范围,进行时间比较 int bfDay = (Integer.parseInt(yunzStart)-1) * 7; int afDay = Integer.parseInt(yunzEnd)*7; String bfMcyj = CalendarUtil.getDateBefore(date, bfDay); String afMcyj = CalendarUtil.getDateBefore(date, afDay); sb.append(" and wbda.mcyj <= " + CalendarUtil.getLong(bfMcyj) + " and wbda.mcyj >= " + CalendarUtil.getLong(afMcyj)); } if (StringUtils.isNotEmpty(mmxm)) { sb.append(" and yhjb.mmxm like '%" + mmxm + "%' "); } int pageNum = 1; if(StringUtils.isNotEmpty(this.getParameter("page"))) pageNum = Integer.parseInt(this.getParameter("page")); int pageSize = 10; if(StringUtils.isNotEmpty(this.getParameter("rows"))) pageSize = Integer.parseInt(this.getParameter("rows")); Pagination<?> results = this.txglManager.findFztxYhBySql(sb.toString(), mmdh, Integer.valueOf(pageNum), Integer.valueOf(pageSize)); JSONArray js = new JSONArray(); for (Iterator<?> iter = results.getResults().iterator(); iter.hasNext();) { Object[] result = (Object[]) iter.next(); JSONObject objTmp = new JSONObject(); String[] yhglsjhs = (result[2] != null) ? String.valueOf(result[2]).split("#") : null; String zhm = (yhglsjhs != null) ? yhglsjhs[0] : ""; String chmstr = (yhglsjhs != null && yhglsjhs.length > 1) ? yhglsjhs[1].substring(1) : ""; String sjh = (chmstr.equals("")) ? zhm : zhm+","+chmstr; sjh = sjh.replaceAll(",", "_"); objTmp.put("id", result[1]+"_"+sjh); //yhjbid+","+sjh objTmp.put("mmxm", (result[0] != null) ? String.valueOf(result[0]) : ""); objTmp.put("zhm", zhm); objTmp.put("chmstr", chmstr); js.add(objTmp); } JSONObject obj = new JSONObject(); obj.put("rows", js); obj.put("total", (results.getTotalCount() + pageSize - 1) / pageSize); obj.put("page", pageNum); obj.put("records", results.getTotalCount()); obj.put("searchstr", sb.toString()); getResponse().setContentType("text/plain"); getResponse().setCharacterEncoding("UTF-8"); getResponse().getWriter().write(obj.toString()); getResponse().getWriter().flush(); }
由于时间问题,就不整理后台代码了,相信亲们能看懂的。
参数说明:
有个很全面的网址:http://blog.csdn.net/homez/archive/2010/07/29/5773675.aspx
给个链接,在这里就不复制粘贴了。