JQGRID CELLEDIT vi编辑器的三种模式模式下怎样取行数据

使用jqGrid修改数据并检查(转) -
- ITeye博客
博客分类:
jqGrid可以有三种方式,让我们来修改显示在jqGrid中的数据。这三种方式分别是:
Cell Editing——只允许修改某一个单元格内容
Inline Editing——允许在jqGrid中直接修改某一行的数据
Form Editing——弹出一个新的编辑窗口进行编辑和新增
暂时先不管这三种方式,我们来看看如何让一个jqGrid的数据能够进行编辑呢?
其实很简单,就是在jqGrid的colModel属性中,设置几个属性:
editable
&&& 可选值是true或者false,默认是false。用来说明这个列的数据是否可编辑。特别要注意的是,jqGrid的隐藏字段就算设置了这个属性为true,一样不能被编辑。在Cell Editing以及Inline Editing模式下,只能通过把这些字段设置为可见来修改。在Form Editing模式下,可以通过editoptions参数来设置是否可以修改隐藏列。
edittype
&&& 可选的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默认值是text。
&&& 根据名字就可以看出来,这个属性是设置编辑框的HTML样式的。比如,设置为text值,并且可以在editoptions中设置size以及maxlength等属性。这样生成的HTML样式有点类似&input type="text" size="10" maxlength="15"/&这样。
&&& 其中有几个要注意:
&&& 设置checkbox的时候,需要在editoptions中指定value值,第一个值应该是checked的时候的值。比如editoptions:{value:"Yes:No"}会设定这个checkbox编辑框,选中的时候,值是Yes,没选中的时候值是No。建议最好都设定一下这个值。
&&& 设置select的时候,editoptions中需要设定select下拉框的值。
&&&&&&& 一种方式是用字符串设置editoptions的value属性,像这样editoption: { value: “FE:FedEx; IN:InT TN:TNT” },这就为下拉框设置了三个可选值。注意,冒号前面的代表的是值,冒号后面代表的是显示值。
&&&&&&& 第二种方式是用对象来设置editoptions的value属性,这个时候,value值要用{}包括起来,像这样: editoptions:{value:{1:'One',2:'Two'}}。
&&&&&&& 第三种方式,是为editoptions设置dataUrl参数。意思就是select的值,是通过一个URL来获取的,比如一个Ajax请求的返回值。特别需要注意的是,在这种情况下,URL的返回值必须是包括select以及option这些HTML标签的。就像这样:&select&&option value="1"&One&/option&&option value="2"&Two&/option&&/select&.这种情况下,还可以在editoptions中设置是否允许多选,size等等。
&&& 设置image的时候,editoptions的src属性用来指定图片的地址。
&&& custom类型就是通过一个函数来指定需要编辑的元素,并返回需要提交的值。
&&&&&&& 函数的定义在editoptions中说明,分别是custom_element用来指定哪一个函数用来创建编辑框,注意这里函数必须返回一个新的DOM元素,函数的参数一个是值Value,另外一个是colModel的editoptions值。
&&&&&&& 另外一个是custom_value,这个函数用来在编辑完成之后返回本编辑框的值,这个函数的参数是元素对象。大概的调用格式如下:
&&&&&&& &script&
&&&&&&&&&&& //创建一个input输入框
&&&&&&&&&&& function myelem (value, options) {
&&&&&&&&&&&&& var el = document.createElement("input");
&&&&&&&&&&&&& el.type="text";
&&&&&&&&&&&&& el.value =
&&&&&&&&&&&&&
&&&&&&&&&&& }
&&&&&&&&&&&&
&&&&&&&&&&& //获取值
&&&&&&&&&&& function myvalue(elem) {
&&&&&&&&&&&&& return $(elem).val();
&&&&&&&&&&& }
&&&&&&&&&&& jQuery("#grid_id").jqGrid({
&&&&&&&&&&& ...
&&&&&&&&&&&&&& colModel: [
&&&&&&&&&&&&&&&&& ...
&&&&&&&&&&&&&&&&& {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
&&&&&&&&&&&&&&&&& ...
&&&&&&&&&&&&&& ]
&&&&&&&&&&& ...
&&&&&&&&&&& });
&&&&&&& &/script&
editoptions
&&& 除了上面介绍的editoptions选项外,我们还可以设置defaultValue等等,更复杂的东西,比如dataEvents就不介绍了。
editrules
&&& editrules是用来设置一些可用于可编辑列的colModel的额外属性的。大多数的时候是用来在提交到服务器之前验证用户的输入合法性的。比如editrules:{edithidden:true, required:true....}。
&&& 可选的属性包括:
&&& edithidden:只在Form Editing模式下有效,设置为true,就可以让隐藏字段也可以修改。
&&& required:设置编辑的时候是否可以为空(是否是必须的)。
&&& number:设置为true,如果输入值不是数字或者为空,则会报错。
&&& integer:
&&& minValue:
&&& maxValue:
&&& email:
&&& url:检查是不是合法的URL地址。
&&& date:
&&& time:
&&& custom:设置为true,则会通过一个自定义的js函数来验证。函数定义在custom_func中。
&&& custom_func:传递给函数的值一个是需要验证value,另一个是定义在colModel中的name属性值。函数必须返回一个数组,一个是验证的结果,true或者false,另外一个是验证错误时候的提示字符串。形如[false,”Please enter valid value”]这样。
&&& 自定义验证的例子:
&&& &script&
&&&&&&& function mypricecheck(value, colname) {
&&&&&&& if (value & 0 && value &20)
&&&&&&&&&& return [false,"Please enter value between 0 and 20"];
&&&&&&& else
&&&&&&&&&& return [true,""];
&&&&&&& }
&&&&&&& jQuery("#grid_id").jqGrid({
&&&&&&& ...
&&&&&&&&&& colModel: [
&&&&&&&&&&&&& ...
&&&&&&&&&&&&& {name:'price', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true },
&&&&&&&&&&&&& ...
&&&&&&&&&& ]
&&&&&&& ...
&&&&&&& });
&&& &/script&&&& & function mypricecheck(value, colname) { if (value & 0 && value &20) return [false,"Please enter value between 0 and 20"]; else return [true,""]; } jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true }, ... ] ... }); // &
formoptions(只在Form Editing方式下有效),他的主要作用是用来重新排序Form中的编辑元素,同时可以在编辑元素前或者编辑元素后增加一些信息(比如,一些提示信息,或者一个红色的*表示必须要填写等等)。
&&& 可选的属性如下:
&&& elmprefix:字符串值,如果设置了,则会在编辑框之后出现一些内容(可能是HTML的内容)
&&& elmsuffix:字符串值,如果设置了,则会在编辑框之前出现一些内容(可能是HTML的内容)
&&& label:字符串值,如果设置了,则这个值会替换掉colNames中的值出现作为该编辑框的标签显示
&&& rowpos:数字值,决定元素行在Form中的位置(相对于文本标签again with the text-label)
&&& colpos:数字值,决定元素列在Form中的位置(相对于标签again with the label)
&&& 两个编辑框可以有相同的rowpos值,但是colpos值不同,这会把这两个编辑框放到Form的同一行中。
&&& 特别注意:如果设置了rowpos以及colpos的值,强烈推荐为所有的其他编辑元素都设置这些值。
浏览: 272109 次
来自: 北京
你好 请问一下 jQuery Chosen
表单页有两个动态 ...
感谢分享,看了你的文章,问题解决了
设置了自增长还报错
想问下,怎么接收servlet的response给返回来的值呢 ...jqGrid单元格/行编辑模式下getRowData如何获取数据行 -
- ITeye博客
博客分类:
getRowData实现方法遍历tr获取tdinnerhTML getRowData单元格和行编辑模式下受影响表单编辑模式没问题因表单没有直接修改jqGrid生成输入对象而新控件生成编辑对象 要想单元格和行编辑模式下getRowData返回实际数据行而包含html代码内容参考下面
对于单元格编辑需要先还原或者保存此单元格再调用getRowData方法实现下
1、给grid添加beforeEditCell事件声明2window域变量记录单元格行号和列号 beforeEditCell:function(rowid,cellname,v,iRow,iCol){ lastrow = iR lastcell = iC }
2、调用getRowData获取数据前先保存/还原单元格 $("#grid").jqGrid("saveCell",lastrow,lastcell);//保存单元格切换文本模式 //或者===& //$("#grid").jqGrid("restoreCell",lastrow,lastcell);//还原单元格切换文本模式 var recs=$("#grid").jqGrid("getRowData"); 对于行编辑模式原理样还原正编辑行或者保存数据内存 1调用editRow时传递oneditfunc事件处理函数保存正编辑行id $('#list4').jqGrid('editRow', rowid, true, function (rowid) { window.rowid= }); 2调用getRowData获取数据前先保存/还原正编辑数据行 jQuery("#grid_id").saveRow(rowid, false, 'clientArray'); //==&或者还原 //jQuery("#grid_id").restoreRow(rowid); var recs=$("#grid").jqGrid("getRowData");
JenniferAmanda
浏览: 73431 次
来自: 西安
你好问一下double[][] 是什么类型的数据
能举例说明 ...其他回答(1)
博主解决了告诉我一声。。
&&&您需要以后才能回答,未注册用户请先。

我要回帖

更多关于 vi编辑器的三种模式 的文章

 

随机推荐