精华内容
下载资源
问答
  • 本文主要介绍了获取jqGrid中选择的行的数据的语法和获取简例,需要的朋友可以看下
  • 获取jqGrid中选择的行的数据: 获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: 1 var id=$('#gridTable').jqGrid('getGridParam','selrow'); 如果想...

    获取jqGrid中选择的行的数据:

    获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:

    如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下:

    如果想获取选择的行的数据,只要传入rowId即可,如下:

    而这个rowData是一个对象,如果要获取选择的行的这个对象的属性值,如name的值,需如下:

    var rowName=rowData.name;

    当然你这个对象得有name这个属性才行。

    应用实例:

     jqGrid获得所有行数据的方法

    转载于:https://www.cnblogs.com/shizhijie/p/8005696.html

    展开全文
  • 获取jqGrid中选择的行的数据: 获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$('#gridTable').jqGrid('getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个...

    本文转载自:http://www.tbdazhe.com/archives/805

    获取jqGrid中选择的行的数据:

    获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:

    var id=$('#gridTable').jqGrid('getGridParam','selrow');

    如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下:

    var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');

     

    如果想获取选择的行的数据,只要传入rowId即可,如下:

    var rowData = $("#gridTable").jqGrid('getRowData',rowId);

    而这个rowData是一个对象,如果要获取选择的行的这个对象的属性值,如name的值,需如下:

    var rowName=rowData.name;

    当然你这个对象得有name这个属性才行。

    应用实例:

    var ids=$("#rightGrid9").jqGrid("getGridParam","selarrrow");
    
    if(ids.length==1){
    
        var rowid=$("#rightGrid9").jqGrid("getGridParam","selrow");
    
        $("#rightGrid9").panGrid("downlayer",{"rowid":rowid});
    
    }else{
    
        alert("你没有选取或者选取为多行数据,不允许进入下一级");
    
    }

     jqGrid获得所有行数据的方法

    function testJqfrid(){
    
        var obj=$("#tablename").jqGrid("getRowData");
    
        alert(obj.length);
    
        jQuery(obj).each(function(){
    
            alert(this.RECEIPT_ORDER_NO);
    
        });

     获得第一行的数据   

    var ret=$("#tablename").jqGrid("getRowData",0); 

     

    展开全文
  • 我的想法是获取jqGrid中的数据然后生成json数据,传给后端,生成文件流,响应到前端,保存为excel文件。 ajax为什么不能够实现下载文件 ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是...

    最近有一个需求是:

    将jqGrid表格中的数据生成报表Excel文件返回给用户。

    我的想法是获取jqGrid中的数据然后生成json数据,传给后端,生成文件流,响应到前端,保存为excel文件。

    ajax为什么不能够实现下载文件

    ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是string字符串,不是流类型,所以无法实现文件下载。

    但用ajax仍然可以获得文件的内容,该文件将被保留在内存中,无法将文件保存到磁盘。这是因为JavaScript无法和磁盘进行交互,否则这会是一个严重的安全问题,js无法调用到浏览器的下载处理机制和程序,会被浏览器阻塞。

    并且 我用ajax实现的时候出现了很多bug。

    在网上参考好多博客,经过不断的调试,我还是选择了原生的XMLHttpRequest对象进行post请求。

    blob(HTML5 新特性)

    二进制大对象,是一个可以存储二进制文件的容器。

    作用

    Js一直以来都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。

    Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。

    BLOB是一个大文件,典型的BLOB是一张图片或一个声音文件,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。

    重点应用
    • 目前做的通过URL下载文件。
    • 分片上传文件(将大文件分片,轮询向后台提交各文件片段)。

    后端代码

    /**
     * 生成Excel报表
     * Error:存在问题
     * 1. 前端表格中没有Student对象的一些属性,生成报表时不必要显示的属性字段在Excel中显示。
     *    solve:加判断控制。
     * 2. (由于blob是HTML5新出的)兼容性问题:chrome、firefox、opera无问题,
     * 3. 检测grid表格中有无字段名称冲突问题。
     *    solve:细心检查即可
     * 4. 下载完Excel,打开出现"文件已损坏 无法打开"问题,这是因为office受保护试图导致(安全问题)
     *    solve:在office选项里边修改一下即可(客户端问题)
     * @param list
     * @param response
     */
    @RequestMapping(value = "/exstudent",consumes = "application/json;charset=utf-8")
    public void export (@RequestBody List<Student> list, HttpServletResponse  response){
        OutputStream out = null;
        String name = "学生信息管理表";
    
        for (Student stu:list) {
            System.out.println(stu.getStudentname());
        }
        try {
            response.setHeader("content-type", "application/octet-stream");
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" +URLEncoder.encode(name, "UTF-8")+".xlsx");
            out = response.getOutputStream();
            //调用老师自己写的库,本篇文章不详细说生成Excel文件的事情。
            TExcel.exportExcel(name,Student.class,list,out);
            System.out.println("下载ok");
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
    
        }
    }
    

    前端代码:

    //导出按钮被点击之后,将按钮制为无效(防止多次生成)
    function abideBtn(){
        console.log("禁止按钮......");
        $("#download").attr({"href":"#"});
        $("#download").css("cursor","not-allowed");
    }
    //下载过程中出错误,
    function downloadError(){
        console.log("发生错误,下载失败");
        alert("下载中出现错误!请重试");
        $("#download").attr({"href":"javascript:exportData();"});
        $("#download").css("cursor","pointer");
    }
    //导出表格数据
    //注意:下面获取jqGrid中所有行数据的前提是分页在前端,而不是后端。
    //如果你是在后端分页,那么你会发现,你会将所有数据都显示出来。
    function exportData() {
        var grid = jQuery("#grid");
        //获取当前显示的数据
        var rowNum = grid.jqGrid('getGridParam', 'rowNum'); //获取显示配置记录数量
        var total = grid.jqGrid('getGridParam', 'records'); //获取查询得到的总记录数量
        //设置rowNum为总记录数量并且刷新jqGrid,使所有记录现出来调用getRowData方法才能获取到所有数据
        grid.jqGrid('setGridParam',{rowNum: total,}).trigger('reloadGrid');
        var rows = o.jqGrid('getRowData');
        grid.jqGrid('setGridParam',{rowNum: rowNum,}).trigger('reloadGrid');
        postToPOM(rows);
    }
    //发送post请求
    function postToPOM(rows) {
        console.log(rows);
        var url = "../student/exstudent";
        var xhr = new XMLHttpRequest();
        xhr.open('POST',url,true);
        xhr.responseType = "blob";
        xhr.setRequestHeader("Content-Type"
            , "application/json;charset=utf-8");
        //添加监听事件。
        xhr.addEventListener("load",abideBtn,false);
        xhr.addEventListener("error",downloadError,false);
        xhr.onload = function (){
            if(this.status === 200){
                //创建Bolb对象
                var blob = this.response;//html5新出的
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = function(e){
                    //创建a标签,构造下载弹窗
                    var a = document.createElement("a");
                    a.id = "downloadTag";
                    a.download = '学生信息管理表.xlsx';
                    a.href = e.target.result;
                    $("body").append(a);
                    a.click();
                    $("#downloadTag").remove();
                    console.log("下载完成!");
                    //恢复按钮
                    $("#download").attr({"href":"javascript:exportData();"});
                    $("#download").css("cursor","pointer");
                }
            }
        };
        xhr.send(JSON.stringify(rows));
    }
    
    展开全文
  • 我的想法是获取jqGrid中的数据然后生成json数据,传给后端,生成文件流,响应到前端,保存为excel文件。 ajax为什么不能够实现下载文件 ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是...

    最近有一个需求是:

    将jqGrid表格中的数据生成报表Excel文件返回给用户。

    我的想法是获取jqGrid中的数据然后生成json数据,传给后端,生成文件流,响应到前端,保存为excel文件。

    ajax为什么不能够实现下载文件

    ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是string字符串,不是流类型,所以无法实现文件下载。

    但用ajax仍然可以获得文件的内容,该文件将被保留在内存中,无法将文件保存到磁盘。这是因为JavaScript无法和磁盘进行交互,否则这会是一个严重的安全问题,js无法调用到浏览器的下载处理机制和程序,会被浏览器阻塞。

    并且 我用ajax实现的时候出现了很多bug。

    在网上参考好多博客,经过不断的调试,我还是选择了原生的XMLHttpRequest对象进行post请求。

    blob(HTML5 新特性)

    二进制大对象,是一个可以存储二进制文件的容器。

    作用

    Js一直以来都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。

    Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。

    BLOB是一个大文件,典型的BLOB是一张图片或一个声音文件,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。

    重点应用
    • 目前做的通过URL下载文件。
    • 分片上传文件(将大文件分片,轮询向后台提交各文件片段)。

    后端代码

    /**
     * 生成Excel报表
     * Error:存在问题
     * 1. 前端表格中没有Student对象的一些属性,生成报表时不必要显示的属性字段在Excel中显示。
     *    solve:加判断控制。
     * 2. (由于blob是HTML5新出的)兼容性问题:chrome、firefox、opera无问题,
     * 3. 检测grid表格中有无字段名称冲突问题。
     *    solve:细心检查即可
     * 4. 下载完Excel,打开出现"文件已损坏 无法打开"问题,这是因为office受保护试图导致(安全问题)
     *    solve:在office选项里边修改一下即可(客户端问题)
     * @param list
     * @param response
     */
    @RequestMapping(value = "/exstudent",consumes = "application/json;charset=utf-8")
    public void export (@RequestBody List<Student> list, HttpServletResponse  response){
        OutputStream out = null;
        String name = "学生信息管理表";
    
        for (Student stu:list) {
            System.out.println(stu.getStudentname());
        }
        try {
            response.setHeader("content-type", "application/octet-stream");
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" +URLEncoder.encode(name, "UTF-8")+".xlsx");
            out = response.getOutputStream();
            //调用老师自己写的库,本篇文章不详细说生成Excel文件的事情。
            TExcel.exportExcel(name,Student.class,list,out);
            System.out.println("下载ok");
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
    
        }
    }
    

    前端代码:

    //导出按钮被点击之后,将按钮制为无效(防止多次生成)
    function abideBtn(){
        console.log("禁止按钮......");
        $("#download").attr({"href":"#"});
        $("#download").css("cursor","not-allowed");
    }
    //下载过程中出错误,
    function downloadError(){
        console.log("发生错误,下载失败");
        alert("下载中出现错误!请重试");
        $("#download").attr({"href":"javascript:exportData();"});
        $("#download").css("cursor","pointer");
    }
    //导出表格数据
    //注意:下面获取jqGrid中所有行数据的前提是分页在前端,而不是后端。
    //如果你是在后端分页,那么你会发现,你会将所有数据都显示出来。
    function exportData() {
        var grid = jQuery("#grid");
        //获取当前显示的数据
        var rowNum = grid.jqGrid('getGridParam', 'rowNum'); //获取显示配置记录数量
        var total = grid.jqGrid('getGridParam', 'records'); //获取查询得到的总记录数量
        //设置rowNum为总记录数量并且刷新jqGrid,使所有记录现出来调用getRowData方法才能获取到所有数据
        grid.jqGrid('setGridParam',{rowNum: total,}).trigger('reloadGrid');
        var rows = o.jqGrid('getRowData');
        grid.jqGrid('setGridParam',{rowNum: rowNum,}).trigger('reloadGrid');
        postToPOM(rows);
    }
    //发送post请求
    function postToPOM(rows) {
        console.log(rows);
        var url = "../student/exstudent";
        var xhr = new XMLHttpRequest();
        xhr.open('POST',url,true);
        xhr.responseType = "blob";
        xhr.setRequestHeader("Content-Type"
            , "application/json;charset=utf-8");
        //添加监听事件。
        xhr.addEventListener("load",abideBtn,false);
        xhr.addEventListener("error",downloadError,false);
        xhr.onload = function (){
            if(this.status === 200){
                //创建Bolb对象
                var blob = this.response;//html5新出的
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = function(e){
                    //创建a标签,构造下载弹窗
                    var a = document.createElement("a");
                    a.id = "downloadTag";
                    a.download = '学生信息管理表.xlsx';
                    a.href = e.target.result;
                    $("body").append(a);
                    a.click();
                    $("#downloadTag").remove();
                    console.log("下载完成!");
                    //恢复按钮
                    $("#download").attr({"href":"javascript:exportData();"});
                    $("#download").css("cursor","pointer");
                }
            }
        };
        xhr.send(JSON.stringify(rows));
    }
    

    转载于:https://www.cnblogs.com/yjz6/p/9799593.html

    展开全文
  • 获取jqGrid中选择的行的数据 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);如果想...
  • 如何获取jqGrid中选择的行的数据?下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);如果想要获取选择多行的id,那这些id便...
  • jqgrid获取数据库数据

    千次阅读 2019-01-08 19:21:10
    jqgrid获取数据有两种方法,一种是获取本地(即html中写入的固定的数据),另一种是获取后台数据库中的数据。 不过,不论是哪种方法,我这里采用的,都是基于local的数据获取方式,后台数据库的数据,也是通过Django...
  • jqGrid--获取jqGrid数据

    千次阅读 2018-11-14 16:10:43
    colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型,默认为false。当为false时,返回的数组中只包含列的值,当为true时返回数组是对象数组,具体格式 {id:rowid, val...
  • //jqgrid通过saveRow方法,获取grid中的数据, $("#yourSubmit").click(function(){ var map={ }; var dataArr=[]; for(var i=0;i<dataLength;i++){ var indexlist=$("#xxxDataGri...
  • jqgrid获取原始数据,js对象拷贝

    千次阅读 2017-11-30 16:36:40
    用vue做项目碰到一个js关于对象拷贝问题1.jqGrid获取数据不能获取原始json数据的问题.jqGrid的$(your tableId).jqGrid(“getRowData”,id);方法是获取对应行id数据的,这就有个问题了,若返回数据的list是...
  • jqGrid获取表格所有行数据

    万次阅读 2018-05-04 21:33:23
    最近在做项目需求的时候,需要获取jgGrid中的所有行数据;在这里记录一下用到的方法。 这是从网上找的代码片段: //获取当前表格的所有数据 function getJQAllData() { var o = jQuery("#jqGridId"...
  • jqgrid: 不错jQuery表格插件。目前官方sample和网友例子...通过getJSON发送请求,获取数据集,数据集中一部分(一个子节点,为json数组)赋值给jqgrid表格,其他部分还需要给页面其他元素赋值。刚开始使...
  • [size=large]如题,在jqGrid中使用dwr方法从后台获取数据 弹出提示框 chrome中报错为can't read property 'integer' of undefined firefox中报错为$.jgrid.formatter is undefined jqGrid配置如下:[code="js"]...
  • 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’); 如果想要获取选择多行的id,那...
  • 当需要在表格输入数据时,就可以将单元格设置为可编辑。 将单元格设置为可编辑 {name: 'quantity', editable:true,editrules:{number:true}} 设置grid下列属性:  cellEdit: true,  cellsubmit: '...
  • 1. getLocalRow (推荐使用) Return the row data from the local array stored in ...根据官方说明,当jqGridatatype为local时,getLocalRow从data参数,存储在本地数组中获取数据. $("#grid").getLoc...
  • colNames : [ 'ID', 'Key', 'Value', '主分类ID', '主类型数据ID'], colModel : [{name:'id',index:'id',width:30,sortable:false,hidden:true}, {name:'key',index:'key',width:30,sortable:...

空空如也

空空如也

1 2 3 4 5 6
收藏数 116
精华内容 46
关键字:

获取jqgrid中的数据