分页（未完成） | 易学教程

jqGrid是用ajax来实现对请求与响应的处理。后台返回分页结果（一个JSON格式的结果封装类）

<div id="jqGridPager"></div>
<script th:src="@{/admin/plugins/jqgrid-5.3.0/jquery.jqGrid.min.js}"></script>

结果封装类（result对象）实现了字段的统一。在前端的一些场景，比如列表的渲染，对用户操作的提醒，或者一些交互动作，就是根据这几个字段的组合来完成这些功能。

public class Result<T> implements Serializable {//高效率的异地共享实例对象
    private static final long serialVersionUID = 1L;
    private int resultCode;//自定义的业务码；如'200'-成功
    private String message;//返回给前端的信息，用于业务提示；如'success'，'未查询到记录' 等等
    private T data;//数据结果；T-泛型，可以是POJO、...

从后台轮播图的封装流程如下：List->PageResult->Result

jqGrid重要参数

jsonReader：用于设置如何解析从Server端发回来的json数据
formatter：数据库中存储的图片地址，使用formatter，为其添加img标签

$(function () {
    $("#jqGrid").jqGrid({
        url: '/admin/carousels/list',
        datatype: "json",
        colModel: [
            {label: 'id', name: 'carouselId', index: 'carouselId', width: 50, key: true, hidden: true},
            {label: '轮播图', name: 'carouselUrl', index: 'carouselUrl', width: 180, formatter: coverImageFormatter},
            {label: '跳转链接', name: 'redirectUrl', index: 'redirectUrl', width: 120},
            {label: '排序值', name: 'carouselRank', index: 'carouselRank', width: 120},
            {label: '添加时间', name: 'createTime', index: 'createTime', width: 120}
        ],
        height: 560,
        rowNum: 10,
        rowList: [10, 20, 50],
        styleUI: 'Bootstrap',
        loadtext: '信息读取中...',
        rownumbers: false,
        rownumWidth: 20,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "data.list",// json中代表实际模型数据的入口
            page: "data.currPage",// json中代表当前页码的数据
            total: "data.totalPage",// json中代表页码总数的数据
            records: "data.totalCount"// json中代表数据行总数的数据
        },
        prmNames: {
            page: "page",//第几页
            rows: "limit",//一页几条
            order: "order",
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });

来源：CSDN

作者：masami269981

链接：https://blog.csdn.net/masami269981/article/details/104638638

标签

jqgrid