jqGrid行编辑配置

2024-03-26 20:48
文章标签 配置 编辑 jqgrid

本文主要是介绍jqGrid行编辑配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jqGrid行编辑配置，方法，事件

　　行编辑可以在行修改后更新数据，如下图所示

jqGrid行编辑配置

　　用户用鼠标点击选择一行，jqGrid将可编辑的字段转换为数据输入单元，如上面图所示。不可编辑的列，如id，不会转为可输入单元，而是保持不变。可以通过配置colModel来实现。完成修改后，按下“enter”键提交数据到服务器。

软件要求和安装

　　要使用行编辑功能，需要在jqGrid下载页面勾选Inline Editing和Common modules，然后下载。下载地址：http://www.trirand.com/blog/?page_id=6

　　要看元代可以从src目录中找到 grid.inlinedit.js这个文件

　　属于行编辑的属性，事件和方法是jqGrid选项配置中的一个子集。

方法

有５个属于行编辑的附加方法

  • editRow
  • saveRow
  • restoreRow
  • addRow
  • inlineNav

　　需要在一个已经创建的jqGrid实例上调用这些方法，可以在事件中或者点击按钮触发这些事件。

Exmaple

－收缩 JavaScript代码
var lastSel
jQuery( "#grid_id").jqGrid({
//...
   onSelectRow:  function(id){
      if(id && id!==lastSel){ 
        jQuery( '#grid_id').restoreRow(lastSel); 
        lastSel=id; 
     }
     jQuery( '#grid_id').editRow(id,  true); 
   },
//...
});

　　上面的示例中，在将被选中的行转为编辑模式前，判断是否已经存在编辑的行，存在则取消此行编辑模式还原为原始状态。如果你想保持数据而不是还原为原始状态，可以使用saveRow替代restoreRow方法。

editRow：编辑行

调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本jqGrid API调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

editRow参数配置说明

  • grid_id ：已经构造过的jqGrid
  • rowid：此数据行的id
  • keys：设置为true可以使用 [Enter]保存数据或者[Esc] 取消编辑
  • oneditfunc：在行成功转为编辑模式下触发的事件，参数为此行数据id
  • successfunc, url, extraparam, aftersavefunc,errorfunc 和 afterrestorefunc在下面的saveRow方法中介绍。

　　拥有'not-editable-row' 样式的行不可编辑，即使colModel中配置了某些列能编辑。

　　设置editRow方法的oneditfunc为某个函数的句柄，例如func为一个函数，不能设置为字符串"func"或者func()这种格式，传递func即可。

　　jqGrid4+，可以传递对象作为配置值，如下示
－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'editRow',rowid, 
{ 
    keys :  true, 
    oneditfunc:  function() {
        alert ( "edited"); 
    }
});

editRow默认配置如下

－收缩 JavaScript代码
editparameters = {
     "keys" :  false,
     "oneditfunc" :  null,
     "successfunc" :  null,
     "url" :  null,
         "extraparam" : {},
     "aftersavefunc" :  null,
     "errorfunc":  null,
     "afterrestorefunc" :  null,
     "restoreAfterError" :  true,
     "mtype" :  "POST"
}
 
jQuery( "#grid_id").jqGrid( 'editRow',rowid,  parameters);

　　如果key配置为true，那么 successfunc, url, extraparam, aftersavefunc, errorfunc 和 afterrestorefunc这些配置将作为参数传递给saveRow方法当按下 [Enter] 键时（saveRow） (saveRow不需要定义，jqGrid会自动调用它)。

　　当调用此方法编辑指定的某行时，jqGrid读取可编辑字段的内容，依据edittype和editoptions自动生成对应的输入控件。

saveRow：保存行

保存被编辑的行，调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

　　jqGrid4+版本可以传递对象作为配置值，如下

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'saveRow',rowid, 
{ 
    successfunc:  function( response ) {
         return  true; 
    }
}); 
saveRow默认参数配置如下
－收缩 JavaScript代码
saveparameters = {
     "successfunc" :  null,
     "url" :  null,
         "extraparam" : {},
     "aftersavefunc" :  null,
     "errorfunc":  null,
     "afterrestorefunc" :  null,
     "restoreAfterError" :  true,
     "mtype" :  "POST"
}
 
