借助jgrid控件分页查询

一：jsp

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="3">
 <tr>
<td height="34" width="100%" style="padding:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="line-height: 34px;height: 34px;">
<tr>
<td class="barWord">
&nbsp;&nbsp;<img src="/StoreManagement/images/icon_card.gif" width="16" height="16" align="absmiddle" style="margin-bottom: 4px;">
当前位置&nbsp;<img src="/StoreManagement/images/common/rightArrow.png" width="8" height="14" align="absmiddle" style="margin-bottom: 2px;">
基础数据配置&nbsp;<img src="/StoreManagement/images/common/rightArrow.png" width="8" height="14" align="absmiddle" style="margin-bottom: 2px;">
物料卡管理
</td>
<td align="right" class="white" style="padding-right:20px">
<a href="#" class="barBtn" id="keyword_id_rfInfos_addBtn" onclick="addRfInfos();">
          <img src="../images/btn_add.gif" width="18" height="18" align="absmiddle" /> 新增
          </a>
          <a href="#" class="barBtn" onclick="javascript:editRfInfos();">
          <img src="../images/btn_edit.gif" width="18" height="18" align="absmiddle" /> 编辑
          </a>
          <a href="#" class="barBtn" onclick="javascript:delRfInfos();">
          <img src="../images/delete.gif" width="18" height="18" align="absmiddle" /> 删除
          </a>
<a href="#" class="barBtn" onClick="javascript:history.go(-1);">
<img src="/StoreManagement/images/btn_left.gif" width="18" height="18" align="absmiddle"> 后退
</a> 
<a href="#" class="barBtn" onClick="javascript:history.go(+1);">
<img src="/StoreManagement/images/btn_right.gif" width="18" height="18" align="absmiddle"> 前进
</a> 
<a href="#" class="barBtn" onclick="javascript:location.reload();">
<img src="/StoreManagement/images/btn_refresh.gif" width="18" height="18" align="absmiddle"> 刷新
</a>
</td>
</tr>
</table>
  </td>
 </tr>
<tr>
   <td valign="top">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td  style="height:30px; width:100%;border-bottom:1px solid #cfd8e0;">
    <table width="100%" border="0" cellpadding="3" cellspacing="1">
    <tr>
    <td width="10%" align="center" style="margin-left: 20px;">
        <div class="div_keyword_prompt">
        射频识别(RFID)数字码
        </div>
       </td>
       <td width="20%">
        <input class="input_keyword" type="text" id="keyword_id_rfInfos_rfId" placeholder="请输入射频识别(RFID)数字码" />
       </td>
       <td width="10%" align="center" style="margin-left: 20px;">
        <div class="div_keyword_prompt">
        射频识别(RFID)状态
        </div>
       </td>
        <td width="20%">
        <select class="select_keyword" id="keyword_id_rfInfos_status">
        <option value="-1">-全部查询-</option>
<option value="0">未被绑定</option>
<option value="1">已被绑定</option>
<option value="2">其他</option>
        </select>
       </td>
      <td width="10%" align="right" style="padding-right: 20px;">
      <a href="#" class="query" onclick="javascript:queryRfInfosList();">
<img src="../images/common/query_logo.png" width="18" height="18" align="absmiddle">查询
</a>
      </td>
    </tr>
    </table>
    </td>
    </tr>
<tr>
   <td valign="top">
   <div style="overflow:auto;height:100%; width:100%;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="keyword_id_tab_rfInfosList">
    </table>
   </div>
  </td> 
</tr>
<tr>
<td>
<div style="overflow:auto;height:40px; width:100%;" id="keyword_id_div_rfInfosListPage">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>

二:jQuery

