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