<!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. cnetos7最小化安装ifconfig命令找不到怎么办

    我们在安装完centos7最小化系统安装完成后,执行ifconfig命令会报命令未找到.实际上在centos7上,使用“ip addr”和“ip link”命令来查找网卡详情.ifconfig命令已经 ...

  2. MongoDB联合查询 -摘自网络

    1.简单手工关联 首先将结果查询出来放到一个变量里面,然后再查询 u = db.user.findOne({author:"wangwenlong"}); for(var p = ...

  3. Intellij Idea生成serialVersionUID的方法

    默认情况下Intellij IDEA是关闭了继承了java.io.Serializable的类生成serialVersionUID的警告.如果需要ide提示生成serialVersionUID,那么需 ...

  4. Android应用中创建绑定服务使得用户可以与服务交互

    原文:http://android.eoe.cn/topic/android_sdk 一个绑定的服务是客户服务器接口上的一个服务器.一个绑定的服务允许组件(如:活动)来绑定一个服务,传送请求,接收响应 ...

  5. 如何安全的下载Devcon.exe文件

    devcon.exe是windows设备管理器的命令行版本,可以让你在cmd中修改设备,但是微软没有提供单独的下载,只能下载一个2G多的wdk包(windows drive kits)才行.私下使用别 ...

  6. IOS 程序员开发最常用宏定义

    网上对IOS的宏定义比较多,我总结了一些最常用的宏,后续还会继续补上. 1.首次启动判断: #define First_Launched @"firstLaunch" 2.ios7 ...

  7. 《图说VR入门》——DK2入门及其资源汇总

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53174895 作者:car ...

  8. android笔记---主界面(一)

    <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="htt ...

  9. DIOCP开源项目-定义自己要发送的数据结构(MyObject)

    印象中网络程序都是sendBuffer和recvBuffer来发送数据和接收数据,本次Demo演示如何定义定义一个自己的对象,然后我们按照OO的思想直接进行对象的发送和接收,先上个流程图. 下面是客户 ...

  10. Spark SQL利器：cacheTable/uncacheTable【转】

    转自:http://www.cnblogs.com/yurunmiao/p/4936583.html Spark相对于Hadoop MapReduce有一个很显著的特性就是“迭代计算”(作为一个Map ...