jqGrid的简单应用

来源：互联网发布：区和县的区别知乎编辑：程序博客网时间：2024/06/13 22:10

若想了解jqGrid的应用，我们首先应该参考一下jqGrid的中文文档
：http://blog.mn886.net/jqGrid/

jqGrid，强大的jQuery数据显示插件。
在，使用jqGrid前，先要引入几个文件。
这是jqGrid中自带的。

<link rel="Stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />

这这个需要自行去www.jqueryui.com中去下载

    <link rel="Stylesheet" type="text/css" media="screen" href="jqGrid/theme/jquery-ui-1.8.16.custom.css" />

以下几个，需要先引入jquery包。

    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>      <script type="text/javascript" src="jqGrid/js/jquery-ui-1.8.16.custom.min.js"></script>      <script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"></script>      <script type="text/javascript" src="jqGrid/js/jquery.jqGrid.src.js"></script>

在body中加入以下代码：

<table id="list"></table> <div id="pager"></div>

案例：开户<%@ page import="org.apache.commons.lang3.StringUtils" %><%--  Created by IntelliJ IDEA.  User: smt6  Date: 2016/11/11  Time: 16:21  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head>    <title>开户信息查询</title>    <content tag="customCss">        <link rel="stylesheet" type="text/css" media="screen" href="/bootstrap/css/bootstrap.css"/>        <link rel="stylesheet" type="text/css" media="screen"              href="/plugins/jqGrid-master/css/ui.jqgrid-bootstrap.css"/>    </content></head><body><div>    <nobr>        <div>            <form class="form-horizontal" role="form">                <div class="row">                    <div class="col-md-3">                        <label for="userName">姓名：</label>                        <input id="userName" type="text">                    </div>                    <div class="col-md-3">                        <label for="idCardNo">证件号：</label>                        <input id="idCardNo" type="text">                    </div>                    <div class="col-md-3">                        <label for="phone">手机号：</label>                        <input id="phone" type="text">                    </div>                    <div class="col-md-3">                        <label for="userId">用户ID：</label>                        <input id="userId" type="text">                    </div>                </div>                <div class="row">                    <div class="col-md-3">                        <label for="businessRole">用户角色：</label>                        <select id="businessRole" name="businessRole">                            <option value="">全部</option>                            <option value="CREDIT">出借人</option>                            <option value="DEBIT">借款人</option>                        </select>                    </div>                    <div class="col-md-3">                        <label>开始时间：</label>                        <input id="beginTime" type="text" value="${inputTime}">                    </div>                    <div class="col-md-3">                        <label>结束时间：</label>                        <input id="endTime" type="text" value="${inputTime}">                    </div>                </div>                <div class="row">                    <div class="col-md-2">                        <button type='button' class="btn btn-primary btn-block" id="sure">确定                        </button>                    </div>                    <div class="col-md-2">                        <button id="back" type="reset" class="btn btn-primary btn-block">重置                        </button>                    </div>                    <div class="col-md-2">                        <p id="message" style="height: 28px" align="center"></p>                    </div>                </div>            </form>        </div>    </nobr>    <hr style="background-color: #0c0c0c;height: 1px;width: 2000px;">    <c:if test="${verifyDatas != null}">        <p class="text-danger">            严重：用户编号同时存在两条有效的银行卡记录(            <c:forEach var="verifyData" items="${verifyDatas}">                ${verifyData.userId}            </c:forEach>)<br>        </p>    </c:if>   <%-- 这是重点--%>    <div>        <table id="jqGrid"></table>        <div id="jqGridPager"></div>    </div>    <content tag="customJavascript">        <script type="text/ecmascript" src="/plugins/jqGrid-master/js/i18n/grid.locale-cn.js"></script>        <script type="text/ecmascript" src="/plugins/jqGrid-master/js/jquery.jqGrid.js"></script>        <script src="/plugins/datepicker/bootstrap-datepicker.js"></script>        <script src="/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>        <script>            $('#beginTime').datepicker({                format: "yyyy-mm-dd",                autoclose: true            });            $('#endTime').datepicker({                format: "yyyy-mm-dd",                autoclose: true            });        </script>        <script type="text/javascript">            //初始化            //注册时间            function formatUnixTimestamp(cellValue, options, rowObject) {                var day = moment(cellValue);                var formatted = day.format("YYYY-MM-DD HH:mm:ss");                return formatted;            }            //用户角色            function formatuserId(cellValue, options, rowObject) {                var userIdDate = cellValue;                var businessDate = null;                var formatted = null;                if (cellValue == "FeiYongHu" || cellValue == "HuanKuanHu" || cellValue == "MuJiHu") {                    formatted = rowObject.applicationId;                } else {                    if (rowObject.businessRole == "CREDIT") {                        businessDate = "出借人"                    } else if (rowObject.businessRole == "DEBIT") {                        businessDate = "借款人";                    }                    var formatted = cellValue + "(" + businessDate + ")"                }                return formatted;            }            //用户来源            function formatApplicationData(cellValue, options, rowObject) {                var intoAccountDate = cellValue;                var formatted = cellValue;                if (intoAccountDate == "YGONLINE") {                    formatted = "三方宝付"                }                if (intoAccountDate == "YGONLINE530") {                    formatted = "YGONLINE530"                }                return formatted;            }            //对手机号进行方法  formatter: formatIdCard            function formatNullData(cellValue, options, rowObject) {                var intoAccountDate = cellValue;                var formatted = cellValue;                if (intoAccountDate == null) {                    formatted = "--"                }                if (formatted.toString().trim().length == 11) {                    return formatted.substring(0, 3) + "****" + formatted.substring(7, 11);                }                return formatted.substring(0, 6) + "****" + formatted.substring(10, 14);            }            //对身份证号进行方法 formatter: formatIdCard            function formatIdCard(cellValue, options, rowObject) {                var intoAccountDate = cellValue;                var formatted = cellValue;                if (intoAccountDate == null) {                    formatted = "--"                }                return formatted = formatted.substring(0, 6) + "********" + formatted.substring(13, 17);            }            //第一次加载的主表            $(document).ready(function () {                var applicationId = $('#applicationId option:selected').val();                $("#jqGrid").jqGrid({                    mtype: "GET",                    datatype: "json",                    styleUI: 'Bootstrap',                    colModel: [                        {label: '姓名', name: 'userName', autowidth: true, sortable: false},                        {label: '证件号', name: 'idCardNo', autowidth: true, sortable: false, formatter: formatIdCard},                        {label: '手机号', name: 'phone', autowidth: true, sortable: false, formatter: formatNullData},                        {label: '用户ID', name: 'userId', autowidth: true, sortable: false},                        {                            label: '用户角色',                            name: 'businessRole',                            autowidth: true,                            sortable: false,                            formatter: formatuserId                        },                        {                            label: '用户来源',                            name: 'applicationId',                            autowidth: true,                            sortable: false,                            formatter: formatApplicationData                        },                        {                            label: '注册时间',                            name: 'dateCreated',                            formatter: formatUnixTimestamp,                            autowidth: true,                            sortable: false                        }                    ],              /*      //------------                    rowNum:10, //每页显示记录数                    rowList:[10,20,30], //分页选项，可以下拉选择每页显示记录数                    pager: '#pager',  //表格数据关联的分页条，html元素                    autowidth: true, //自动匹配宽度                    height:275,   //设置高度                    gridview:true, //加速显示                    viewrecords: true,  //显示总记录数                    multiselect: true,  //可多选，出现多选框                    multiselectWidth: 25, //设置多选列宽度                    sortable:true,  //可以排序                    sortname: 'id',  //排序字段名                    sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序                    //-------------*/                    viewrecords: true, //显示总记录数                    height: 400,//设置高度                    shrinkToFit: false,                    rowNum: 5,//每页显示记录数                    autowidth: true,//自动匹配宽度                    pager: "#jqGridPager",//表格数据关联的分页条，html元素                    postData: {                        'beginTime': function () {                            return $('#beginTime').val();                        },                        'endTime': function () {                            return $('#endTime').val();                        }                    },                    //单元格的单机函数                    onCellSelect: function (rowid, iCol, cellcontent, e) {                        if (iCol == 14) {                            alert("点击合同的相关操作");                        } else if (iCol == 18) {                            alert("点击募集金额的相关操作")                        }                        return false;                    }                })                var len = $("#jqGrid").getGridParam("width");                $("#jqGrid").setGridParam().hideCol("id");                $("#jqGrid").setGridWidth(len);            });            //确定按钮操作            $("#sure").click(function () {                $("#message").hide();                $("#jqGrid").jqGrid('setGridParam', {                    datatype: 'json',                    url: '/management/create/message',                    postData: {                        'userName': function () {                            return $('#userName').val().trim();                        },                        'idCardNo': function () {                            return $('#idCardNo').val().trim();                        },                        'beginTime': function () {                            return $('#beginTime').val().trim();                        },                        'endTime': function () {                            return $('#endTime').val().trim();                        },                        'phone': function () {                            return $('#phone').val().trim();                        },                        'userId': function () {                            return $('#userId').val().trim();                        },                        'businessRole': function () {                            return $('#businessRole').val().trim();                        }                    },                    page: 1                }).trigger("reloadGrid");                return false;            });            //点击重置按钮            $("#back").click(function () {                $("#message").hide();            });        </script>    </content></div></body></html>

