jqgrid 查询

<!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;
    }
}