JqGrid完整例子

2023-11-09

之前写过一篇过于ajax异步加载jqgrid的文章,那个只是一个特殊的情况,如果创建不同数据库表的jqgrid,必须分别写servlet,dao层和连接池,很麻烦,今天我写了一个万能的写法,客官只要在前台js中写入表格名称和字段名称即可实现功能!
下面就是代码实例,关于jqgrid,ajax的介绍这里暂时不多说,有不懂的可以参考我之前的文章!

一、代码实例

1、JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>定义>类型</title>
    <link rel="stylesheet" href="css/homepage.css">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="js/JqGrid/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="js/JqGrid/css/ui.jqgrid.css">
    <link type="text/css" rel="stylesheet" href="js/JqGrid/css/jquery-ui.min.css">
</head>
<body>
<div class="headerColor">
    <span>定义>类型</span>
</div>
<div class="row col-sm-12">
    <div class="frame_border">
        <div class="titleColor">
            <span>已定义模拟量测点信息</span>
            <div id="typeDefines">
                <table id="typeDefine"></table>
                <div id="typeDefinePager"></div>
            </div>
        </div>
    </div>
</div>
<script  type="text/javascript" src="js/JqGrid/js/jquery.min.js"></script>
<script  type="text/javascript" src="js/JqGrid/js/jquery.jqGrid.min.js"></script>
<script  type="text/javascript" src="js/JqGrid/js/bootstrap.min.js"></script>
<script  type="text/javascript" src="js/JqGrid/js/grid.locale-en.js"></script>
<script  type="text/javascript" src="js/JqGrid/js/grid.locale-cn.js"></script>
<script  type="text/javascript" src="js/JqGrid/js/jquery.jqgrid.typedefine.js"></script>
<script  type="text/javascript">
    jf_initJqgrid();
    function jf_initJqgrid(){
        $("#typeDefine").jqGridTypeDefine({
            pager_selector:"#typeDefinePager",//分页
            height:"360",//表格高度
            width:$("#typeDefines"),//表格宽度
            where:{},//初始化查询条件
            wherestring:{},
            oper:"jqGridCre",
            tableid : "kj_typedefine",
        });
    }
</script>
</body>
</html>

2、JavaScript

;(function($){
    $.fn.jqGridTypeDefine = function(options){
        //获取jquery对象
        var grid_selector = this;
        var initDate = "{oper: ""," +
                        "height: ""," +
                        "width: ""," +
                        "pager_selector: "typeDefinePager"," +
                        "where: ""," +
                        "wherestring: {}," +
                        "fileds: ["id", "property", "name", "sensortype", "unit","highvalue"]," +
                        "table:"kj_typedefine"}";
        $.ajax({
            url:"MyServlet",
            async:true,   //是否为异步请求
            cache:false,  //是否缓存结果
            type:"GET",
            dataType:"json",
            data :{
                "data" : initDate,
            },
            success : function(data){
                for(var i=0;i<=data.length;i++){
                    $("#typeDefine").jqGrid('addRowData',i+1,data[i]);
                }
            }
        })
        switch(options.oper){
            case 'jqGridCre':jqgridCre(initDate,grid_selector);
                break;
            case 'jqGridFre':jqGridFre(initDate,grid_selector);
                break;
        }
        $('[id^=jqgh_typeDefine_]').css("height","20px");
    }
    function jqgridCre(initDate,grid_selector) {
        jQuery(grid_selector).jqGrid({
            colNames:['标识符','属性', '名称','传感器种类','单位/0态名称','高值/1态名称'],
            colModel:[
                {
                    name:'id',
                    index:'id',
                    width: 100,
                },{
                    name:'property',
                    index:'property',
                    width: 100,
                },{
                    name:'name',
                    index:'name',
                    width: 100,
                },{
                    name:'sensortype',
                    index:'sensortype',
                    width: 100,
                },{
                    name:'unit',
                    index:'unit',
                    width: 100,
                },{
                    name:'highvalue',
                    index:'highvalue',
                    width: 100,
                }
            ],
            sortname : "id",
            sortorder : "desc",
            viewrecords : true,
            shrinkToFit : true,
            width: 1645,
            height: 500,
            rowNum : 20,
            rowList : [ 10,15,30 ],
            datatype: 'text',
            pager: "#typeDefinePager",
            onSelectRow:function(rowid){
                grid_selectRow = $(grid_selector).jqGrid("getRowData",rowid);
            },
        });
    }
})(jQuery);

