jqGrid的简单应用

最新推荐文章于 2024-04-30 19:40:07 发布
最新推荐文章于 2024-04-30 19:40:07 发布
阅读量611 收藏 2
点赞数
分类专栏： jsp-----------servlet 文章标签： jqgrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yucongyuqian/article/details/77450454
版权

若想了解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;
    }

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

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

yucongyuqian
关注
专栏目录
jqgrid应用
09-05
对于刚接触jquerygrid的人相当不错哦，各个按钮事件都有介绍
Jqgrid之强大的表格插件应用
11-22
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性： 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。 兼容目前所有流行的web浏览器。 Ajax分页，可以控制每页显示的记录数。 支持XML，JSON，数组形式的数据源。 提供丰富的选项配置及方法事件接口。 支持表格排序，支持拖动列、隐藏列。 支持滚动加载数据。 支持实时编辑保存数据内容。 支持子表格及树形表格。 支持多语言。 最关键目前是免费的。 如何
jqgrid的应用
灵动工作室
06-01 177
获取grid的所有ID值 var getDataIDs = $("#GridList").jqGrid("getDataIDs");   获取当前选中的ID值 var currentID = $("#GridList").jqGrid("getGridParam", "selrow");   获取当前行的所有数据 var rowData = $("#GridList").jq
jqgrid 基础应用
weixin_34249678的博客
08-08 133
jqgrid是一个在jquery基础上做的一个表格插件，以ajax的方式和服务器端通信。 一个jqgrid的基础示例（基础参数说明）如下： $("#jqGrid").jqGrid({ url: 'TbQueryList', postData: { code: $("#Code").val(), ...
jqGrid应用--销售管理
cccaaa8888的博客
04-29 1733
管理界面,jsp页面 销售管理 .sort{color:#0663A2;cursor:pointer;} var saleId = "${saleId}"; jQ
jqGrid简单示例
02-27
**jqGrid简单示例** jqGrid是一款非常流行的JavaScript表格插件，它允许用户在网页上创建功能丰富的数据网格，支持多种操作，如排序、筛选、分页和编辑。本示例是一个基于简单JSON数据类型的jqGrid完整项目，适用于...
jqgrid 简单学习笔记
09-05
总的来说，JqGrid是一个功能强大且高度可定制的表格组件，适合在需要进行大量数据管理和交互的Web应用中使用。通过深入学习和实践，开发者可以充分利用其特性，提升Web应用的用户体验和数据管理效率。
jqGrid表格应用之新增与删除数据附源码下载
09-03
jqGrid是一款功能强大的JavaScript表格插件，它允许用户在网页上创建、编辑和展示数据。...总的来说，jqGrid结合fancybox和jQuery的其他插件，构建了强大的富客户端应用，使得在Web上管理数据变得更加便捷。
JQGrid的简单应用及第三方分页的实现 .NET实现
05-14
本篇将深入探讨JQGrid的简单应用以及如何利用.NET实现第三方分页功能。 一、JQGrid基础应用 1. 初始化JQGrid：在HTML页面中，我们需要引入JQGrid的JavaScript和CSS文件，然后创建一个空的表格元素。JQGrid的初始化...
jqGrid简单案例之API
11-07
在“jqGrid简单案例之API”中，我们将探讨如何利用jqGrid的基本功能和API来构建一个前端与后端交互的小型示例。首先，我们需要了解jqGrid的HTML结构，通常包括一个div元素作为容器，并在其中定义表格ID。例如： ```...
JQuery Mobile 中实现 jqGrid 数据分组
10-29
JQuery Mobile 中实现 jqGrid 数据分组的一个小例子 程序请放在WEB服务器上运行
JqGrid中文API文档
06-17
JqGrid中文API文档，包含了基础的JqGrid控件的属性方法事件等，有如何使用JqGrid的Demo.
jqGrid使用范例
04-22
jqGrid结合servlet的范例 jqGrid结合Struts2的范例
jqGrid详解及高级应用(十四)
weixin_30733003的博客
10-01 114
一：jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。 二：官方主页http://www.jqgrid.com/目前最新版本：jqGrid 3.7 Beta在线文档http://www.secondpersonplural.ca/jqgriddocs/index.htm在线Demohttp://www.trirand.com/blog/jqgrid/jqgri...
jqGrid用法汇总(全经典)
最新发布
男神的专栏
04-30 2363
rowid：当前行id；设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有’sum’,‘avg’和’count’。
编写全网最实用的的原创jqGrid例子
AinUser的博客
03-29 2267
jqGrid是一个比较使用的前端框架，主要适用于表格的显示。 jqGrid的操作大致可以参照：http://blog.mn886.net/jqGrid/(jqGrid中文api)里面的：加载数据的分类 首先粘出jsp前端页面的代码       下面是controller（控制层）代码：以分页的形式返回数据到前台 下面的就是上面控制层中的map中的参数(分页的
jqGrid 选中多行的数据
qq_29178991的博客
11-14 1283
var s = jQuery("#res_table").find("table[id^=jqid_]").jqGrid('getGridParam', 'selarrrow'); var idsArr=new Array(); idsArr=String(s).split(","); var names=""; $.each(idsArr,function(index,value){
jqGrid简单使用
waterstar50的专栏
09-15 442
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
jqgrid使用步骤及说明
lbxhappy的专栏
05-17 424
                                      jqgrid使用说明   jqGrid 是一个用来显示网格数据的jQuery插件，可以动态的对数据网格的数据进行添加、删除、修改、查询、排序、拖拽等操作，数据源可以是json、xml   官网下载地址：http://www.trirand.com/blog/?page_id=6 官网文档：http://ww...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值