<!DOCTYPE html>
<html lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>jqGrid demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script th:replace="/common/common_header :: onLoadHeader"></script> <link type="text/css" rel="stylesheet" href="../../static/lib/jqgrid/css/ui.jqgrid.css"
th:href="@{/lib/jqgrid/css/ui.jqgrid.css}"/>
<link type="text/css" rel="stylesheet" href="../../static/lib/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css"
th:href="@{/lib/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css}"/> <!--<script type="text/javascript" src="../../static/lib/jquery/jquery-1.7.1.js"-->
<!--th:src="@{/lib/jquery/jquery-1.7.1.js}"></script>-->
<script type="text/javascript" src="../../static/lib/jqgrid/js/jquery.jqGrid.src.js"
th:src="@{/lib/jqgrid/js/jquery.jqGrid.src.js}"></script>
<script type="text/javascript" src="../../static/lib/jqgrid/js/i18n/grid.locale-cn.js"
th:src="@{/lib/jqgrid/js/i18n/grid.locale-cn.js}"></script> <script type="text/javascript" th:inline="javascript">
$(function () {
$("#jqlist").jqGrid(
{
url: 'jqgridjsondata.json',
datatype: "json",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{name: 'id', index: 'id', width: 55},
{name: 'invdate', index: 'invdate', width: 90},
{name: 'name', index: 'name asc, invdate', width: 100},
{name: 'amount', index: 'amount', width: 80, align: "right"},
{name: 'tax', index: 'tax', width: 80, align: "right"},
{name: 'total', index: 'total', width: 80, align: "right"},
{name: 'note', index: 'note', width: 150, sortable: false}
],
autowidth: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#jqpager',
sortname: 'id',
sortorder: "desc",
mtype: "post",
viewrecords: true,
caption: "JSON Example",
// 分页参数名称
prmNames: {
page: "page",
rows: "rows",
sort: "sort",
order: "order"
}
})
;
$("#jqlist").jqGrid('navGrid', '#jqpager', {edit: false, add: false, del: false, search: true}); });
</script>
<script type="text/javascript" th:inline="javascript">
/**
* 查询事件
*
* @param str
* @returns {{}}
*/
function commitform() {
// 查询参数
var formparamjson = $("#searchform").serializeJson();
$("#jqlist").jqGrid('setGridParam', {
url: "jqgridjsondata.json",
postData: formparamjson, //发送数据
}).trigger("reloadGrid"); //重新载入
}
</script>
</head>
<body>
<!--<a th:href="@{/demo/demo_ui}">返回</a>--> <div class="content" style="width: 1000px; margin: 0 auto; margin-top: 30px;">
<div>
<form id="searchform" class="sui-form form-search">
姓名:<input class="input-medium search-query" type="text" name="name">
   
年龄:<input class="input-medium search-query" type="text" name="age">
<a class="sui-btn btn-primary" th:onclick="'commitform()'">Search</a>
</form>
</div>
<div id="gg">
<table id="jqlist"></table>
<div id="jqpager"></div>
</div>
</div> </body>
</html>

模拟数据“

package com.thunisoft.laglms.service;

import com.thunisoft.laglms.pojo.JQGridPojo;
import com.thunisoft.laglms.pojo.TestEntityPojo;
import com.thunisoft.maybee.engine.db.feature.PageInfo;
import org.springframework.stereotype.Service; import java.util.ArrayList;
import java.util.List; /**
* 用于测试 jqgrid
*
* @author archibald_witwicky
* @version 1.0 2018-4-13 11:22:00 "add new method."
*/
@Service
public class TestServiceImpl implements TestService { /**
* 获取测试实体集合
*
* @return JQGrid Pojos
*/
@Override
public JQGridPojo getTestEntitySet(TestEntityPojo queryVo, PageInfo pageInfo) {
JQGridPojo jqGridPojo = new JQGridPojo(); int totalrecords = 123; int page = pageInfo.getPage();
int records = pageInfo.getRows();
int start = (page * records) + 1;
int end = start + records; // 页数
int total = (int) Math.floor(totalrecords/records); jqGridPojo.setPage(page);
jqGridPojo.setRecords(records);
jqGridPojo.setTotal(total); List<TestEntityPojo> entityPojoList = new ArrayList<>();
for (int i = start; i < end; i++) {
TestEntityPojo testEntityPojo = new TestEntityPojo();
testEntityPojo.setName("test" + i);
testEntityPojo.setAge(i);
testEntityPojo.setSex((i % 2 == 0) ? "男" : "女"); entityPojoList.add(testEntityPojo);
} jqGridPojo.setRows(entityPojoList); return jqGridPojo;
}
}

