<!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', 55}, {name: 'invdate', index: 'invdate', 90}, {name: 'name', index: 'name asc, invdate', 100}, {name: 'amount', index: 'amount', 80, align: "right"}, {name: 'tax', index: 'tax', 80, align: "right"}, {name: 'total', index: 'total', 80, align: "right"}, {name: 'note', index: 'note', 150, sortable: false} ], auto 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=" 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; } }