<!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. photoshop，钢笔工具锚点类型

    以下是钢笔工具绘制出的三种类型的锚点,分别是:无切线的硬锚点.左右切线平行的锚点.左右切线不平行的锚点. 使用转换点工具点击锚点,可以实现 无切线锚点 和 左右切线平行的锚点 之间的转化: 对 左右切 ...

  2. sqlite 判断表中是否包含 某个字段

    数据库 都有一个 根表..(我的理解) 也就是 你创建了一个数据库 里面就带有 一个表 sqlite_master 字段有 type , name  , tbl_name , rootpage ,sq ...

  3. Oozie-自定义实现WorkFlow中shell action

    拷贝默认的shell目录来进行修改 $ cp -r ./examples/apps/shell/ my-apps/ 定义job.properties nameNode=hdfs://bigdata-0 ...

  4. Atitit gui控件定位解决方案

    Atitit gui控件定位解决方案 1.1. 但是AUTOIT没有找图功能..可以请大侠们写一份这个UDF出来吗?1 1.2. ahk1 1.3. Java +opencv 模板匹配2 1.1. 但 ...

  5. nginx.conf中关于nginx-rtmp-module配置指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...

  6. # tail -f /var/log/zabbix/zabbix_agentd.log sudo: sorry, you must have a tty to run sudo

    /etc/sudoers 1)Defaults requiretty,修改为 #Defaults requiretty,表示不需要控制终端. 2)Defaults requiretty,修改为 Def ...

  7. Swift中Notification.Name这么难用怎么办

    Swift中Notification.Name这么难用怎么办 以前的发送通知的参数就是一个简单的字符串: NSNotificationCenter.defaultCenter().post(" ...

  8. Leetcode:Edit Distance 解题报告

    Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert  ...

  9. python 字符串编码 str和unicode 区别以及相互转化 decode('utf-8') encode('utf-8')

  10. 【Ubuntu】任务管理器loadruner

    linux1 准备工作   可以通过两种方法验证服务器上是否配置了rstatd守护程序:    ①使用rup命令,它用于报告计算机的各种统计信息,其中就包括rstatd的配置信息.使用命令rup 10 ...