<!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. [LintCode] Find the Connected Component in the Undirected Graph

    Find the Connected Component in the Undirected Graph Find the number connected component in the undi ...

  2. PCIE xilinx v5 IP核使用前的研究

    外带一个月前啃的一个星期,加本星期心无旁骛,啃出些心得,广惠后人.但愿有用. trn信号是数据链路层的信号 TLP包是数据链路层传给transaction层的包 解包需要一个transaction的协 ...

  3. vue-cli项目配置图解

    配置vue项目机构步骤1.搭建环境:node.npm2.安装vue脚手架工具:npm install -g vue-cli3.初始化项目:vue init webpack vuedemo(“vuede ...

  4. linux怎么关闭iptables linux如何关闭防火墙

    Linux系统下面自带了防火墙iptables,iptables可以设置很多安全规则.但是如果配置错误很容易导致各种网络问题,那么如果要关闭禁用防火墙怎么操作呢,咗嚛本经验以centos系统为例演示如 ...

  5. c++11新增的一些便利的算法

    c++11新增加了一些便利的算法,这些新增的算法使我们的代码写起来更简洁方便,这里仅仅列举一些常用的新增算法,算是做个总结,更多的新增算法读者可以参考http://en.cppreference.co ...

  6. linux命令（48）：打乱一个文本文件的所有行

    如果用python读进内存再打乱的思路,如果大文件的话,就比较麻烦了 网上找到一个简单的方法,shuf: $ shuf --help 用法: shuf [选项]... [文件] 或者: shuf -e ...

  7. linux命令（39）：shell 打印偶数行，奇数行 ,行号

    awk 命令: 1. 打印行号和内容: awk '{print NR":"$0}' 2. 输出:偶数行和奇数行到文件 awk '{print $0.txt > NR%2.tx ...

  8. [DIOCP3-IocpTask说明书]基于IOCP引擎的多线程任务的投递和回调处理单元

    [说明] IocpTask是基于Iocp引擎的多线程任务投递和处理单元,可以方便的把任务进行投递到IOCP线程进行统一调度和处理,是模仿QDAC-QWorker的处理方式,支持D7以上的版本. [使用 ...

  9. [MyBean说明书]-添加IApplicationContextEx01接口手动加载库文件

    主控台接口实现了IApplicationContextEx01接口,可以手动执行加载DLL和配置文件,具体使用方法可以参见DEMO(samples\manualLoadLib)   IApplicat ...

  10. 大量的源文件添加到Android.mk的问题

    LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := game_shared LOCAL_MODULE_FILENAME ...