jqgrid编辑php,jqgrid编辑
写道
cell editing: 编辑一个Grid的cell
inline editing: 编辑同一row的几个cell
form editing: 创建一个form表单在外部更新grid内容
在jqGrid中主要通过以下colModel参数来实现:
editable: true|false 表示该cell是否支持可编辑,默认为false。对hidden属性默认不支持编辑,当然也可以通过其他方式来实现
edittype:简单说就是当前cell在编辑状态下是按照哪种input类型,因为在编辑下会转化为,于是支持的输入类型当然包括:'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'还有custom,默认为text
editoptions:一个数组用来设置edittype属性,通过该属性来限定input中各属性的值,比如:
Js代码
edittype="text", editoptions: {size:10, maxlength: 15}
edittype="textarea", editoptions: {rows:"2",cols:"10"}
edittype="textarea",editoptions: { value:"Yes:No"}
edittype="select",editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }//对于多选的支持:editoptions: {multiple:true, size:3... }
//当edittype为custom时需要有两个函数,一个用来创建该元素(custom_element另外一个对其赋值(custom_value),如
edittype:'custom', editoptions:{
custom_element: function(value, options){
},
custom_value:function(elem, operation, value){
}
}
editrules:用来校验用户输入值,比如我们常见的长度、必填、email、数字等校验。如editrules:{maxValue:20, required:true, number:true},提供了一系列常见的验证格式,具体见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules。这里举例来描述一个custom实例
Js代码
editrules:{custom:true, custom_func:function(value, colname){
if(value 20) {
return[false,"Please enter value between 0 and 20"];
}else{
return[true,""];
}
}}
formoptions:用于上面的form editing,用来对form表单排序或在表单前面或后面加上一个元素。如对必填在前面加上*号等。如果要使用该元素,推荐对所有editable的元素都加上该属性
1、cell editing
是对一个grid的row中一个单独的cell进行编辑,支持ajax和本地的方式修改,同时对cell的编辑支持事件主要是[Enter]已经上下左右等鼠标事件来触发,同时还有对编辑事件本身,如beforeEditCell、afterEditCell等。
在cell编辑中,主要通过jqGrid的options参数来设置:
Js代码
{
'cellEdit':true,
'cellsubmit':'remote|clientArray',
'cellurl':'/url/to/handling/the/changed/cell/value'
}
其实这个cellEdit限制挺多,如果cellEdit=true即支持celEdit时jqGrid的onSelectRow事件都不能使用。就我自己来说没有在实际业务常见中使用,这里不再多说,具体见:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
2、inlineEditing
当用户在对grid的一行做选择(如grid的onSelectRow、ondblClickRow事件触发时),当前grid进入可编辑状态。以下是一个例子,对一些常用的可编辑项做了说明
Js代码
vardatas = [
{"id":1,"name":"name1","date":"2012-08-18 11:11:11","price":123.1,"email":"abc@163.com","amount":1123423,"gender":"1","type":"0"},
{"id":2,"name":"name2","date":"2012-08-18 11:11:11","price":1452.2,"email":"abc@163.com","amount":12212321,"gender":"1","type":"1"},
{"id":3,"name":"name3","date":"2012-08-18 11:11:11","price":125454,"email":"abc@163.com","amount":2345234,"gender":"0","type":"0"},
{"id":4,"name":"name4","date":"2012-08-18 11:11:11","price":23232.4,"email":"abc@163.com","amount":2345234,"gender":"1","type":"2"},
{"id":5,"name":"name5","date":"2012-08-18 11:11:11","price":473454,"email":"abc@163.com","amount":5234534,"gender":"0","type":"0"},
{"id":6,"name":"name6","date":"2012-08-18 11:11:11","price":34563,"email":"abc@163.com","amount":2345342,"gender":"1","type":"1"}
];
Js代码
colModel:[
{name:'id', index:'id'},
{name:'name', index:'name', editable:true, edittype:"text", editrules:{required:true},editoptions:{size:16, maxlength: 15}},
{name:'date', index:'date', editable:true, edittype:"text", editrules:{date:true},editoptions:{ size: 10, maxlengh: 10,
dataInit: function(element) {
$(element).datepicker({dateFormat: 'yy-mm-dd'});
}
}},
{name:'price', index:'price', editable:true, edittype:"text", editrules:{required:true, number:true}},
{name:'email', index:'email', editable:true, edittype:"text", editrules:{required:true, email:true}},
{name:'amount', index:'amount', editable:true, edittype:"text", editrules:{required:true, number:true, maxValue:20}},
{name:'gender', index:'gender', editable:true, edittype:"checkbox", editrules:{value:"Yes:No"}},
{name:'type', index:'type', editable:true, edittype:'select', formatter:'select', editoptions:{value:"0:现货;1:可配货;2:无货"}}
],
以上是编辑的设置,主要包含了几种可编辑的方式:
1、edittype="text",并设置必填、size和maxlength的限制、email、number、maxValue等校验,在编辑时将对数据的有效性进行校验
2、edittype="text",对datepicker控件的支持,需要引入jquery-ui和国际化jquery.ui.datepicker-zh-CN.js的支持
3、edittype="checkbox",对cell中的值进行checkbox转换,并设置默认值的设置
4、edittype="select",配合formatter的使用,设置了可选择的下拉列表editoptions:{value:"0:现货;1:可配货;2:无货"}}
下面在对gridRow的双击事件触发编辑:
Js代码
ondblClickRow:function(id){
if(id && id !== lastsel){
varrowData = $("#jqGridId").jqGrid("getRowData", id);
$('#jqGridId').jqGrid('restoreRow',lastsel);
$('#jqGridId').jqGrid('editRow',id,{
keys : true,//这里按[enter]保存
url: s2web.appURL + "jq/save.action",
mtype : "POST",
restoreAfterError: true,
extraparam: {
"ware.id": rowData.id,
"ware.warename": $("#"+id+"_name").val(),
"ware.createDate": $("#"+id+"_date").val(),
"ware.number": $("#"+id+"_amount").val(),
"ware.valid": $("#"+id+"_type").val()
},
oneditfunc: function(rowid){
console.log(rowid);
},
succesfunc: function(response){
alert("save success");
returntrue;
},
errorfunc: function(rowid, res){
console.log(rowid);
console.log(res);
}
});
}
}
以上是在双击grid的row时触发当前row为可编辑状态,在回车时调用editRow对当前编辑数据进行保存。展现的效果如下:
这里用了innerEdit的editRow方法:
Js代码
jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
或者:
Js代码
jQuery("#grid_id").jqGrid('editRow',rowid, {
"keys":false,
"oneditfunc":null,
"successfunc":null,
"url":null,
"extraparam": {},
"aftersavefunc":null,
"errorfunc":null,
"afterrestorefunc":null,
"restoreAfterError":true,
"mtype":"POST"
});
这里对以上各个参数的意思做一个简单的描述
rowid:当前编辑的rowid
succesfunc:如果定义了改函数,将会在请求成功调用后立即返回,该函数签名包括server返回的数据。同时该函数需要返回tue/false
url: 如果定义了改值,将会覆盖jqGrid中的editurl(当然,如果没有url和editurl是会报错的)。如果url="clientArray" 那么就不会向server端触发请求,可在后期手动调用修改
extraparam:请求参数列表{name:value, name:value},将会append到requestData中向server端发送
aftersavefunc:如果定义了改函数,将会在数据向server端保存后立即调用,该函数接受rowid、response参数。同样如果是上面的url="clientArray"该函数同样执行
errorfunc:如果定义了改函数,将会在数据向server端保存后调用,该函数接受rowid、response参数
afterrestorefunc:如果定义了改函数,将在restoreRow后调用,接受rowid作为参数
写道
editRow //在用户出发edit事件时调用该方法
saveRow //用户不需要调用该方法,在edit时会自动调用
restoreRow //回滚当前editRow
addRow //新增row
inlineNav
下面这个例子是对jqGrid新增一行并可编辑状态:
Js代码
$("#addBtn").bind("click",function() {
$("#jqGridId").jqGrid('addRow',{
rowID : "new_row",
initdata : {},
position :"first",
useDefValues : true,
useFormatter : true,
addRowParams : {extraparam:{
}}
});
//当前新增id进入可编辑状态
$('#jqGridId').jqGrid('editRow','new_row',{
keys : true,//这里按[enter]保存
url: s2web.appURL + "jq/save.action",
mtype : "POST",
restoreAfterError: true,
extraparam: {
},
oneditfunc: function(rowid){
console.log(rowid);
},
succesfunc: function(response){
alert("save success");
returntrue;
},
errorfunc: function(rowid, res){
console.log(rowid);
console.log(res);
}
});
});
3、FormEditing支持弹出窗的形式对grid的数据查看、新增、编辑、删除和查找,主要包含以下几个方法:
查找:searchGrid
编辑:editGridRow:
调用方式如下:
Js代码
$("#grid_id").jqGrid('editGridRow', rowid, {properties} );
新增:editGridRow
Js代码
$("#grid_id")..jqGrid('editGridRow',"new", properties );
查看:viewGridRow
删除: delGridRow
4、主要API
jqgrid编辑php,jqgrid编辑相关推荐
- mapgis编辑属性结构编辑不了_MapGIS67操作手册(3-17)MapGIS67编辑线属性结构的方法...
下面我们给每条河流,添加对应的名称属性,如黄河.长江等. 1. 单击"线编辑"菜单下"参数编辑"下的"修改线属性"命令,如下图所示: 2. ...
- android照片编辑软件,照片编辑免费软件下载-照片编辑软件app下载 v7.45最新版_5577安卓网...
照片编辑免费软件app下载,提供给你全新的图片处理工具,这是软件包含了丰富的功能内容,软件一键即可轻松对各种照片組合.编辑和拼貼,那么有需要图片处理的用户下载该app使用吧! [软件特色] [ 拼图编 ...
- EditText设置可以编辑和不可编辑状态
1.首先想到在xml中设置android:editable="false",但是如果想在代码中动态设置可编辑状态,没有找到对应的函数 2.然后尝试使用editText.setFoc ...
- 关于ArcObjects图层编辑的读写编辑锁
本文转载自:https://www.douban.com/note/575390647/ 1.生成FeatureClass时会生成.sr.lock,通过以下方式解除写锁. IWorkspace ...
- 腾讯文档服务器异常 编辑内容暂无法保存,腾讯文档怎么编辑不了 编辑不了解决方法...
核心提示:腾讯文档设置权限的入口在哪里?1,当我们登陆腾讯文档后,在主页位置点击任意一篇文档2,此时注意页面的右上角位置,可以看到三个主要菜单"分享"."权限" ...
- 腾讯文档服务器异常怎么回事,腾讯文档怎么编辑不了 编辑不了解决方法
腾讯文档设置权限的入口在哪里? 1,当我们登陆腾讯文档后,在主页位置点击任意一篇文档 2,此时注意页面的右上角位置,可以看到三个主要菜单"分享"."权限"和&q ...
- PDF如何编辑,怎么编辑PDF文件中的文字
越来越多的小伙伴会私信小编询问小编关于PDF文件的修改技巧,在使用PDF文件的时候,往往是需要用到PDF编辑器的,编辑文件时,想要修改文件的内容,应该怎么去编辑呢,其实,还是很简单的,不会的小伙伴可以 ...
- 3dsmax 里”编辑网格“与”编辑多边形“的区别
编辑网格(edit mesh):mesh本来是max最基本的多边形加工方法,但在max4之后被更好的一种算法代替了,这个算法就是"编辑多边形edit poly"取代,之后edit ...
- 【Metashape精品教程10】DOM编辑 镶嵌线编辑
[Metashape精品教程10]DOM编辑 镶嵌线编辑 文章目录 [Metashape精品教程10]DOM编辑 镶嵌线编辑 前言 一.打开Ortho窗口 二.生成镶嵌线 三.镶嵌线编辑 四.更新DO ...
- UEditor使用 设置不可编辑 设置可以编辑 (从不可编辑转换为可以编辑)
直接用用官方方法,UE.getEditor('editor').setDisabled('fullscreen'); 可以成功设置不可编辑: 但是,直接使用UE.getEditor('editor') ...
最新文章
- 《Photoshop Lab修色圣典(修订版)》—第1课1.7节言归正传
- 保定linux第一版PPT-SVN for Linux
- 2010.07.13_19:30
- Zend AMF 相关文章
- Xshell配色为ubuntu风格
- 区块链:一场始料未及的革命
- /usr/bin/sed: No such file or directory
- [MTEX]EBSD_数据处理
- matlab不能radon变换,Radon变换的理解
- WinKawaks详尽使用说明
- axis2 webservice客户端最少jar
- 怎么电脑计算机管理员去掉,电脑每次运行程序都要管理员身份怎么办?
- DHCPV4 VS DHCPV6
- 7-3 学习打卡(12.26)
- python自动战斗文字小游戏
- 【技术认证题库】SCCA理论HCI-2考试【初级】
- 联想,想说爱你不容易
- 巧用利器cmder替代Win的cmd!实现高效便捷命令输入
- visual studio 添加库文件
- 前端通过代码实现F11全屏效果