HTML
<div class="row">
<div class="col-sm-20">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" style="margin-left: 20px;" for="GOODS_ID">商品ID</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="GOODS_ID" name="GOODS_ID">
</div>
<label class="control-label col-sm-1" style="width: 120px" for="GOODS_NAM">商品名称 </label>
<div class="col-sm-2">
<input type="text" class="form-control" id="GOODS_NAM">
</div>
<div class="col-sm-1" style="text-align:center;">
<button type="button" id="find_btn" class="btn btn-primary">查询</button>
</div>
</div>
</form>
<div class="ibox-content">
<div class="jqGrid_wrapper">
<table id="table_list_2"></table>
<div id="pager_list_2" style="width: 100%"></div>
</div>
</div>
</div>
</div>
table_list_2 数据显示的地方 pager_list_2 表格下面的分页参数
js
/* -----------------------------加载表数据 开始 -------------------------------- */
$(document).ready(function(){
$.jgrid.defaults.styleUI="Bootstrap";
$("#table_list_2").jqGrid({
height:434,autowidth:true, shrinkToFit:true,/* autoScroll: false, *//*forceFit: true, */
colNames:["商品ID","商品名称","商品单价","库存","上架日期","上架时间","商品描述","操作 "],
colModel:[{name:"GOODS_ID",index:"GOODS_ID",autowidth:true,align:"center"},
{name:"GOODS_NAM",index:"GOODS_NAM",autowidth:true,align:"center"},
{name:"GOODS_PRICE",index:"GOODS_PRICE",autowidth:true,align:"center"},
{name:"G_STOCK",index:"G_STOCK",autowidth:true,align:"center"},
{name:"UP_SHELVES_DAT",index:"UP_SHELVES_DAT",autowidth:true,align:"center"},
{name:"UP_SHELVES_TIM",index:"UP_SHELVES_TIM",autowidth:true,align:"center"},
{name:"G_DESC",index:"G_DESC",autowidth:true,align:"center"},
{name:"edit",index:"edit",autowidth:true,align:"center"}
],
pager:"#pager_list_2",
viewrecords:true,hidegrid:false,
url:"<%=path %>/terminal/findGoodInfo",
datatype:'json',
rownumbers: true,
rowNum : 10,
rowList : [ 10, 15,30 ],
jsonReader: {
root:"dataList", page:"currPage", total:"totalpages", // 很重要 定义了 后台分页参数的名字。
records:"totalCount", repeatitems:false, id : "id"
},
gridComplete: function () { // 数据加载完成后 添加 采购按钮
var ids = jQuery("#table_list_2").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn = "<button style='color:#f60' onclick='purchase("+ id +")' >采购</button>";
jQuery("#table_list_2").jqGrid('setRowData', ids[i], { edit: editBtn});
}
},
})
});
点击按钮 获取行数据
function purchase(id){
var model = jQuery("#table_list_2").jqGrid('getRowData', id);
var GOODS_ID = model.GOODS_ID;
var GOODS_NAM = model.GOODS_NAM;
var GOODS_PRICE = model.GOODS_PRICE;
}
条件查询 点击查询按钮的时候:
$(function(){
$("#find_btn").click(function(){
var GOODS_ID = escape($("#GOODS_ID").val());
var GOODS_ID = escape($("#GOODS_NAME").val());
$("#table_list_2").jqGrid('setGridParam',{
url:"goood/query.do",
postData:{'GOODS_ID':GOODS_ID,'GOODS_NAME':GOODS_NAME}, //发送数据
page:1
}).trigger("reloadGrid"); //重新载入
});
});
效果
注意,jsonReader 很重要
需要定义jsonReader来跟服务器端返回的数据做对应
jsonReader的重要分页属性属性
root |
包含实际数据的数组 |
page |
当前页 |
total |
总的页数 |
totalCount |
总的记录数(查出来的总条数) |
jsonReader: {
root:"dataList", page:"currPage", total:"totalpages", // 很重要 定义了 后台分页参数的名字。
records:"totalCount", repeatitems:false, id : "id"
},
服务器返回的json格式
{totalpages: "xxx",
currPage: "yyy",
totalCount: "zzz",
dataList: [
{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"},
{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"}]
}
数据会通过 colModel 中的name 自动装填
1.jqGrid初始化参数
http://blog.mn886.net/jqGrid/
2.jqGrid colModel 参数
http://blog.mn886.net/jqGrid/
jqGrid jqGrid分页参数+条件查询的更多相关文章
-
MongoTemplate 分组分页复合条件查询
一.前言 最近项目使用MongoDB作为数据主要存取的地方 又是第一次接触MongoDB,也是踩了不少坑... 维护数据无非就是增删改查,而里面最复杂的就是查询了 所以来总结一下有关MongoDB的查 ...
-
MyBatis参数条件查询传入的值为0时的判断
MyBatis条件查询对字段判断是否为空一般为: <if test="testValue!=null and testValue != ''"> and test_va ...
-
分页离线条件查询 页面响应500 后端未报异常 list集合有数据
如果 使用同一个Hibernate的DetachedCriteria离线条件查询对象同时查询“过滤后条数” 和 “过滤后的数据集合”,那么查询记录数时需要设置聚合函数条件并且 使用聚合函数 代码要在 ...
-
springboot带分页的条件查询
QueryDSL简介 QueryDSL仅仅是一个通用的查询框架,专注于通过Java API构建类型安全的SQL查询. Querydsl可以通过一组通用的查询API为用户构建出适合不同类型ORM框架或者 ...
-
【JPA】Spring Data JPA 实现分页和条件查询
文章目录 1.在`Repository`层继承两个接口 2.在Service层进行查询操作 3.Page的方法 1.在Repository层继承两个接口 JpaRepository<Admin, ...
-
ajxa分页+多条件查询
操作日志数据库表: 主页面: <script src="../fzl/jquery-1.11.2.min.js"></script> <script ...
-
django项目中的ajax分页和条件查询。
1,路由 #主页面路由 re_path('article/article_list/', article.article_list,name='article/article_list/'), #分页 ...
-
spring JPA分页排序条件查询
@RequestMapping("/listByPage") public Page<Production> listByPage(int page, int size ...
-
动态多条件查询分页以及排序(一)--MVC与Entity Framework版url分页版
一.前言 多条件查询分页以及排序 每个系统里都会有这个的代码 做好这块 可以大大提高开发效率 所以博主分享下自己的6个版本的 多条件查询分页以及排序 二.目前状况 不论是ado.net 还是EF ...
随机推荐
-
c语言是如何实现泛型链表
最近有看一点Linux内核源码,发现内核里大量使用了list_head结构体.百度查了一下,原来内核利用这个结构体实现了泛型. 自认为对链表已经很熟悉的我,决定自己实现一下. 下面以Node和list ...
-
js,jquery转json的几种方法
一.原生js转json, eval()方法,不需要引入外部插件; //由JSON字符串转换为JSON对象 var obj = eval('(' + jsonStr + ')'); 或者 var obj ...
-
jquery使用技巧
1. 禁用右键点击(Disable right-click) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
-
frame和iframe
1.frame不能脱离frameSet单独使用,iframe可以: 2.frame不能放在body中:如下可以正常显示: <!--<body>--> <frameset ...
-
蓝牙4.0模块控制LED彩灯调光调色经验之谈
基于蓝牙模块的智能LED彩灯调光调色控制思路如下: 在此,找一个低功耗蓝牙模块内嵌接入LED灯的控制电路板,接入LED彩灯的控制电路中. 蓝牙模块彩灯控制方式如下,本文两类来解说led灯的控制方式: ...
-
●BZOJ 1531 [POI2005]Bank notes
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=1531 题解: 单调队列优化多重背包DP (弱弱的我今天总算是把这个坑给填了...) 令V[i ...
-
OpenGL 3D旋转的木箱
学习自: https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/#3d 0,首先添加glm ...
-
aop原理及理解
概念 Aspect Oriented Programming,面向切面编程,实际上它是一个规范.一种设计思路,总之是抽象的. 先上图 使用目的 从项目结构上来说 对业务逻辑的各个部分进行隔离,降低业务 ...
-
request 的上传文件
前言:注册接口需要上次头像,fiddle抓的接口如图,这个时候就需要用到:files 2,举例说明 a:有一个上传接口,地址如下:http://xx.xx.xx.xx//upload/stream b ...
-
20135234mqy-——信息安全系统设计基础第十三周学习总结
第十一章 网络编程 11.1 客户端-服务器编程模型 基本操作:事务 当一个客户端需要服务时,向服务器发送一个请求,发起一个事务. 服务器收到请求后,解释它,并以适当的方式操作它的资源. 服务器给客户 ...