jQuery技术

jqGrid的使用方法(编辑,删除,更新,新增)(3)

字号+ 作者:H5之家 来源:H5之家 2017-01-02 15:00 我要评论( )

formoptions (只在Form Editing方式下有效),他的主要作用是用来重新排序Form中的编辑元素,同时可以在编辑元素前或者编辑元素后增加一些信息(比如,一些提示信息,或者一个红色的*表示必须要填写等等)。 可选

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的值,强烈推荐为所有的其他编辑元素都设置这些值。

 

----本文只是doc文档的解释,没有太多自己的东西。接下来我会做一个Form Editing的例子,肉戏即将登场......

 

我们讲了一下jqGrid编辑的基础知识。下面我们基于Form Editing的编辑模式详细举例讲解一下。

Form Editing编辑模式主要的方法有几个,分别是editGridRow——用来修改记录,editGridRow函数,传递一个'new'的参数就表示新增记录;viewGridRow查看记录详情;delGridRow删除记录。

这几个方法的调用方式,和jqGrid的其它函数调用方式一样。(可以采用new API的调用方式,把函数名称作为第一个参数来调用)需要注意的地方是,各个函数调用内容的options参数有一些差异,具体可以参考文档;另外就是,各个函数提交到服务端的数据和格式有所差异。这里以editGridRow为例来说明一下。

editGridRow的调用方式如下:

jQuery("#grid_id").editGridRow( rowid, properties ); 或者是如下的方式 jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );

其中rowid指定是编辑那一行,properties是一个包含各种属性以及事件的数组。(具体的属性和事件,请参考文档,这里就不翻译了。)调用之后,提交到服务器上去的数据都是一些什么数据呢?

提交的数据主要包括:

1.各个编辑"字段:值"的对。这个不好理解,其实的意思就是,相当于用POST的方式提交一些数据,数据的名称就是我们定义在colModel中的name属性,值就是我们在弹出窗口录入的值。(当然,这就要求我们在Server端的Action定义这些变量并封装到Pojo对象中去进行处理。)

2.包含一个"id:rowid"的值,用来表明是哪一个id关键字的记录被修改(新增记录的时候,id=_empty);

3.包含一个"oper:edit"的值,用来指示是编辑还是新增记录(新增记录的时候,oper=add)

4.其它高级情况,比如使用了editData对象或者实现了onclickSubmit事件之后的处理。比较复杂,暂时没有详细研究这种情况下提交数据的格式。

如果是要新增记录,那么editGridRow的调用方式如下:

jQuery("#grid_id").editGridRow( "new", properties );

 

好了,接下来我们来看看我们在jsp文件中是如何实现的吧。

    $().ready(function(){
        $("#grid").jqGrid({        
            
url:'queryAllBrand.action',
            datatype: "json",
            mtype: 'POST',
            colNames:['操作','品牌ID','品牌代码', '品牌名称', '是否可用','最后修改时间'],
            colModel:[
                {name:'act',index:'act',width:110,search:false,sortable:false,editable:false},
                {name:'brandId',index:'brandId', width:90,editable:false},
                {name:'code',index:'code', width:110,
                    editable:true,
                    edittype:'text',
                    editoptions:{size:10,maxlength:15},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'brandName',index:'brandName', width:100,
                    editable:true,
                    edittype:'text',
                    editoptions:{size:10,maxlength:15},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'status',index:'status', width:80,
                    editable:true,
                    edittype:'checkbox',
                    editoptions:{value:"1:0"},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'lastModifiedDatetime',index:'lastModifiedDatetime', width:100,editable:false}
            ],
            rowNum:3

 

在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改(新增)的记录已经正确的保存到数据库中了。见下图:

\

这是为什么呢?一直为这个问题头痛苦恼了好几天。仔细阅读了jqGrid wiki上的文档,也google了许多的文章,仍然找不到相应的说明或者解决办法。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记--jqGrid的属性列表

    jQuery学习笔记--jqGrid的属性列表

    2017-01-02 14:04

  • jquery编辑器的相关文章,教程,源码

    jquery编辑器的相关文章,教程,源码

    2016-12-31 14:04

  • jQuery中文日期选择控件Datepicker的使用方法

    jQuery中文日期选择控件Datepicker的使用方法

    2016-12-30 14:00

  • 我的世界中文版下载

    我的世界中文版下载

    2016-09-15 16:02

网友点评