ajax异步加载jqgrid之动态创建

2023-10-26

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

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>

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);

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

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

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

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

连接池

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

效果展示

å¾çæè¿°

转载于:https://my.oschina.net/u/4006148/blog/2254111

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

ajax异步加载jqgrid之动态创建 的相关文章

  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • Java 7 中 Object 和 int 的比较

    最近我偶然发现了一个问题 让我停下来思考 对我来说 下面的代码应该总是会触发错误 但是当我的一位同事问我为什么 Eclipse 没有显示错误时 我无法回答任何问题 class A public static void main String
  • 在 Java 中使用 Inflater 解压缩 gzip 数据

    我正在尝试使用以下方法解压缩 gzip 数据Inflater 根据文档 如果参数 nowrap 为 true 则 ZLIB 标头和校验和 字段将不会被使用 这提供了与 GZIP 和 PKZIP 使用的压缩格式 注意 使用 nowrap 选项
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 多对多不检索映射数据

    Spring boot 2 5 6 我无法安装版本 概要文件 java Getter Setter NoArgsConstructor AllArgsConstructor EqualsAndHashCode FieldDefaults l
  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中?

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置
  • JavaScript 检查时区名称是否有效

    有没有一种方法可以在不使用外部库的情况下检查 JavaScript 中的时区名称是否有效 当用户在文本字段中输入时区名称时 我想验证时区是否有效 我知道我们可以使用时刻时区库轻松做到这一点 但我不想使用任何额外的库 我正在寻找纯 JavaS
  • 我可以关闭并重新打开套接字吗?

    我学习了一个使用套接字的例子 在此示例中 客户端向服务器发送请求以打开套接字 然后服务器 侦听特定端口 打开套接字 一切都很好 套接字从双方 客户端和服务器 打开 但我仍然不清楚这个东西有多灵活 例如 客户端是否可以关闭一个打开的 从两端
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • javascript 函数后面括号中的值

    我正在尝试重新利用我在 SO 的答案中找到的一些 Javascript 代码 但我想首先更好地理解它的语法 其大纲是 function root ns factory some code window detectZoom function
  • 使用链接列表插入优先级队列的方法

    首先 我觉得我应该提到这是一项作业 我并不是在寻找直接的代码答案 只是为了指出正确的方向 我们被要求在链表中实现优先级队列 我正在努力编写 insert 函数的第一部分 在代码中我尝试检查是否head包含任何内容 如果没有则设置为head
  • 谷歌绘制具有相同比例的多个系列的图表

    我正在寻找一种在图形上显示多个系列的方法 这些系列具有相同的比例但仅显示一次 正如你在这里看到的 http jsfiddle net Youkoal d3xwnqdu http jsfiddle net Youkoal d3xwnqdu 我
  • Checkstyle - 方法按修饰符排序

    是否可以添加到 checkstyle 规则以按修饰符对类中的方法进行排序 我的意思是开头的公共方法和最后的私有方法 MethodsOrderCheck做这个工作 检查文档 https www qulice com qulice checks
  • 如何优化 Three.js 中多个 sphereGeometry 的渲染?

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher
  • Python 可以替代 Java 小程序吗?

    除了制作用于物理模拟 如抛射运动 重力等 的教育性 Java 小程序之外 还有其他选择吗 如果你想让它在浏览器中运行 你可以使用PyJamas http pyjs org 这是一个 Python 到 Javascript 的编译器和工具集
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 通过均匀分布值来有效合并两个数组

    我见过许多问题 答案主题是通过交替值合并两个数组 他们是这样工作的 let array1 a b c d let array2 1 2 let outcome a 1 b 2 c d 但我希望输出更加高效 并且根据数组大小均匀分配值 exp
  • 线程“main”中出现异常 java.lang.UnsatisfiedLinkError: ... \jzmq.dll: 找不到依赖库

    我有一个使用 ZMQ 的 java 应用程序 我已经能够在我的 Win7 PC 上运行它 我将 jzmq dll 放在 jar 可执行文件所在的同一文件夹中 然后通过命令 java jar myapp jar 运行它 我的下一步是将其移至服
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • 推荐两款在线免费的可视化网页编辑器:Layoutit!和RXStudio

    2023年8月22日 周二上午 今天看Boost库的html文档时 突然也想自己写一个这样的html文档 但又不想手敲代码 于是在网上找到了很多可视化的网页编辑器 最后我觉得这两款编辑器比较好用 目录 Layout 官网 使用体验 使用方法
  • phpcms V9 局域网访问问题

    按下列步骤操作修改域名 1 打开caches configs system php文件 然后批量替换里面的域名 如把http 127 0 0 1替换为您的新域名 如http 192 168 114 140 保存 2 登陆后台 找到 设置 站
  • anaconda安装tensorboard过慢

    不要从官网下载tensorboard conda activate your environment name 通过国内的豆瓣源下载 pip install i https pypi douban com simple tensorboar
  • React 之 解决页面多次重复渲染造成页面卡顿问题

    一 场景案例 描述 画面上存在多个卡片 卡片是动态渲染的 每个卡片有自己的相关操作 比如 点击卡片的菜单项 出现弹框 弹框中需要填入相关的信息 在输入信息的过程中会出现一个字一个字出来的卡顿效果 或者是点击卡片菜单项 弹框出现的时候比较卡顿
  • 编译原理:LL(1)、LR(0)、SLR(1)分析(大招)

    LL 1 含义 第一个L代表从左到右扫描输入序列 第二个L表示产生最左推导 1表示在确定分析器的每一步动作时向前看一个终结符 判断 第一步找到能够推出是空的非终结符 像在这个文法中 画勾的就是可以推出是空的非终结符 第二步 求first集合
  • 软件工程之总体设计

    总体设计是软件工程中的一个重要阶段 它关注整个系统的结构和组织 旨在将系统需求转化为可执行的软件解决方案 总体设计决定了系统的架构 模块划分 功能组织以及数据流和控制流等关键方面 可行性研究 具体方面 经济可行性 技术可行性 操作可行性 法
  • 2020 JAVA eclipse 中文汉化包 安装教程--傻瓜式操作

    下载的是 Eclipse IDE for Enterprise Java Developers includes Incubating components 这个版本 直接下载了 解压就可以使用 用的是官方的汉化包 下载 解压 复制 粘贴
  • 5个步骤实现软件质量的快速提升

    每个人都希望软件质量更高 速度更快 对现代软件开发团队的要求是巨大的 从竞争和市场压力的增加 功能和复杂性的增加 到对产品质量 安全性和可靠性的更高期望 敏捷开发方法常常受到追捧 因为它能更快地响应变化 更好地实现客户需求 但是 敏捷和De
  • ESXI虚拟机厚置备延迟置零转换为Thin Provision方法

    最近有博友提出一个需求 他们公司的服务器磁盘空间不足了 现在无法正常创建虚拟机 其实并没有使用到这么多空间 只是因为划了这么多空间给虚拟机 所以造成磁盘空间不足 那么是否有什么解决的方法了 详细了解发现虚拟机在配置磁盘的时候设置的是厚置备延
  • RC低通滤波器

    先来几个不错的资源链接 1 RC滤波器截止频率在线计算器 http www eechina com tools rc filter cutoff frequency html 2 详谈一阶RC低通滤波器如何过滤高频噪声 网上不错的一个帖子
  • Linux学习-43-挂载Linux系统外的文件mount和卸载文件系统umount命令用法

    10 10 mount命令详解 挂载Linux系统外的文件 所有的硬件设备必须挂载之后才能使用 新硬盘先格式化后创建分区 再对分区进行挂载 只不过 有些硬件设备 比如硬盘分区 在每次系统启动时会自动挂载 而有些 比如 U 盘 光盘 则需要手
  • 使用w,vmstat命令,top命令,sar命令,nload命令

    监控系统状态 w命令 uptime load average 0 00 0 01 0 05 上面这条显示的就是系统负载 后面有三段数字 root localhost w 21 33 04 up 41 min 1 user load aver
  • STS & 开发异常

    1 Failed to start component 情景 本地 tomcat 部署了两个项目 一个provider 一个 server 前台通过server访问 provider 在开发的时候 将tomcat部署的服务 Clean 或者
  • Android-模块化-项目实践和探索分享

    文章目录 前言 一 gradle统一配置 1 多模块项目的构建 2 根项目的构建配置 3 常用公用的构建配置 二 nexus与maven publish 1 安装nexus 2 仓库 3 maven publish 三 动态依赖 1 依赖的
  • 在IDEA中使用Maven将项目打包成jar包

    1 在pom xml文件中添加代码
  • [Python图像处理] 二十九.MoviePy视频编辑库实现抖音短视频剪切合并操作

    该系列文章是讲解Python OpenCV图像处理知识 前期主要讲解图像入门 OpenCV基础用法 中期讲解图像处理的各种算法 包括图像锐化算子 图像增强技术 图像分割等 后期结合深度学习研究图像识别 图像分类应用 希望文章对您有所帮助 如
  • 【质量】代码质量评价标准

    今天来思考下如何评价代码质量 业界公认比较认可的七大标准 可维护性 maintainability 可读性 readability 可扩展性 extensibility 灵活性 flexibility 简洁性 simplicity 可复用性
  • ReentrantReadWriteLock

    一ReentrantReadWriteLock 是Lock的另一种实现方式 我们知道ReentrantLock是一个排他锁 同一时间只允许一个线程访问 而ReentrantReadWriteLock允许多个读线程同时访问 但不允许写线程和读
  • RuntimeError: Address already in use

    Pytorch用多张GPU训练时 会报地址已被占用的错误 其实是端口号冲突了 因此解决方法要么kill原来的进程 要么修改端口号 在代码里重新配置 torch distributed init process group dist init
  • ajax异步加载jqgrid之动态创建

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 之前写过一篇过于ajax异步加载jqgrid的文章 那个只是一个特殊的情况 如果创建不同数据库表的jqgrid 必须分别写servlet dao层和连接池 很麻烦 今天我写