// 条件查询RFID列表
function queryRfInfosList()
{
var rfId = $("#keyword_id_rfInfos_rfId").val();
var status = $("#keyword_id_rfInfos_status option:selected").val();
var pageIndex = $('#keyword_id_div_rfInfosListPage').getGridParam('page');   //第X页
var pageNums = $('#keyword_id_div_rfInfosListPage').getGridParam('pageNums');//总页数

if(undefined == pageIndex || "" == pageIndex)
{
pageIndex = 1;
}
else
{
pageIndex ++;
}
if(undefined == pageNums || "" == pageNums)
{
pageNums = 20;
}
// 先清空列表
   $("#keyword_id_tab_rfInfosList").jqGrid("GridUnload");
// 生成列表
$("#keyword_id_tab_rfInfosList").jqGrid({
url : "${ctx}/RfInfos/queryRfInfosList.do",
datatype : "json",
postData : {
rfId:rfId,
status:status,
pageIndex : pageIndex,
pageNums : pageNums
},
//height :  document.body.clientHeight - 165,
colNames : ['序号','主键id#','射频识别(RFID)数字码','条形码','射频识别(RFID)状态Id#','射频识别(RFID)状态'],
colModel:[
{name:'num',index:'num', align:'center', sortable:false},
{name:'id',index:'id', align:'center', sortable:false, key : true,hidden:true},
{name:'rfId',index:'rfId',  align:'center', sortable:false},
{name:'barCode',index:'barCode' , align:'center', sortable:false},
{name:'status',index:'status' , align:'center', sortable:false,hidden:true},
{name:'statusName',index:'statusName' , align:'center', sortable:false},
],
rowNum : pageNums,// 每页显示数量
rowList:[10,20,30],// 可选择每页显示数量
pager: '#keyword_id_div_rfInfosListPage',// 分页显示位置
pgtext : "{0} 共 {1} 页",// 自定义格式的分页显示
recordtext: " {0} - {1} 共 {2} 条",// 自定义格式的记录总数
      viewrecords: true, // 是否显示行数
      pginput : true,// 显示跳转输入框
      height : "auto",
autowidth : true,
        jsonReader : {  //后台参数返回前台
 root: "rows",  //包含实际数据的数组
 page: "page",  //当前页
 total: "total",//总页数
 records: "records",//查询出的记录数
 repeatitems : false//每行数据不可重复
},
onPaging : function(pgButton) {


if(pgButton == "next_keyword_id_div_rfInfosListPage")
{
// 下一页
rfId = $("#keyword_id_rfInfos_rfId").val();
status = $("#keyword_id_rfInfos_status option:selected").val();
pageIndex = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'page');
pageIndex ++;
pageNums = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'rowNum');
}
else if(pgButton == "last_keyword_id_div_rfInfosListPage")
{
// 最后一页
rfId = $("#keyword_id_rfInfos_rfId").val();
status = $("#keyword_id_rfInfos_status option:selected").val();
pageIndex = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'lastpage');
pageNums = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'rowNum');
}
else if(pgButton == "prev_keyword_id_div_rfInfosListPage")
{
// 上一页
rfId = $("#keyword_id_rfInfos_rfId").val();
status = $("#keyword_id_rfInfos_status option:selected").val();
pageIndex = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'page');
pageIndex --;
pageNums = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'rowNum');
}
else if(pgButton == "first_keyword_id_div_rfInfosListPage")
{
// 首页
rfId = $("#keyword_id_rfInfos_rfId").val();
status = $("#keyword_id_rfInfos_status option:selected").val();
pageIndex = 1;
pageNums = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'rowNum');
}
else if(pgButton == "user")
{
// 页码跳转事件
rfId = $("#keyword_id_rfInfos_rfId").val();
status = $("#keyword_id_rfInfos_status option:selected").val();
var lastPageNum = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'lastpage');
pageIndex = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'page');
if(pageIndex < 1 || pageIndex > lastPageNum)
{
alert("页码输入不正确");
return ;
}
pageNums = $('#keyword_id_tab_rfInfosList').jqGrid('getGridParam', 'rowNum');
}

$("#keyword_id_tab_rfInfosList").jqGrid('setGridParam',{  
            datatype:'json',  
            postData:{
            rfId:rfId,
status:status,
pageIndex : pageIndex,
pageNums : pageNums
         }, //发送数据      
        }).trigger("reloadGrid");   //重新载入  
},
gridComplete : function(){
}
});


}
三：JAVA 代码

/*
 * ** 条件查询RFID列表清单(分页)（LDQ）
*/
public void queryRfInfosList() {
try {
this.getRequest().setCharacterEncoding("UTF-8");
this.getResponse().setContentType("text/html;charset=utf-8");
} catch (Exception e) {
logger.error(e.getMessage());
return;
}
// 接收页面传值
String strrfId = getRequest().getParameter("rfId");
String strstatus = getRequest().getParameter("status");
String strPageIndex = getRequest().getParameter("pageIndex"); // 第X页
String strPageRowCount = getRequest().getParameter("pageNums"); // 每页显示记录


Integer pageIndex = 0;
Integer rfId = null;
Integer status = null;
Integer pageRowCount = 20; // 每页显示记录
String errorMsg = "";


Map<String, Object> filter = new HashMap<String, Object>();
Map<String, Object> result = new HashMap<String, Object>();


try {
if (null != strPageIndex && !"".equals(strPageIndex)) {
pageIndex = Integer.valueOf(strPageIndex);
}
if (null != strPageRowCount && !"".equals(strPageRowCount)) {
pageRowCount = Integer.valueOf(strPageRowCount);
}
if (null != strrfId && !"".equals(strrfId)) {
rfId = Integer.valueOf(strrfId);
}
if (null != strstatus && !"".equals(strstatus)) {
status = Integer.valueOf(strstatus);
}
if ("-1".equals(strstatus)) {
status = null;
}
} catch (Exception e) {
logger.error(e.getMessage());
returnErrorInfo("页面输入数据格式不正确");
return;
}
Integer dataStartNum = (pageIndex - 1) * pageRowCount; // 初始页
filter.put("dataStartNum", dataStartNum); // 开始的下一条记录
filter.put("dataCount", pageRowCount); // 检索的记录数


filter.put("rfId", rfId);
filter.put("status", status);
// 数据总数
Integer rfInfosNums = getRfInfosService().queryRfInfosNums(filter);
// 数据清单明细
List<RfInfos> rfInfosList = getRfInfosService()
.queryRfInfosList(filter);
if (null == rfInfosList || 0 >= rfInfosList.size() || 0 >= rfInfosNums) {
logger.error("未找到符合条件的数据");
returnErrorInfo("未查找到符合条件的数据");
return;
}
// 总页数
Integer totalPage = BaseUtils.getFloorDev(rfInfosNums, pageRowCount);
JSONObject retObj = new JSONObject();
JSONArray jArr = new JSONArray();
JSONObject rowObj = null;
retObj.put("errorMsg", ""); // 错误标识
retObj.put("page", pageIndex); // 页码序号
retObj.put("total", totalPage); // 总页码数
retObj.put("records", rfInfosNums); // 记录总数
Integer num=dataStartNum+1;
for (RfInfos rfInfos : rfInfosList) {
rowObj = new JSONObject();
rowObj.put("num",num);  
rowObj.put("id", rfInfos.getId());
rowObj.put("rfId", rfInfos.getRfid());
rowObj.put("barCode", rfInfos.getBarcode());
rowObj.put("status", rfInfos.getStatus());
rowObj.put("statusName", Constant.RFINFOS_STATUS_DESC[rfInfos.getStatus()]);
jArr.add(rowObj);
num++;
}
retObj.put("rows", jArr);
try {
// 直接返回JSON菜单，在前台显示
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(retObj.toJSONString());
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}

四：sql语句

<!--条件查询RFID数据列表(分页)LDQ -->
<select id="queryRfInfosList" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from t_rfinfos
where 1=1
<if test="@Ognl@isNotBlank(rfId)">
and rfid = #{rfId,jdbcType=VARCHAR}
</if>
<if test="@Ognl@isNotBlank(status)">
and status = #{status,jdbcType=INTEGER}
</if>
order by id
limit #{dataStartNum, jdbcType=INTEGER}, #{dataCount,
jdbcType=INTEGER}
</select>