@Controller层

  @RequestMapping(value = "create/message", method = RequestMethod.GET)    @ResponseBody    public GridData createMessage(@RequestParam(value = "applicationId", required = false) String applicationId,                                  @RequestParam(value = "userName", required = false) String userName,                                  @RequestParam(value = "idCardNo", required = false) String idCardNo,                                  @RequestParam(value = "beginTime", required = false) String beginTime,                                  @RequestParam(value = "endTime", required = false) String endTime,                                  @RequestParam(value = "phone", required = false) String phone,                                  @RequestParam(value = "userId", required = false) String userId,                                  @RequestParam(value = "businessRole", required = false) String businessRole,                                  @RequestParam(value = "page", required = false) Integer page,                                  @RequestParam(value = "rows", required = false) Integer rows,                                  @RequestParam(value = "sord") String sortOrder,                                  @RequestParam(value = "sidx") String sortField) {    //必须是返回这种格式        GridData result = new GridData();        //查询总记录数        long records = customerService.findCustomerBusinessRecords(userName, idCardNo, phone, userId, businessRole, beginTime, endTime, page, applicationId);        long totalPage = records % rows == 0 ? records / rows : records / rows + 1;        //查询分页详情        List<TransactionFlowStatement> transactionFlowStatementList = customerService.getCustomerBusinessLists(userName, idCardNo, phone, userId, businessRole, beginTime, endTime, page, sortOrder, sortField, rows, applicationId);        result.setPage(page);        result.setTotal((int) totalPage);        result.setRecords(records);        if (transactionFlowStatementList != null) {            result.getRows().addAll(transactionFlowStatementList);        }        return result;    }

效果展示：
这里写图片描述

查询效果：
这里写图片描述

阅读全文

0 0