jqGrid用法及增删改查方法_jqgrid可以在列表增删改查吗-程序员宅基地

技术标签: jqGrid  表格控件  javascript  jquery  

jquery grid是富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。
1.调用grid
jqGrid已经可以从Server端获得数据,并显示在Grid表格中了。下面说一下,如何操作Grid表格及其数据。
jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式:
$("#grid_id").jqGridMethod( parameter1,...,parameterN );

或者
$("#grid_id").jqGrid('method', parameter1,...,parameterN );
 
2. 常用的方法函数(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods )
1. getGridParam
这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,例如:
 
var id = $("#gridTable").jqGrid("getGridParam", "selrow");
 

 
即可获得当前选中的行的ID。
注:selrow是jqGrid选项之一,默认值是null。这是一个只读选项,代表最后选中行的ID。如果执行翻页或者排序后,此选项将被设为 null。关于其他选项,后续会有介绍。
如果不传入name参数,则会返回jqGrid整个选项options。
2. getRowData
这个方法用来获得某行的数据。它具有一个rowid参数,jqGrid会根据这个rowid返回对应行的数据,返回的是name:value类型的数组。 例如:
var getContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var rowData = $("#gridTable").jqGrid("getRowData", selectedId);
 
   alert("First Name: " + rowData.firstName);
};


 
 
 
如果rowid未能被找到,则返回一个空数组;如果未设置rowid参数,则以数组的形式返回Grid的所有行数据。
3. addRowData
这个方法用于向Grid中插入新的一行。执行成功返回true,否则返回false。它具有4个参数:
rowid :新行的id号;
data :新行的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的列名称name;
position :插入的位置(first:表格顶端;last:表格底端;before:srcrowid之前;after:srcrowid之后);
srcrowid :新行将插入到srcrowid指定行的前面或后面。
例如:
var addContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var dataRow = {
       id: 99,
      lastName: "Zhang",
       firstName: "San",
       email: "[email protected]",
       telNo: "0086-12345678"
   };
 
   if (selectedId) {
       $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
 
   } else {
       $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
 
}


 
这个方法可以一次性插入多行,data参数必须是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]这样的数组形式,而且rowid参数也应该设为data参数对象中代表id的field名称。不过,此时的rowid不用必须是 colModel中的一部分。
例如:
var addContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var dataRow = [{
       id: 99,
       lastName: "Zhang",
       firstName: "San",
       email: "[email protected]",
       telNo: "0086-12345678"
   },
   {
       id: 100,
       lastName: "Li",
       firstName: "Si",
       email: "[email protected]",
       telNo: "0086-12345678"
   },
   {
       id: 101,
       lastName: "Wang",
       firstName: "Wu",
       email: "[email protected]",
       telNo: "0086-12345678" }];
 
   if (selectedId) {
       $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId);
 
   } else {
       $("#gridTable").jqGrid("addRowData", "id", dataRow, "first");
 
   }
};
 


 
注:我测试了一下,一次插入多行的情况下,用于设置插入位置的后两个参数,似乎没有起作用。插入的几行数据都被置于Grid的底端。
4. setRowData
这个方法用于为某行数据设置数据值。执行成功返回true,否则返回false。它具有3个参数:
rowid :更新数据的行id;
data :更新的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的列名称name;这个数据对象,不必设置完全,需要更新哪列,就设置哪列的 name:value对;
cssprop :如果cssprop为String类型,则会使用jQuery的addClass为行增加相应名称的CSS类;如果为object类型,则会使用 html的css属性,为行添加样式。如果只想增加css样式而不更新数据,可以将data参数设为false。
5. delRowData
这个方法用于删除某行数据。执行成功返回true,否则返回false。具有一个参数rowid,代表要删除的行id。
6. setGridParam
这个方法与getGridParam对应,用于设置jqGrid的options选项。返回jqGrid对象。参数为 {name1:value1,name2: value2…}形式的对象(name来自jqGrid的options选项名)。某些选项在设置之后需要trigger("reloadGrid"), 才能显示出效果。
7. setGridWidth
为Grid动态地设定一个新的宽度。两个参数:
new_width :以px为单位的新宽度值;
shrink :作用与jqGrid的shrinkToFit选项相同;如果此参数未设置,则沿用jqGrid的shrinkToFit选项的值。
8. trigger("reloadGrid")
根据当前设置,重新载入Grid表格,即意味着向Server发送一个新的请求。此方法只能用于已经构建好的Grid。此外,此方法不会使对 colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。
9. 其他方法
除了以上介绍的的方法外,jqGrid还有其他有用的方法,例如:
addJSONData、clearGridData、hideCol、resetSelection、setCaption、 setGridHeight、setLabel、showCol等
以及增强模块提供的方法,例如:
filterGrid、GridDestroy、GridUnload、setColProp等。
这些方法的具体用法,或浅显易懂,或不是非常常用。都可以参考官方文档(http://www.trirand.com/jqgridwiki /doku.php?id=wiki:methods ),得到具体指示。
10. 额外的考虑
在上面介绍的增删改数据行的操作中,jqGrid实际上完成的只是客户端的操作,主要是DOM的更改工作。但是如果传到Server的请求失败了, 或者没有得到想要的返回结果,那jqGrid的处理还继续吗?会不会和Server端的数据不同步了呢?
这个问题在下一篇中再讨论吧。
注: 本篇中介绍的方法在jqGrid的Demo中也有介绍,但是我觉得还是自己的实例看起来更直观,更适合自己理解。
附上代码:
javascript部分:
$(function() {
   // 配置jqGrid组件
   $("#gridTable").jqGrid({
       url: "jqGrid01.action",
       datatype: "json",
       mtype: "GET",
       height: 350,
       width: 600,
       colModel: [
            { name: "id", index: "id", label: "编码", width: 40 },
             { name: "lastName", index: "lastName", label: "姓", width: 80, sortable: false },
             { name: "firstName", index: "firstName", label: "名", width: 80, sortable: false },
            { name: "email", index: "email", label: "电子邮箱", width: 160, sortable: false },
             { name: "telNo", index: "telNo", label: "电话", width: 120, sortable: false }
       ],
       viewrecords: true,
       rowNum: 15,
       rowList: [15, 50, 100],
       prmNames: { search: "search" },
       jsonReader: {
           root: "gridModel",
           records: "record",
           repeatitems: false
       },
       pager: "#gridPager",
       caption: "联系人列表",
       hidegrid: false,
       shrikToFit: true
   });
});
var echoSelRow = function() {
   var id = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   alert("当前选中行ID:" + id);
};
var getContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var rowData = $("#gridTable").jqGrid("getRowData", selectedId);
 
   alert("First Name: " + rowData.firstName);
};
var addContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var dataRow = {
      id: 99,
       lastName: "Zhang",
       firstName: "San",
       email: "[email protected]",
       telNo: "0086-12345678"
   };
 
   if (selectedId) {
       $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
 
   } else {
       $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
 
   }
};
var updateContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   var dataRow = {
       lastName: "Li",
       firstName: "Si",
      email: "[email protected]"
   };
 
   var cssprop = {
       color: "#FF0000"
   };
 
   $("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};
var deleteContact = function() {
   var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
 
   $("#gridTable").jqGrid('delRowData', selectedId);
};
var changeGridOptions = function() {
   $("#gridTable").jqGrid("setGridParam", {
       rowNum: 50,
       page: 16
   }).trigger('reloadGrid');
 
   $("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid');
 
   alert($("#gridTable").jqGrid("getGridParam", "caption"));
   alert($("#gridTable").jqGrid("getGridParam", "rowNum"));
};
var resetWidth = function() {
   $("#gridTable").jqGrid("setGridWidth", 300, false);
};


 
 
html部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
   <head>
       <title>jqGrid02</title>
      <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/jquery-ui-1.8.1.custom.css" mce_href="css/themes/aero/jquery-ui-1.8.1.custom.css" />
       <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/ui.jqgrid.custom.css" mce_href="css/themes/aero/ui.jqgrid.custom.css" />
       <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
       <mce:script src="../js/jquery-ui-1.8.1.custom.min.js" mce_src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></mce:script>
       <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
       <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
       <mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
   </head>
   <body>
       <h3>
           jqGrid测试 02
       </h3>
       <div>
           <table id="gridTable"></table>
           <div id="gridPager"></div>
       </div>
       <br />
       <div>
           <button οnclick="echoSelRow()">当前行 ID</button>
           <button οnclick="getContact()">当前联系人</button>
           <button οnclick="addContact()">添加行</button>
           <button οnclick="updateContact()">修改行</button>
           <button οnclick="deleteContact()">删除行</button>
           <button οnclick="changeGridOptions()">改变 Grid选项</button>
           <button οnclick="resetWidth()">改变Grid宽度</button>
       </div>
   </body>
</html>


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/z_Dendy/article/details/9041879

智能推荐

dtree做权限控制_权限控制复选框插件-程序员宅基地

文章浏览阅读4.2k次。一个项目需要一个权限控制的模块,因为是重构的项目,用的是dtree,所有着手研究了一手dtree。网上也有好的地案例,比如http://www.jq22.com/jquery-info5331这个网址的模式,挺好的,就是太贵了,再比如:http://www.16css.com/menu/1184.html这个网站,里面有代码,是免费的,但是就是感觉里面的方法不太全,所以自己动手写了一个,代码如..._权限控制复选框插件

VMware虚拟机安装Windows8.1_win8镜像csdn-程序员宅基地

文章浏览阅读2k次。最近,很多小伙伴们都觉得自己的电脑内存不够了,又想换块硬盘,但又是一件复杂的事,那么就有很多人想到了PC上安装虚拟机,占用空间呢也不是很大,又方便。那么要怎么安装呢?今天就来教大家如何安装!“叮咚——”准备做好系统一时游,我们开始吧!1.安装时必不可缺镜像!如果要正版镜像那么就去这个网址:MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn)或这个微软官方:下载 Windows 8.1 光盘映像(ISO 文件) (microsoft.com)https://www.micros_win8镜像csdn

C/C++经典程序训练2---斐波那契数列-程序员宅基地

文章浏览阅读1.7k次。C/C++经典程序训练2—斐波那契数列Problem Description编写计算斐波那契(Fibonacci)数列的第n项函数fib(n)(n < 40)。数列描述:f1=f2==1;fn=fn-1+fn-2(n>=3)。Input输入整数 n 的值(0 < n < 40)。Output输出fib(n)的值。Sample Input7Sample..._c/c++经典程序训练2---斐波那契数列

2021-03-06_tweakpng-程序员宅基地

文章浏览阅读1.8k次。杂项#文件操作与隐写##文件类型的断别##文件头错误##文件分离操作##文件合并##文件内容隐写#图片隐写##细微颜色差别##GIF图多帧隐藏##Exif信息隐藏##图片修复##最低有效位lsb隐写##图片加密#压缩文件处理##伪加密##暴力破解##明文攻击##压缩包修复#流量取证技术##流量包修复##协议分析##数据提取..._tweakpng

数据结构:二叉树_#include "btree.h-程序员宅基地

文章浏览阅读272次。头文件#ifndef __BTREE_H__#define __BTREE_H__ #define LCHILD 0#define RCHILD 1#include"error.h"typedef char BTREEDATA;typedef struct _btreenode{ BTREEDATA data; struct _btreenode *lchild; _#include "btree.h

SAP增强程序里,调用BAPI并COMMIT的设计方案(MIGO增强)-程序员宅基地

文章浏览阅读581次。需求背景:1、通过MIGO参照PO做101收货时,增强代码里同步生成901 K 的寄售凭证2、通过MIGO冲销收货凭证时,增强代码里同步冲销寄售凭证设计方案:1、收货和冲销时,在增强点MB_MIGO_..._migo_badi_bapi

随便推点

微服务是分布式后的产物对吗_财务独立是财富的产物吗-程序员宅基地

文章浏览阅读83次。微服务是分布式后的产物对吗 介绍 (Introduction)This is the second part of the work that attempts to find a recipe towards financial independence — a stage where you no longer need to work to support yourself. 这是工作的第..._108935266

Oracle JOB任务-程序员宅基地

文章浏览阅读565次。select * from all_jobs;SELECT * FROM DBA_JOBS;SELECT * FROM DBA_JOBS_RUNNING;SELECT job, next_date, next_sec, failures, broken FROM user_jobs; select a from sxfc.job_table order by a;delete fro

苹果vr眼镜什么时候发布-程序员宅基地

文章浏览阅读739次。1月5日消息 显示器研究机构DSCC发布的行业预测报告显示,苹果公司预计将在2022年下半年发布一款同时具有VR和AR功能的头戴设备。这款设备将配有三个显示模块,包括两个微型OLED显示器和一个AMOLED面板。苹果vr眼镜发布会抢先看 http://www.adiannao.cn/dn苹果VR/AR头显会有三块屏幕,最高8K分辨率两个微型OLED显示器尺寸为1.4英寸,支持4K分辨率,AMOLED面板将用于实现低分辨率外围视觉,从而增加视觉纵深。DSCC预计,第一代设备将是一款面向专业人士和开发人_苹果vr眼镜

第10篇 Fast AI深度学习课程——构建语言模型及文本情感分析_fastai text-程序员宅基地

文章浏览阅读2.9k次,点赞2次,收藏4次。在学习了目标识别的网络构建与训练之后,我们总结一个模型的三元素为:数据、网络架构、损失函数。而采用的一般策略为迁移学习,即在已有的网络基础上,增加附加层;训练时首先冻结已有的网络的参数,训练附加层的系数;然后使用阶梯化的学习速率,训练整个网络。在本节及下节课程中,我们将学习神经网络在自然语言处理方面的应用,包括构建语言模型、文本的情感分析、机器翻译等。在这一部分,我们所使用的技术策略同目标识别的..._fastai text

用ObjectDataSource实现自定义分页的心得总结_与objectdatasource真分页无关的 属性是-程序员宅基地

文章浏览阅读750次。在Web应用开发中列表的分页是难免要遇到的问题,在ASP.NET 2.0中微软为我们提供了很多数据源控件,如SqlDataSource、ObjectDataSource等,它们都可以实现默认分页,但是默认分页是在内存中实现的,用户量增大时Web服务器的负担会急剧增大,在多层体系结构程序开发中,往往把分页和排序的工作交给数据库服务器来完成,在网上也能找到很多能够快速实现分页的控件,但是做为一个程序员对分页的实现还是有一定的了解比较好,如果过渡的依赖于控件,你说写出的代码独立性就很差,一般在多层we_与objectdatasource真分页无关的 属性是

C 递归-程序员宅基地

文章浏览阅读51次。C 递归递归指的是在函数的定义中使用函数自身的方法。 举个例子: 从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?"从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?'从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?……'" 语法格式如下:void recursion(..._void recursion(){ statements; ... ... ... recursion(); /* 函数调用自身 */ ..