<!-- 条件查询RFID数据数量(分页)LDQ -->
<select id="queryRfInfosNums" resultType="java.lang.Integer">
select count(*) from t_rfinfos
where 1=1
<if test="@Ognl@isNotBlank(rfId)">
and rfid = #{rfId,jdbcType=VARCHAR}
</if>
<if test="@Ognl@isNotBlank(status)">
and status = #{status,jdbcType=INTEGER}
</if>
</select>

五，其他

1.获取点击行的数据

var selectId = $("#keyword_id_tab_rfInfosList").jqGrid('getGridParam','selrow');
if(undefined == selectId || 0 > selectId)
{
$.messager.alert("操作提示","请选择需要编辑的行，再点击编辑按钮","info")
return ;
}
// 显示编辑窗口，并填充原数据
var rowData =  $("#keyword_id_tab_rfInfosList").jqGrid('getRowData',selectId);
if(undefined != rowData && null != rowData)
{
var editId = rowData.id;   //选中的id
var rfId = rowData.rfId;
var barCode = rowData.barCode;  
var status = rowData.status;
var statusName=rowData.statusName;

$("#keyword_id_rfInfosEdit_rfId").val(rfId);
$("#keyword_id_rfInfosEdit_barCode").val(barCode);
$("#keyword_id_rfInfosEdit_status").val(statusName);

$("#keyword_id_rfInfos_divEditBack").css("display", "block");
$("#keyword_id_rfInfos_divEditFront").css("display","block");
}
else
{
$.messager.alert("操作提示","未获取到编辑数据","error");
return ;
}

//刷新页面

$("#keyword_id_tab_rfInfosList").trigger("reloadGrid");

//删除选定行

// 判断是否有选中记录，如没有则直接退出
var selectId = $("#keyword_id_tab_rfInfosList").jqGrid('getGridParam','selrow');
if(undefined == selectId || 0 > selectId)
{
$.messager.alert("操作提示","请选择需要删除的行，再点击删除按钮","info");
return ;
}
//获取页面参数
var rowData =  $("#keyword_id_tab_rfInfosList").jqGrid('getRowData',selectId);
if(undefined != rowData && null != rowData)
{
var editId = rowData.id;
}
// 弹出确认删除对话框，提醒用户是否删除该条记录
$.messager.defaults = { ok: "确定", cancel: "取消" };
$.messager.confirm("操作提示", "您确定要删除本条记录吗?", function (data){
      if (data) {
      // 向后台发送ajax请求
      $.ajax({
      type : "POST",
url: "${ctx}/RfInfos/deleteRfInfos.do",
data : {
id : selectId,
},
async: false,
     cache:false,
success: function (data) {
var errorMsg = data.errorMsg;
if("" != errorMsg)
{
$.messager.alert("错误提示",errorMsg, "error");
return ;
}
// 在jqGrid表中删除选中数据
$("#keyword_id_tab_rfInfosList").jqGrid("delRowData", selectId);

// 提示数据删除成功
$.messager.alert("操作提示", "数据删除成功", "info");

},
error: function(data) {
$.messager.alert("错误提示","后台服务通讯故障", "error");
}
      });
      }
      else {
    }
});