<!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. django性能优化缓存view详解

    缓存提升性能: 1.通常的view会去数据库端执行相关的查询然后交由template渲染.数据库访问通常就是性能的瓶颈所在. 2.由于许多数据要很久才会变一次.两次连续的数据库访问通常返回的数据是一样 ...

  2. 全相FFT

    作者:桂. 时间:2017-12-02  23:29:48 链接:http://www.cnblogs.com/xingshansi/p/7956491.html 一.相位提取 以正弦信号为例,x = ...

  3. 使用Method swizzling (也就是运行时交换两个方法的imp ，实现重写方法)

    贴上资源.很简单 https://gist.github.com/rudyjahchan/2191796 http://itony.me/592.html http://stackoverflow.c ...

  4. win764bit系统plsqldeveloper11连接oracle11g64bit配置方法

    win764bit系统plsqldeveloper11连接oracle11g64bit配置方法: 原因:plsqldeveloper都是32位的没有64位的程序 准备工作: 1,先要下载instant ...

  5. 菜鸟学Java（十）——分页查询

    今天继续跟大家说说一些非常基础的东西,这次我们说说分页查询.说到分页,可能很多人都听说过什么真分页.假分页的.简单解释一下,拿第二页,每页20条为例:真分:数据库里取 的就是21-40条:假分:数据库 ...

  6. Spark Streaming的接收KAFKA的数据

    https://github.com/lw-lin/CoolplaySpark/blob/master/Spark%20Streaming%20%E6%BA%90%E7%A0%81%E8%A7%A3% ...

  7. CMD命令下访问Oracle数据库

    1.非集群下 Windows环境下数据库 127.0.0.1 只是个IP代表  实际要输入你要访问的数据库服务器IP地址的 如果数据库服务器不在本机上,需要加上数据库服务器的地址:用户名/密码@IP地 ...

  8. Linux 守护进程

    1.什么是守护进程 守护进程daemon指的是在后台运行的进程 2.前台任务和后台任务 前台任务:独占命令行窗口,运行完毕或手动终止,才能执行其他命令 以redis服务为例 redis-server ...

  9. 【转】（五）unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

    原创至上,移步请戳:(五)unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components 4.Interaction Components 本节涵盖了处 ...

  10. Asp.Net时间方法大全

    DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(- Convert.ToInt32(dt.DayOfWeek.To ...