jQuery( "#grid_id").jqGrid( 'saveRow',rowid,  saveparameters);

saveRow参数配置说明

  • rowid：要保存的数据行id
  • successfunc：配置过，那么将在成功请求后触发（200状态，动态页没有发生错误）。事件参数为XHR对象，需要返回true/false（返回true会使用修改后的数据填充当前行，否则使用修改前的数据填充，同时关闭编辑模式。可以通过XHR.responseText得到服务器的返回值判断是否修改成功，在返回true/false，不会ajax可以参考这个： ajax对象）
  • url：定义此项，将会替代jqGrid配置中的editurl，如果设置为 'clientArray'，仅保存数据到grid中，不会向服务器提交数据（如果不想更改一行就提交一次，配置为这个值比较有用，可以点击页面上某个按钮将所有数据用ajax一次提交）
  • extraparam：提交到服务器的其他附加数据
  • aftersavefunc：数据保存到服务器返回客户端后触发。此事件参数为rowid和xhr对象，url设置为clientArray也会触发此事件
  • errorfunc：动态页出错时触发，。此事件参数为rowid和xhr对象
  • afterrestorefunc：调用restoreRow还原数据行原始信息（数据行保存不成功）时触发，参数有rowid
传递给saveRow配置值为函数的，需要传递函数句柄，如函数func，不能设置为"func"或者func()，配置为func即可

　　url（或者jqGrid配置中的editurl）未配置为 'clientArray'，调用此方法，数据行数据将将会以键值对形式提交到服务器，键名称来源于colModel配置的name，同时jqGrid会附加上id:rowid。如

－收缩 JavaScript代码
jQuery( "#grid_id").saveRow( "rowid",  false);

将保存数据到grid中并同时发送到服务器保存，而

－收缩 JavaScript代码
jQuery( "#grid_id").saveRow( "rowid",  false,  'clientArray'); 
仅保存数据到grid中，而不会发送ajax请求服务器。新版本API调用方式
－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'saveRow', "rowid",  false);
jQuery( "#grid_id").jqGrid( 'saveRow', "rowid",  false,  'clientArray');

以对象作为参数的调用形式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'saveRow', "rowid", { url :  'clientArray' });

有2个附加的配置可以在jqGrid中设置。

配置名称 类型 描述 默认值
ajaxRowOptionsobject设置提交数据到服务器的ajax请求全局设置。可以重写当前所有保存数据ajax请求配置，包括complete事件empty object
serializeRowDatapostdata配置此事件可以序列化传递给保存数据行的ajax的数据。配置的函数需要返回序列化后的数据。当需要发送自定义数据时可以使用这个配置，例如，json、xml格式的字符串等，传递给配置函数的参数为发往服务器的数据。null

restoreRow：还原数据行

此方法将正在编辑的行还原为上一次成功保存的值。

调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").restoreRow(rowid, afterrestorefunc);

新API调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'restoreRow',rowid, afterrestorefunc);

jqGrid4+可以将参数作为对象传递，如下

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'restoreRow',rowid, 
{ 
     "afterrestorefunc" :  function( response ) {
         // code here 
    }
});

默认配置如下

－收缩 JavaScript代码
restoreparameters = {
     "afterrestorefunc" :  null
}
 
jQuery( "#grid_id").jqGrid( 'restoreRow',rowid,  restoreparameters);

restoreRow参数说明

  • rowid ：要还原的数据行id
  • afterrestorefunc ：数据行被还原后触发，参数有 rowid

addRow：添加新数据行

行编辑模式下新增一行数据，调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").addRow(rowid, parameters);

新API调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'addRow',parameters);

parameters默认值如下

－收缩 JavaScript代码
parameters =
{
    rowID :  "new_row",
    initdata : {},
    position : "first",
    useDefValues :  false,
    useFormatter :  false,
    addRowParams : {extraparam:{}}
}