jqgrid 查询的更多相关文章

  1. jqGrid查询案例(实用)

    var ThisTime = getNowFormatDate(); //加载表格 function GetGrid() { var selectedRowIndex = 0; var $gridTa ...

  2. JqGrid 查询时未设置初始页码导致的问题

    本文所述问题发生在查询的数据有至少2页数据时的情况下.本例中的产品质量查询就是这样. 第一步:查询该时间段内的数据,结果为13页的数据内容,显示当前页第1页.如下图所示: 第二步:点击翻页按钮,打开第 ...

  3. JqGrid查询数据为空时给表格添加提示信息

    在JqGrid的loadComplete事件中添加下面的代码就可以实现上图的效果 loadComplete: function () { var rowNum = $("#purchaser ...

  4. 导出jqgrid表格数据为EXCEL文件,通过tableExport.js插件。

    今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...

  5. JqGrid 获取所有数据

    jqGrid使用本地数据时,当jqGrid配置的rowNum小于本地总数据量(records属性记录总数据,可以通过records获取到本地总数据量),调用getRowData方法获取到的只是显示的部 ...

  6. jqGrid jqGrid分页参数+条件查询

    HTML <div class="row"> <div class="col-sm-20"> <form id="for ...

  7. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

随机推荐

  1. Yii2 使用 faker 生成假数据(转)

    测试过程中有时候需要生成大量的假数据,faker 是一个生成假数据的类库,可以生成姓名,电话,IP地址,密码,ISBN等等你能想到的或者你想不到的各种类型的假数据. Yii2.0已经集成该类库,不用再 ...

  2. Android新特性--ConstraintLayout完全解析

    Android新特性--ConstraintLayout完全解析 本篇文章的主题是ConstraintLayout.其实ConstraintLayout是Android Studio 2.2中主要的新 ...

  3. Android Studio 代码导航快捷键总结

    Android Studio 代码导航快捷键总结 这篇文章主要介绍了Android Studio 代码导航快捷键的相关资料,需要的朋友可以参考下   简评:作为一位 Android 开发者,Andro ...

  4. linux杀掉tomcat应用进程。停止tomcat应用

    ps -ef |grep tomcat |grep -v grep |awk '{print $2}' |xrags kill -9

  5. iOS 在object-c 中调用c文件 方法

    1,新建c 头文件  lib.h 定义 c 函数 2,新建 c 实现文件,新建模板选中 c File  lib.c 3,oc 中调用,引用 c 头文件 lib.h ok .搞定

  6. [sql]生产库全备/mysql库体积大小查看

    将生产db全备到内网某机器 两个思路: 1, 直接内网mysqldump导出. 因为阿里云的rds只有私网ip,所以办公网机器无法直接连到rds执行mysqldump 解决: 通过ssh tunnel ...

  7. Python Socket网络编程详解

    Socket 简介 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. s ...

  8. Flink 中的kafka何时commit?

    https://ci.apache.org/projects/flink/flink-docs-release-1.6/internals/stream_checkpointing.html @Ove ...

  9. angular学习笔记(三十)-指令(8)-scope

    本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...

  10. MATLAB学习之内存溢出的管理方法

    今天用Matlab跑程序,由于数据量太大,又出现 Out of memory. Type HELP MEMORY for your options.的问题.看到这篇文章非常实用,转过来方便查阅~ 用 ...