标签：
jquery grid是一个很好的表格框架，可以很好的实现排序、分页等常用的功能，最近用到了，简单总结一下，以供以后查看。
<script type="text/javascript" src="jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jqgrid/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="jqgrid/locale-zn.js"></script>
主要的JS文件就前两个，第三个是为了本地化，可以不加，另外在新增一条记录的时候的弹窗使用的是zdialog，因此还引入了zdialog的js文件，如果有其他需求，可以按照需要添加JS文件。
<link type="text/css" rel="stylesheet" href="jqueryui/10/jquery-ui.css" id="uiskin"></link> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></link> <link type="text/css" rel="stylesheet" href="jqgrid/ui.jqgrid.css"></link> <link type="text/css" rel="stylesheet" href="growl/jquery.growl.css"></link> <link rel="stylesheet" href="zDialog/zDialog.css" type="text/css"></link>
同样，根据需要引入CSS文件。
<style> /**设置字体**/ html, body * { margin: 0; padding: 0; font-size: 14px; } /**表头自动换行**/ th.ui-th-column div { white-space : normal !important; height : auto !important; padding : 0px; } </style>
在页面上需要两个div，一个用来放表格，一个用来放分页条：
<div class="container">
<table id="list"></table>
<div id="pager"></div>
</div>
$(function() { $("#list").jqGrid({ // options }); });
cols 是在页面上要显示的列名
var cols = [ ‘姓名‘, ‘密码‘, ‘用户权限‘];
colNames : cols
colModel是数据库字段与显示的列名之间的对应关系
var colSetting = [ { name : ‘username‘,//字段名称 index : ‘username‘,//传到服务器端用来排序用的列名称 align : ‘center‘,//在表格中显示的位置 width : 200,//td宽度 editable : true,//是否可编辑 }, { name : ‘passwd‘, index : ‘passwd‘, align : ‘center‘, width : 200, editable : true }, { name : ‘role‘, index : ‘role‘, align : ‘center‘, width : 160, editable : true, sortable : false } ]; colModel : colSetting,
表示加载表格数据时的路径。
url : tableURL,
后台实现：
private int page;//当前页数 private int rows;//每页显示的记录数 private String sord;//排序顺序 private String sidx;//排序字段 private String nd; private boolean _search;
public String showTableData() throws UnsupportedEncodingException{ String sem_mask = request.getParameter("em_mask"); String sna_mask = request.getParameter("na_mask"); String em_mask = null; String na_mask = null; if(sem_mask!=null && !"".equals(sem_mask)||sna_mask!=null && !"".equals(sna_mask)){ em_mask = URLDecoder.decode(sem_mask,"UTF-8"); na_mask = URLDecoder.decode(sna_mask,"UTF-8"); } else { em_mask = sem_mask; na_mask = sna_mask; } TableContentUtil tc = sysOperateLogService.getTableData(page, rows, sord, sidx,em_mask,na_mask); Gson gson = new Gson(); this.reply(gson.toJson(tc)); return null; }
这里是带着过滤条件的查询，因为表格上方一般都有根据某些条件进行查询的需求，此处加了两个查询条件。过滤时，前台的JS方法：
function gridReload(){ var em_mask = jQuery("#search_email").val()||""; var na_mask = jQuery("#search_name").val()||""; //设置查询参数后重新加载数据，setGridParam jQuery("#list").jqGrid(‘setGridParam‘, { url : encodeURI(encodeURI(tableURL+"?em_mask=" + em_mask + "&na_mask=" + na_mask)), page : 1 } ).trigger("reloadGrid"); }
查询出数据列表后，将list数据转换成JSON传递到前台即可；
service实现：
public TableContentUtil getTableData(int page, int rows, String sord, String sidx,String em_mask,String na_mask) { TableContentUtil tc = new TableContentUtil(); int resultsNum = sysOperateLogDao.getCounts(em_mask,na_mask); int pages = 1 + (resultsNum-1) / rows; List<SysOperateLog> logs = sysOperateLogDao.getLog(page, rows, sord, sidx,em_mask,na_mask); tc.setPage(page); tc.setRecords(resultsNum); tc.setTotal(pages); UserData ud = new UserData(); ud.setPesons(resultsNum); tc.setUserData(ud); List<TableRowUtil> cons = new ArrayList<TableRowUtil>(); for(SysOperateLog log : logs){ TableRowUtil row = new TableRowUtil(); row.setId(log.getId()); row.setCell(log.toArray()); cons.add(row); } tc.setRows(cons); return tc; }
TableContentUtil是自己封装的一个对象，用来存放查询出的数据，具体的内容如下：
public class TableContentUtil { private int page; // page number private int total; // the total page number private int records; // the number of records private UserData userData; private List<TableRowUtil> rows; /***********get/set*********/
UserData这个对象并不是必须的，只是想测试一下，从后台带过去的数据，在总计位置显示的效果，所以加上了这个。
DAO层实现：
public List<SysOperateLog> getLog(int pageNum, int pageSize, String sord, String sidx, String em_mask, String na_mask) { Criteria criteria = this.getSession().createCriteria(SysOperateLog.class); if(em_mask!=null && !"".equals(em_mask)){ criteria.add(Restrictions.like("userName","%"+em_mask+"%")); } if (na_mask!=null && !"".equals(na_mask) ) { criteria.add(Restrictions.like("cnname","%"+na_mask+"%")); } criteria.setFirstResult((pageNum - 1) * pageSize); criteria.setMaxResults(pageSize); if(sord.matches("asc")){ criteria.addOrder(Order.asc(sidx)); } else if(sord.matches("desc")){ criteria.addOrder(Order.desc(sidx)); } try{ criteria.list(); } catch(Exception e){ e.printStackTrace(); } return criteria.list(); }
使用的是criteria的查询方式，使用session.createQuery(HQL).list(),加上对应的条件也是可以的，这两者本质上没有什么差别。
每页显示条数，要跟rowList结合使用
rowNum : 10,
rowList : [ 10, 20, 30, 40, 50 ],
每页显示条数的列表，是一个数组，rowNum的值必须是rowList中的一个，加入rowNum 为5，但是在rowList中没有5，那么默认显示rowList的第一个值。
boolean类型，表示是否可以排序；
表示排序的方式，asc或者desc
sortable : true, sortorder : "asc",
sortname : ‘id‘
当前的排序字段，如果要设置一个字段不可排序，那么可以设置colModel中的该字段的sortable属性为false；
boolean类型， true时表示表示显示表格底部的一行。
函数表示在表格数据加载完成之后执行的操作，当前是在数据加载完成之后计算一列的数据之和，rn表示编号列。只有数字类型的才可以进行求和计算。
gridComplete : function(){ var userData = $(this).jqGrid(‘getGridParam‘, ‘userData‘); //将合计值显示出来 $(".ui-jqgrid-sdiv").show();
//表示对role这一行进行求和 var count = $(this).getCol("role", false, "sum"); $(this).footerData("set", { rn : userData.pesons,// the column name of the row index is ‘rn‘ cb : "小计",// the column name of check box is ‘cb‘ username : count, passwd : "合计", role : userData.pesons } ); } })
.jqGrid(‘navGrid‘, "#pager", { editfunc : editRecord, addfunc : addRecord, delfunc : delRecord, search : false, refresh : true, }).navSeparatorAdd("#pager",{
sepclass : ‘ui-separator‘,
sepcontent: ‘‘
}).jqGrid(‘navButtonAdd‘,"#pager",{
caption : "",
buttonicon :‘ui-icon-extlink‘,
onClickButton : exportRecord,
position: ‘first‘,
title: "导出EXCEL",
}).jqGrid(‘navButtonAdd‘,"#pager",{
caption : "",
buttonicon :‘ui-icon-script‘,
onClickButton : changStyle,
title: "风格",
});
方法是在分页栏上添加对于当前表格的增删改按钮，以便于对当前表格的操作。
editfunc：编辑操作
addfunc: 新增操作
delfunc: 删除操作
search: false为禁用
refresh: 刷新列表
效果图如下：
实现：
新增和修改使用zdialog的方式弹出窗口，具体方法如下：
/** * ADD USER */ function addRecord() { showForm(400, 200, "添加用户", addUserURL); } /** * custom EDIT USER */ function editRecord(id) { if (id == "") { Dialog.alert("请选择要修改的项！"); return; } var rowData = $("#list").jqGrid(‘getRowData‘, id); rowData.id = id; showForm(400, 200, "编辑用户", addUserURL + "?" + $.param(rowData)); } /** * DELETE RECORDS */ function delRecord(ids) { if (ids == "") { Dialog.alert("请选择要删除的项！"); return; } $.ajax({ type : "POST", url : delURL, data : {"ids" : ids.toString()}, error : function() { $.growl.notice({ message : "请求失败" }); }, success : function(msg) { if (msg == 1) { $.growl.notice({ message : "已成功删除", }); $("#list").trigger("reloadGrid"); } else { $.growl.notice({ message : "操作失败" }); } } }); }
zdialog弹窗：
/** * ADD OR EDIT FORM * @param width * @param height * @param title * @param url */ function showForm(width, height, title, url){ var diag = new Dialog(); diag.Width = width; diag.Height = height; diag.Title = title; diag.URL = url; //点击确定后调用的方法 diag.OKEvent = function(){ $(diag.innerDoc).find("form").submit(); diag.submited = true; }; diag.OnLoad = function(){ if(diag.submited){ $("#list").trigger("reloadGrid"); diag.close(); } }; diag.show(); }
在弹出的页面上接收传递过去的参数，如果是修改，就显示内容，如果是新增，那么显示文本框即可，点击确定按钮后，根据修改或者新增的参数走后台，使用ajaxForm的方式提交表单。
弹出的页面代码：
<%@ page language="java" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% // get the edit parameters String id = request.getParameter("id"); if(id == null){ id = ""; } String userName = request.getParameter("userName"); if(userName == null){ userName = ""; } String cnname = request.getParameter("cnname"); if(cnname == null){ cnname = ""; }else{ cnname = new String(cnname.getBytes("ISO-8859-1"),"UTF-8"); } String actionContent = request.getParameter("actionContent"); if(actionContent == null){ actionContent = ""; }else{ actionContent = new String(actionContent.getBytes("ISO-8859-1"),"UTF-8"); } String actionDate = request.getParameter("actionDate"); if(actionDate == null){ actionDate = ""; } %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>GRID</title> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></link> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="growl/jquery.growl.js"></script> <script type="text/javascript" src="funcTree/js/jquery.form.min.js"></script> <%--<script type="text/javascript" src="sys/customJs/index.js"></script> --%> <link rel="stylesheet" href="growl/jquery.growl.css" type="text/css"></link> <script type="text/javascript"> $(function(){ $("#addUser").ajaxForm({ beforeSubmit : function() { // 表单验证 var name = $("#userName").val(); alert(name); if (!name) { alert("请填写名称"); $("#userName").focus(); return; } }, success : function(msg, status) { // 成功返回 if (msg == "1") { $.growl.notice({ message : "添加成功", }); } else { $.growl.notice({ message : "添加失败", }); } } }); }); </script> </head> <body> <form id="addUser" class="form-horizontal" method="post" action="user/sysLogAction_saveLog.do"> <!-- hidden area, used for edit --> <input type="hidden" id="id" name="id" value="<%=id%>"> <!-- hidden areas --> <div class="input-group"> <span class="input-group-addon">邮箱</span> <input id="username" name="userName" type="text" class="form-control" value="<%=userName%>"> </div> <div class="input-group"> <span class="input-group-addon">用户名</span> <input id="passwd" name="cnname" type="text" class="form-control" value="<%=cnname%>"> </div> <div class="input-group"> <span class="input-group-addon">操作内容</span> <input id="passwd" name="actionContent" type="text" class="form-control" value="<%=actionContent%>"> </div> <div class="input-group"> <span class="input-group-addon">操作时间</span> <input id="passwd" name="actionDate" type="text" class="form-control" value="<%=actionDate%>"> </div> </form> </body> </html>
做出来的功能基本就是上面的了，对于某些特殊数据进行高亮显示的功能还没有完成，比如性别是女的用户高亮显示，暂时还没法实现，其次，小计和总计也不够完善，有问题的地方欢迎大家指正。
标签：
原文地址：http://www.cnblogs.com/liaidai/p/4721394.html