addRow方法配置说明

  • rowID - (string)新增加的新数据行id
  • initdata - (object) json键值对对象，键名称和colModel配置的name一致。设置单元格初始化值
  • position - (string)新增加行的位置，默认first。设置为last将会插入到grid最后
  • useDefValues - (boolean)设置为true启用colModel中editoptions配置
  • useFormatter : (boolean)设置为true启用jqGrid中 formatter格式化数据
  • addRowParams : (object) 传递给addRow方法的参数，和editRow配置一样（实际是传递给editRow方法用的）

　　调用这个方法，实际调用了２个已经存在的方法来实现，首先调用addRowData添加一行本地数据，然后调用editRow方法编辑此行。addRowParams设置了key为true，按下ESC键会删除此行数据

inlineNav：给行编辑添加导航操作按钮

添加导航操作按钮对应行编辑的addRow, editRow, saveRow, restoreRow方法。要使用此方法，需要首选调用navGrid方法。

调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").navGrid(pagerid, {...});
jQuery( "#grid_id").inlineNav(pagerid, parameters);

新API调用方式

－收缩 JavaScript代码
jQuery( "#grid_id").jqGrid( 'navGrid',pagerid, {...});
jQuery( "#grid_id").jqGrid( 'inlineNav',pagerid, parameters);

parameters默认值如下

－收缩 JavaScript代码
parameters = { 
   edit:  true,
   editicon:  "ui-icon-pencil",
   add:  true,
   addicon: "ui-icon-plus",
   save:  true,
   saveicon: "ui-icon-disk",
   cancel:  true,
   cancelicon: "ui-icon-cancel",
   addParams : {useFormatter :  false},
   editParams : {}
}
配置名称 类型 描述 默认值
addboolean是否在导航栏中显示添加操作。点击这个按钮将会调用addRow(addParams)方法true
addiconstring设置添加按钮的图标。目前仅能设置为UI主题中的图标ui-icon-plus
addtextstring在添加按钮中显示的文本内容空值
addtitlestring鼠标移动到添加按钮上时显示的提示信息Add new row
editboolean是否在导航栏中显示编辑操作。点击这个按钮将会调用editRow(editParams)方法（注意需要选中一行，选中多行编辑最后一次选中的）true
editiconstring设置编辑按钮的图标。目前仅能设置为UI主题中的图标ui-icon-pencil
edittextstring在编辑按钮中显示的文本内容empty
edittitlestring鼠标移动到编辑按钮上时显示的提示信息Edit selected row
positionstring定义操作按钮在导航栏中的位置，可以为left，center，rightleft
saveboolean是否在导航栏中显示保存操作。点击这个按钮将会调用saveRow(editParams)方法true
saveiconstring设置保存按钮的图标。目前仅能设置为UI主题中的图标ui-icon-disk
savetextstring在保存按钮中显示的文本内容empty
savetitlestring鼠标移动到保存按钮上时显示的提示信息Save row
cancelboolean是否在导航栏中显示取消操作。点击这个按钮将会调用restoreRow(editParams)方法true
canceliconstring设置取消按钮的图标。目前仅能设置为UI主题中的图标ui-icon-cancel
canceltextstring在取消按钮中显示的文本内容empty
canceltitlestring鼠标移动到取消按钮上时显示的提示信息Cancel trow editiong
addParamsobject点击添加按钮后传递给addRow方法的参数，详细信息参考上面的addRow参数{useFormatter : false}
editParamsobject点击导航栏按钮的编辑，保存，取消按钮，传递给 editRow, saveRow, restoreRow 方法的参数。请参考相关方法获取更多信息{}

注意事项

数据如何组织

编辑某行及输入控件组成规则如下

  • 被编辑的行新增editable=“1”自定义属性
  • jqGrid配置savedRow（json对象array数组）被当前行的数据填充，键值对对象，附加 id:rowid键值对
  • 隐藏的字段不包含在内（Hidden fields are not included）
  • 可编辑元素的id组成为 'rowid_'+ name，name为colModel定义的name值。例如，我们编辑id为10的行，此列colModel配置的name值为myname，那么这个输入控件的id为 10_myname
  • 可编辑元素的name属性值为colModel中配置的此列的name配置值
  • 当行保存或者还原后，此行editable被设置为 “0” ，jqGridsavedRow中id为rowid的项被删除

