jqgrid 查询 | 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;

    }

}