加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

jqGrid的colModel属性

(2015-08-11 16:33:04)
标签：

jq

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样式有点类似这样。
    其中有几个要注意：
    设置checkbox的时候，需要在editoptions中指定value值，第一个值应该是checked的时候的值。比如editoptions:{value:"Yes:No"}会设定这个checkbox编辑框，选中的时候，值是Yes，没选中的时候值是No。建议最好都设定一下这个值。
    设置select的时候，editoptions中需要设定select下拉框的值。
        一种方式是用字符串设置editoptions的value属性，像这样editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }，这就为下拉框设置了三个可选值。注意，冒号前面的代表的是值，冒号后面代表的是显示值。
        第二种方式是用对象来设置editoptions的value属性，这个时候，value值要用{}包括起来，像这样： editoptions:{value:{1:'One',2:'Two'}}。
        第三种方式，是为editoptions设置dataUrl参数。意思就是select的值，是通过一个URL来获取的，比如一个Ajax请求的返回值。特别需要注意的是，在这种情况下，URL的返回值必须是包括select以及option这些HTML标签的。就像这样：.这种情况下，还可以在editoptions中设置是否允许多选，size等等。
    设置image的时候，editoptions的src属性用来指定图片的地址。
    custom类型就是通过一个函数来指定需要编辑的元素，并返回需要提交的值。
        函数的定义在editoptions中说明，分别是custom_element用来指定哪一个函数用来创建编辑框，注意这里函数必须返回一个新的DOM元素，函数的参数一个是值Value，另外一个是colModel的editoptions值。
        另外一个是custom_value，这个函数用来在编辑完成之后返回本编辑框的值，这个函数的参数是元素对象。大概的调用格式如下：
       

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”]这样。
    自定义验证的例子：
   

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的调用方式如下：

[Java] view plaincopy
  1. "font-family:Microsoft YaHei; font-size:13px">jQuery("#grid_id").editGridRow( rowid, properties );  
  2. 或者是如下的方式  
  3. 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的调用方式如下：

[Java] view plaincopy
  1. "font-family:Microsoft YaHei; font-size:13px">jQuery("#grid_id").editGridRow( "new", properties );  

 

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

首先说明一下，这个例子和前一篇文章中的例子有很多变化。主要包括，在jqGrid中新增了一个列，用来作为操作列，同时增加了两个操作：编辑和删除。增加了一个导出查询结果为csv的按钮（自定义按钮），但是具体的后台服务器功能没有实现；把查询和新增功能单独作为一个按钮显示在jqGrid的后面。具体的差异，大家可以看看本人另外一篇文章《jqGrid的多字段查询》中的例子。

    $().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。实际上，修改(新增)的记录已经正确的保存到数据库中了。见下图：

http://my.oschina.net/uploads/space/2009/1214/144735_l7j2_4347.bmp

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

后来研究了一下jqGrid的源代码。src/grid.formedit.js文件，发现其中有一个函数postIt，其中有如下的代码：

[JavaScript] view plaincopy
  1. "font-family:Microsoft YaHei; font-size:13px">if(Status != "success") {  
  2.     ret[0] = false;  
  3.     if ($.isFunction(rp_ge.errorTextFormat)) {  
  4.         ret[1] = rp_ge.errorTextFormat(data);  
  5.     } else {  
  6.         ret[1] = Status + " Status: '" + data.statusText + "'. Error code: " + data.status;  
  7.     }  
  8. } else {  
  9.     // data is posted successful  
  10.     // execute aftersubmit with the returned data from server  
  11.     if( $.isFunction(rp_ge.afterSubmit) ) {  
  12.         ret = rp_ge.afterSubmit(data,postdata);  
  13.     }  
  14. }  

看来问题是在这个地方。由此猜想jqGrid的增删改操作是要求服务器返回内容的。

我猜测，jqGrid要求服务器返回包含成功与否的status内容。所以我修改了一下Action的类方法的返回值：如下：

[Java] view plaincopy
  1. "font-family:Microsoft YaHei; font-size:13px">public String modifyBrand()  
  2. {  
  3.     String result = "success";  
  4.     try  
  5.     {  
  6.           
  7.         MProductBrand mpb = new MProductBrand();  
  8.         mpb.setBrandName(brandName);  
  9.         mpb.setCode(code);  
  10.         mpb.setStatus(status);  
  11.         mpb.setLastModifiedDatetime(new Timestamp(System.currentTimeMillis()));  
  12.           
  13.         if(oper != null && oper.equals("edit")){  //编辑  
  14.             mpb.setBrandId(new Integer(id));  
  15.             this.brandService.modifyBrand(mpb);  
  16.         }  
  17.         else if (oper != null && oper.equals("add")){  //新增  
  18.             MProductBrand mproductbrand1 = this.brandService.locateByBrandcode(mpb  
  19.                     .getCode().toString().trim().toUpperCase());  
  20.             MProductBrand mproductbrand2 = this.brandService.locateByBrandName(mpb  
  21.                     .getBrandName().toString().trim());  
  22.               
  23.             if (mproductbrand1.getBrandId() == null && mproductbrand2.getBrandId() == null)  //检查是否存在  
  24.             {  
  25.               
  26.                 this.brandService.addBrand(mpb);  
  27.             }  
  28.             else  
  29.             {  
  30.                 log.warn("品牌代码或品牌名称已经存在");  
  31.                 result = "error";  
  32.             }  
  33.         }  
  34.     }  
  35.     catch (Exception ex)  
  36.     {  
  37.         ex.printStackTrace();  
  38.         log.warn("修改失败");  
  39.         result = "error";  
  40.     }  
  41.       
  42.     HttpServletResponse response = ServletActionContext.getResponse();  
  43.     response.setContentType("text/json; charset=UTF-8");  
  44.     try{  
  45.         PrintWriter out = response.getWriter();  
  46.         JSONObject json = new JSONObject();  
  47.         json.put("status", result);  
  48.         out.print(json.toString());  
  49.     }  
  50.     catch(Exception e){  
  51.         e.printStackTrace();  
  52.         log.error("Error:Cannot create PrintWriter Object !");  
  53.     }  
  54.     return null;  
  55. }  

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有