`
xufei0110
  • 浏览: 110614 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

jqgrid 的一些操作 动态增加列 用本地 数据 修改表格

阅读更多

 

1 jqGrid动态增加列,

 

 

目前还没有这样的方法

只能先卸载Grid再进行重绘,才能达到改变列的目的。

 

 

jQuery('#grid1').GridUnload();
 

 

用这个方法 卸载jqgrid

 

然后重新设置吧

 

 

jQuery('#grid1').jqGrid({
    colNames:...,
    colModel:...,
    ...
});
 

 

 

2 用本地 数据 修改表格

这个必须先把数据类型改成local

 

$('#lgrid-1').jqGrid().clearGridData();

$('grid-1').jqGrid('setGridParam', 
{  datatype:local,
    rowNum:data.length,
    data:data
}
).trigger('reloadGrid', [{page:1}]);  
 

 

 

一旦用本地数据 分页功能就不好用了,因为不会再去查后台了

 

3 修改多条 同时提交后台

 

var savedRow = null;
var savedCol = null;
// 修正
$('#lgrid-3').setGridParam({
      beforeEditCell : function(rowid, cellname, value, iRow, iCol) {
            // 记录修改的表格
            savedRow = iRow;
            savedCol = iCol;
                 }
});
// 向后台发送数据前 保存表格的修改
if (savedRow && savedCol) {
           jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol);
}
// 取得表格的数据 全部
var data = $('#grid-3').jqGrid().getRowData();

 

 

 

 

4 隐藏列

  jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid');  
            显示用 showCol

    

 

 

 

 

 

5 可以多选的情况下 默认选中

 

$('#list').jqGrid().setSelection(1);
 

 

如果已经被选中 则是 反选

 

6 数据绑定前检查

ajaxGridOptions:   
        {dataFilter:    
            function(data,dataType){    // preprocess the data
                if ( $(data).find("code").text() == 'problem' ) {   // check for an error in the result
                    $("#list").jqGrid('GridUnload');
                    $("#errormsg").text( $(data).find("description").text() );
                }else{
                    return data;
                }
            }
        }
 

 

 

 


分享到:
评论
1 楼 yz285131311 2013-07-26  
使用本地数据添加进 jqgrid, 那当它点击下一页这些时候能控制吗

相关推荐

    jqGrid表格数据修改删除代码.zip

    在这个“jqGrid表格数据修改删除代码.zip”压缩包中,很可能包含了一组实现jqGrid表格数据的修改和删除功能的示例代码。 在jqGrid中,对表格数据进行修改通常涉及到以下几个关键知识点: 1. **初始化表格**:首先...

    jqGrid插件--JQuery表格插件

    1. **基本使用**:jqGrid通过在HTML表格元素上应用jQuery选择器和方法来初始化,允许开发者轻松地将静态或动态数据转化为可操作的表格。基本语法是`$("#gridId").jqGrid(options);`,其中`options`是一个包含配置...

    jqgrid非常简单的例子,读取本地简单的XML,还有IE下的firebug调试工具

    本例子将展示如何使用jqGrid从本地XML文件中读取数据并显示在一个表格中。 首先,我们来看`index.html`或`testjq.html`这两个HTML文件,它们是网页的主体部分。通常,这两个文件会包含jqGrid所需的CSS和JS文件引用...

    jqgrid表格插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、分页、搜索、编辑等,使得开发者能够轻松创建交互式的表格。本篇文章将深入探讨...

    jqGrid 3.5源码+DEMO+DOC

    - 编辑与操作:jqGrid支持行内编辑,用户可以直接在表格中修改数据,还提供了添加、删除、保存和取消编辑的操作。 - 自定义列:开发者可以自定义列的显示样式、宽度和对齐方式,甚至可以添加自定义的列模板。 - ...

    jqGrid表格插件

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作大量结构化数据。它提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得开发人员能够轻松地创建交互式的表格。下面将详细介绍...

    jqGrid4.6完整包

    2. **可编辑表格**:jqGrid 支持表格数据的编辑功能,用户可以直接在表格内修改单元格数据,提供单行编辑、多行编辑和弹出式编辑等多种模式,满足不同场景的需求。 3. **文件结构**: - `src`:源码目录,通常包含...

    jqGrid 3.6

    2. 编辑功能:jqGrid 提供了行内编辑、弹出式编辑和表格外编辑等多种编辑模式,方便用户直接在表格中修改数据。此外,它还支持添加、删除和保存操作,以及数据验证。 3. 分页:jqGrid 自带强大的分页功能,可以轻松...

    jQgrid demo

    1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以处理 JSON、XML、CSV 等多种数据格式,适应不同后端接口的需求。 2. **分页**:jQGrid 提供了内置的分页功能,用户...

    jqGrid5.5 版本

    3. 编辑功能:jqGrid支持行内编辑、弹出式编辑和批量编辑模式,方便用户对数据进行添加、修改和删除操作。同时,它还提供了数据验证功能,确保输入的数据符合预设规则。 4. 高级特性:jqGrid5.5增加了如子网格、行...

    jqGridDemo

    3. **初始化jqGrid**:使用JavaScript的`$("#tableId").jqGrid()`方法来初始化表格,指定相关参数如数据源、列信息等。 4. **绑定数据**:根据数据源类型(本地数据或远程数据),设置相应的数据处理方式。 5. **...

    jqgrid 3.8.1 all in one

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格化的数据。在3.8.1版本中,它包含了丰富的功能和优化,使得数据的展示、排序、筛选、编辑以及分页变得更加方便。这个"jqGrid 3.8.1 all in ...

    jqgrid4.6.rar

    10. **API 调用**:jqGrid 提供了一系列 API 方法,如 `reloadGrid()` 用于刷新表格,`getGridParam()` 获取当前设置,`setGridParam()` 修改设置,`jqGrid('editRow')` 和 `jqGrid('saveRow')` 用于行编辑等。...

    jquery.jqgrid最新版

    jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性,在Web开发领域广受青睐。本篇文章将深入探讨...

    jqGrid_5.3.1

    jqGrid 5.3.1可能会针对大数据量的处理进行优化,例如使用本地存储或服务器端分页来提高性能。 8. **兼容性**: 考虑到浏览器兼容性,jqGrid通常支持主流的现代浏览器,如Chrome、Firefox、Safari和IE(至少IE8...

    jqGrid 4.4.1

    - **API**: jqGrid提供了丰富的API方法,如`jqGrid("getGridParam")`用于获取当前表格参数,`jqGrid("setGridParam")`用于修改表格设置,`jqGrid("reloadGrid")`用于刷新数据等。 - **事件处理**: 支持多种事件,如...

    jquery.jqGrid-4.5.2.zip

    - **编辑**:支持行内编辑、弹出式编辑和批量编辑,方便用户修改表格数据。 - **导出**:可将表格数据导出为 CSV, Excel 或 PDF 格式。 2. **目录结构**: - **css**:包含 jqGrid 的样式文件,用于定义表格的...

    JQgrid演示代码

    此外,JQgrid 还支持本地化、主题切换等特性,使其成为 web 开发中处理表格数据的理想选择。 总的来说,"JQgridDemo"压缩包中的内容是学习和理解 JQgrid 工作原理和实践应用的宝贵资源,通过分析和运行这些示例代码...

    jquery.jqGrid-4.6.0

    1. **数据处理**:支持本地数据和远程数据源(如Ajax),可以轻松地从数据库获取并显示数据。 2. **分页**:内置分页功能,可轻松设置每页显示的行数,并提供上一页/下一页、第一页/最后一页的导航。 3. **排序**:...

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    同时,它支持本地数据加载,方便离线或小规模的数据展示。 其次,jqGrid提供了丰富的列设置选项,可以自定义列的标题、宽度、对齐方式,甚至可以设置列的可排序性、可搜索性和可隐藏性。此外,列的模板功能允许用户...

Global site tag (gtag.js) - Google Analytics