提交到服务器的内容

提交到服务器的数据包含如下提到的内容

  • 键值对，键名称对应此行的输入控件name值（包含此行所有输入控件）
  • 附加id:rowid 键值对，rowid为此行数据id
  • 如果extraparam参数，将会和提交的数据一起发送到服务qui

示例

－收缩 HTML代码　　 运行代码　　 [如果运行无效果，请自行将源代码保存为html文件运行]
<html>
<head>
<script type="text/javascript">
jQuery(document).ready( function(){ 
   var lastsel2
  jQuery( "#rowed5").jqGrid({        
    datatype:  "local",
    height: 250,
    colNames:[ 'ID Number', 'Name',  'Stock',  'Ship via', 'Notes'],
    colModel:[
      {name: 'id',index: 'id', width:90, sorttype: "int", editable:  true},
      {name: 'name',index: 'name', width:150,editable:  true, editoptions:{size: "20",maxlength: "30"}},
      {name: 'stock',index: 'stock', width:60, editable:  true, edittype: "checkbox",editoptions: {value: "Yes:No"}},
      {name: 'ship',index: 'ship', width:90, editable:  true, edittype: "select",formatter: 'select', editoptions:{value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},                       
      {name: 'note',index: 'note', width:200, sortable: false,editable:  true,edittype: "textarea", editoptions:{rows: "2",cols: "10"}}                      
              ],
    onSelectRow:  function(id){
       if(id && id!==lastsel2){
        jQuery( '#rowed5').restoreRow(lastsel2);
        jQuery( '#rowed5').editRow(id, true);
          lastsel2=id;
      }
    },
    editurl:  "server.php",
    caption:  "Input Types"
  });
   var mydata2 = [
    {id: "12345",name: "Desktop Computer",note: "note",stock: "Yes",ship: "FE"},
    {id: "23456",name: "Laptop",note: "Long text ",stock: "Yes",ship: "IN"},
    {id: "34567",name: "LCD Monitor",note: "note3",stock: "Yes",ship: "TN"},
    {id: "45678",name: "Speakers",note: "note",stock: "No",ship: "AR"},
    {id: "56789",name: "Laser Printer",note: "note2",stock: "Yes",ship: "FE"},
    {id: "67890",name: "Play Station",note: "note3",stock: "No", ship: "FE"},
    {id: "76543",name: "Mobile Telephone",note: "note",stock: "Yes",ship: "AR"},
    {id: "87654",name: "Server",note: "note2",stock: "Yes",ship: "TN"},
    {id: "98765",name: "Matrix Printer",note: "note3",stock: "No", ship: "FE"}
    ];
   for( var i=0;i<mydata2.length;i++)
    jQuery( "#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"> </table>
</body>
</html>

效果图如下

  Inline editing

来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

这篇关于jqGrid行编辑配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/849794。

相关文章

Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机（Reduced Instruction SetCom
阅读更多...
log4j2相关配置说明以及${sys:catalina.home}应用

log4j2相关配置说明以及${sys:catalina.home}应用

${sys:catalina.home} 等价于 System.getProperty("catalina.home") 就是Tomcat的根目录：  C:\apache-tomcat-7.0.77 <PatternLayout pattern="%d{yyyy-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" /> 2017-08-10
阅读更多...
DM8数据库安装后配置

DM8数据库安装后配置

1 前言 在上篇文章中，我们已经成功将库装好。在安装完成后，为了能够更好地满足应用需求和保障系统的安全稳定运行，通常需要进行一些基本的配置。下面是一些常见的配置项： 数据库服务注册：默认包含14个功能模块，将这些模块注册成服务后，可以更好的启动和管理这些功能；基本的实例参数配置：契合应用场景和发挥系统的最大性能；备份：有备无患；… 2 注册实例服务 注册了实例服务后，可以使用系统服务管理，
阅读更多...
配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络 服务器端配置 在服务器端，你需要确保安装了必要的驱动程序和软件包，并且正确配置了网络接口。 安装 OFED 首先，安装 Open Fabrics Enterprise Distribution (OFED)，它包含了 InfiniBand 所需的驱动程序和库。 sudo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2