初始化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
给个链接,在这里就不复制粘贴了。
分享到:
相关推荐
jgGrid 3.3.1带文档和demo
jggrid3.6最详细中文文档 博文链接:https://z-p-h.iteye.com/blog/1486981
jggrid的java实现,官方demo全都是php的,做了一个servlet的demo
详细介绍了在jqGrid的运行环境及以ASP.NET作为服务器端实现数据加载、分页、查找、添加、编辑、删除、浏览等功能的编程实现。
此压缩包中包含jggrid使用说明和实例,还有jqgrid开发包、jquery ui包,方便大家一次使用配置。
最新版jqgrid,有兴趣的朋友可以下载。绝对真实。
jqGrid顶部工具栏扩展,可将导航按钮及自定义按钮添加到表格的顶部,使用方法见https://blog.csdn.net/liandi_123456/article/details/89501692
本程序利用Jqgrid实现本地数据的分页!
jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程
<!doctype html> <... <head> ...meta charset="UTF-8">... 一款非常不错的表格列自由拖动排序js代码,单击鼠标长按表格列自由拖动排序,互换列排序代码,点击表格头部支持表格数据升降大小排序效果。