3、servlet

package com.test.servlet;
 
import com.test.entity.MyEntity;
import com.test.service.MyService;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
public class MyServlet extends HttpServlet {
    MyService service = new MyService();
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException{
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException{
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String jqgridData = request.getParameter("data");
        MyEntity myEntity = new MyEntity();
        myEntity.setJqgridData(jqgridData);
        String str = service.getJqgridData(myEntity);
        response.getWriter().print(str);
    }
}

4、service

package com.test.service;
 
import com.test.dao.MyDao;
import com.test.entity.MyEntity;
 
public class MyService {
    MyDao myDao = new MyDao();
    public String getJqgridData(MyEntity myEntity) {
        String jqgridData = myDao.selectJqgridData(myEntity);
        return jqgridData;
    }
}

5、dao

package com.test.dao;
 
import com.test.entity.MyEntity;
import com.test.entity.SecondData;
import com.test.util.MySQLFactory;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
 
public class MyDao {
 
    public String selectJqgridData(MyEntity myEntity) {
        String str = myEntity.getJqgridData();
        String data = "";
        try {
            JSONObject obj = new JSONObject(str);
            String oper = String.valueOf(obj.get("oper"));
            String fileds = String.valueOf(obj.get("fileds")).replace(""","")
                                                              .replace("[","")
                                                              .replace("]","");
            String table = String.valueOf(obj.get("table"));
            String sql = String.format(
                    "select %s from %s ",fileds,table
            );
            System.out.println(sql);
            data = MySQLFactory.queryData(sql);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return data;
    }
}

6、entity

package com.test.entity;
 
public class MyEntity {
    private String jqgridData;
 
    public MyEntity() {
    }
 
    public MyEntity(String jqgridData) {
        this.jqgridData = jqgridData;
    }
 
    public String getJqgridData() {
        return jqgridData;
    }
 
    public void setJqgridData(String jqgridData) {
        this.jqgridData = jqgridData;
    }
}

7、连接池

package com.test.util;
 
import java.sql.*;
 
public class MySQLFactory {
    static final String DRVIER = "com.mysql.jdbc.Driver";
    static final String URL = "jdbc:mysql://localhost:3306/mysql";
    static final String USERNAMR = "root";
    static final String PASSWORD = "root";
 
    private static Connection conn = null;
    public static Connection getConnection(){
        try {
            Class.forName(DRVIER);
            conn = DriverManager.getConnection(URL, USERNAMR, PASSWORD);
            System.out.println("成功连接数据库");
        } catch (ClassNotFoundException e) {
            throw new RuntimeException("class not find !", e);
        } catch (SQLException e) {
            throw new RuntimeException("get connection error!", e);
        }
        return conn;
    }
 
    public static void executeSQL(String sql) {
        Statement stat = null;
        try {
            conn = getConnection();
            stat = conn.createStatement();
        } catch (Exception e) {
            e.printStackTrace();
            return;
        }
        try {
            stat.execute(sql);
        } catch (Exception e) {
            e.printStackTrace();
            return;
        }
        try {
            if (stat != null) stat.close();
            if (conn != null) conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    public static String queryNoPage(String sql) {
        Connection conn      = null;
        Statement  stat      = null;
        ResultSet  rows      = null;
        StringBuffer   buff = new StringBuffer();
        try {
            conn   =  getConnection();
            stat   =  conn.createStatement();
        }
        catch (Exception e) {
            e.printStackTrace();
            return "[]";
        }
        try {
            rows    = stat.executeQuery(sql);
            //得到数据集的列数
            ResultSetMetaData rsmd = rows.getMetaData();
            int    colCount      = rsmd.getColumnCount();
            boolean first = true;
            buff.append("[");
            while (rows.next()) {
                String rowStr  = "";
                for (int i = 1; i <= colCount; i ++ ) {
                    if (i>1) rowStr += ",";
                    String tempValue   =  rows.getString(i);
                    rowStr          += String.format("%s", tempValue);
                }
                rowStr = String.format(""%s"", rowStr);
                if (first) first = false;
                else buff.append(",");
                buff.append(rowStr);
            }
            buff.append("]");
        }catch (Exception e) {
            e.printStackTrace();
            return "[]";
        }finally {
            try {
                rows.close();
                stat.close();
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return buff.toString();
    }
 
    public static String queryData(String sql){
        Connection conn      = null;
        Statement  stat      = null;
        ResultSet  rows      = null;
        StringBuffer   buff = new StringBuffer();
        try {
            conn   =  getConnection();
            stat   =  conn.createStatement();
        }
        catch (Exception e) {
            e.printStackTrace();
            return "[]";
        }
        try {
            rows    = stat.executeQuery(sql);
            //得到数据集的列数
            ResultSetMetaData rsmd = rows.getMetaData();
            int    colCount      = rsmd.getColumnCount();
            buff.append("[");
            while (rows.next()) {
                String rowStr  = "";
                buff.append("{");
                for (int i = 1; i <= colCount; i ++ ) {
                    if (i>1) rowStr += ",";
                    String name = rsmd.getColumnName(i);
                    String tempValue   =  rows.getString(i);
                    rowStr          += String.format(""%s":"%s"", name,tempValue);
                }
                rowStr = String.format("%s", rowStr);
                buff.append(rowStr);
                buff.append("},");
            }
            buff.append("]");
        } catch (SQLException e) {
            e.printStackTrace();
            return "[]";
        }
        String str = buff.toString().replace(",]","]");
        return str;
    }
}

二、效果展示

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JqGrid完整例子 的相关文章

随机推荐

  • 灵星之光-1:调制解调、卷积神经网络异曲同工

    无线通信中的解调 以QAM调制为例 QAM编码的个数 类似图像分类中的类别的个数 调制的过程 类似 深度学习的过程 不同的是 通信中的模型 不需要训练 特征是直接预先编码好了 解调的过程 就是 分类的过程 根据收到的各种变形的电磁波的波形
  • Springboot中利用AOP创建日志文件log4j

    Springboot中利用AOP创建日志文件log4j pom xml文件导入依赖
  • shell 多行注释

    在写 shell 脚本的时候 经常需要注释多行命令 但在每一行前输入 很不方便 1 DOCUMENT 可以采用 HERE DOCUMENT 特性 实现多行注释 这是比较稳妥的作法 比如 bin bash lt lt COMMENT your
  • 火焰检测的相关步骤及算法综述

    引言 随着人类社会的发展进步 火灾成为了不可忽视的多发性问题 火灾一次次展示了其对于人员伤亡和财产的巨大破坏性 火灾的预防和检测一直是人类与火灾斗争过程中关注的焦点 1 近些年来 随着数字通信技术 计算机技术的发展 数字图像处理技术获得了广
  • Yolo系列目标检测 V1-V8

    当two stage proposal detection 系列的算法在目标检测界大展身手的时候 不禁会有人问道 Why we have to train proposal first 于是 便有学者展开了关于one stage算法的研究
  • 修改jupyter notebook的默认路径

    前言 由于不想占用C盘空间 所以想修改jupyter notebook的默认路径 第一次打开anaconda中自带的jupyter notebook 默认路径都是C Users Admin 自己的用户名 新建想默认打开的文件夹 在你想以后默
  • N沟道和P沟道MOS FET开关电路

    在电路中常见到使用MOS FET场效应管作为开关管使用 下面举例进行说明 如图1所示 使用了P沟道的内置二极管的电路 此处二极管的主要作用是续流作用 电路是Li电池充放电电路 当外部电源断开时采用Li电池进行内部供电 即 5V电源断开后Q1
  • python做量化交易干货分享

    python做量化交易干货分享 http www newsmth net nForum article Python 128763 最近程序化交易很热 量化也是我很感兴趣的一块 国内量化交易的平台有几家 我个人比较喜欢用的是JoinQuan
  • Java、解一元二次方程

    可以使用下面的公式求一元二次方程 ax 2 bx c 0 的两个根 r1 b b 2 4ac 2a r2 b b 2 4ac 2a b 2 4ac 称作一元二次方程的判别式 如果它是正值 那么一元二次方程就有两个实数根 如果它为 0 方程式
  • eclipse代码格式化的注释缩进问题

    未修改前ctrl shift f格式化代码 注释缩进不能和代码保持一致 拿到要被转换的字符串 Scanner scanner new Scanner System in String str scanner nextLine 通过内存流实现
  • vue3 props传入的组件无法正常刷新

    问题描述 vue3 写入的数据无法正常渲染 但是从子组件获取正常 使用props导入 解决方案 在setup导出的时候 直接导入props 而不是导入props 变量 错误用法 props var1 let var1 张三 setup re
  • phpstudy安装教程

    1 下载phpstudy 2 安装文件 3 把pikachu文件解压到phpstudy phptutorial WWW 文件名字改成pikachu 4 启动 MySQL管理器 输入账号密码 确定 5 打开浏览器 输入127 0 0 1 pi
  • 微信开放平台_第三方平台授权流程_接口调用令牌

    六 接口调用令牌 6 1 官网说明 在公众号 小程序接口调用令牌 authorizer access token 失效时 可以使用刷新令牌 authorizer refresh token 获取新的接口调用令牌 注意 authorizer
  • Qt开发环境下载和安装

    文档下载地址 https download csdn net download blackbattery 10439812 Qt是跨平台的图形开发库 目前由Digia全资子公司 Qt Company 独立运营 官方网址 http www q
  • 关于C/C++标识符、常量、变量的理解

    1 标识符是由字母和数字构成的序列 第一个字符必须是英文字母 下划线 也被看成是字母 大写字母和小写字母是不同的 标识符可以为任意长度 对于内部标识符来说 至少前31 个字母是有效的 在某些实现中 有效的字符数可能更多 2 在程序执行过程中
  • 数组组成的最小数字

    题目 最小数字 给定一个整型数组 请从该数组中选择3个元素组成最小数字并输出 如果数组长度小于3 则选择数组中所有元素来组成最小数字 输入描述 一行用半角逗号分割的字符串记录的整型数组 0 lt 数组长度 lt 100 0 lt 整数的取值
  • 【TypeScript】项目中对于TypeScript的打包处理

    webpack 通常情况下 实际开发中我们都需要使用构建工具对代码进行打包 TS同样也可以结合构建工具一起使用 下边以webpack为例介绍一下如何结合构建工具使用TS 步骤 初始化项目 进入项目根目录 执行命令 npm init y 主要
  • java 矩阵[多维数组]源代码

    1 import java util Random 2 3 矩阵类 4 public class Matrix 5 6 private int matrix 7 8 Random random new Random 9 10 构造方法 11
  • YiOVE书源:不只是书源,还有对书源的一些预处理,比如提前查看书源数量,以及包含哪些小说站

    引言 我是一个小说爱好者 阅读APP更是其中的效果斐然的不错宝器 平时自己也会收集一些书源 但是在这过程中产生了一些需求 比如 书源的数目是多少 书源链接还有效吗 于是 自己基于Flask写了一个程序 可以解决以上需求 并且可以在网页端显示
  • JqGrid完整例子

    之前写过一篇过于ajax异步加载jqgrid的文章 那个只是一个特殊的情况 如果创建不同数据库表的jqgrid 必须分别写servlet dao层和连接池 很麻烦 今天我写了一个万能的写法 客官只要在前台js中写入表格名称和字段名称即可实现