`
小杨学JAVA
  • 浏览: 900321 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid的编辑——基础知识

 
阅读更多


jqGrid的编辑——基础知识

使用jqGrid修改数据

jqGrid可以有三种方式,让我们来修改显示在jqGrid中的数据。这三种方式分别是:
Cell Editing——只允许修改某一个单元格内容.(所有图片均来自jqGrid的wiki或者jqGrid的Demo截图)


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:InTime; 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 = value;
              return el;
            }
             
            //获取值
            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的值,强烈推荐为所有的其他编辑元素都设置这些值。


转载自:http://my.oschina.net/yonge/blog/1920

分享到:
评论

相关推荐

    Jquery Jgrid使用手册

    JqGrid是一款基于jQuery的表格插件,用于创建功能丰富的数据网格,提供了数据的展示、编辑、排序、分页和搜索等功能。在本文档中,我们将深入探讨JqGrid的各种配置选项、API、事件和方法,以帮助开发者充分利用这个...

    jqGrid表格应用——新增与删除数据

    在"jqGrid表格应用——新增与删除数据"这个主题中,我们可以探讨以下知识点: 1. **jqGrid的基本结构**:jqGrid的HTML结构通常包括一个`&lt;table&gt;`元素,以及必要的CSS和JavaScript引用。例如,`index.html`可能包含`...

    jqgrid 编辑表格 一列

    一、jqGrid 基础 在开始编辑表格之前,我们需要了解 jqGrid 的基本结构和配置。首先,引入 jqGrid 的必需库,包括 jQuery、jQuery UI CSS 文件、jqGrid JS 文件和相应的主题 CSS 文件。例如: ```html ...

    jqgrid行编辑+动态为其他列赋值

    jqGrid提供了丰富的功能,包括排序、筛选、分页以及行编辑等。在本例中,我们将深入探讨如何实现"jqgrid行编辑+动态为其他列赋值"这一功能。 首先,我们需要理解jqGrid的行编辑功能。jqGrid允许用户在表格的每一行...

    jquery.jqgrid最新版

    《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...

    jqGrid表格数据展示插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于网页数据的展示、编辑和管理。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得网页上的表格操作变得更加便捷和高效。在...

    jqGrid的表格数据呈编辑转态

    ### jqGrid表格数据呈编辑状态知识点详解 #### 一、jqGrid简介 jqGrid是一款功能强大的jQuery插件,用于在网页上实现数据网格展示。它不仅支持数据展示,还提供了丰富的交互功能,如排序、搜索、分页等,并且允许...

    jqGrid中文文档.doc

    在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的 DOM 操作、事件处理和动画效果,是开发网页交互功能的基础工具。对于 jQuery 的...

    jqGrid4.6完整包

    2. **可编辑表格**:jqGrid 支持表格数据的编辑功能,用户可以直接在表格内修改单元格数据,提供单行编辑、多行编辑和弹出式编辑等多种模式,满足不同场景的需求。 3. **文件结构**: - `src`:源码目录,通常包含...

    jqGrid 中文大全(1)

    “jqGrid基础学习:1认识jqGrid”介绍了jqGrid的基本概念和结构,包括如何创建基本的表格,理解其工作原理,为后续的开发打下基础。 4. **jqGrid的ColModel API**: “jqGrid基础学习:4jqGrid的ColModel API”...

    JqGrid插件+JqGridDemo+JqGrid主题

    4. 编辑功能:JqGrid支持行内编辑、弹出式编辑和表单编辑等多种模式,方便用户对表格数据进行修改和保存。 5. 表格样式:JqGrid提供了多种内置主题,可以快速改变表格的外观,以适应不同设计风格的需求。此外,还...

    jqGrid中文教程

    安装 jQGrid 需要下载对应的组件,选择需要的组件下载生成器,将组件合并为一个 JavaScript 文件——jquery.jqGrid.min.js。下载后的压缩文件包括多个文件,包括 CSS 文件、JavaScript 文件和语言文件。 jqGrid ...

    jqgrid中文文档API

    本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、ColModel API等方面的知识点。 原理 jQgrid是典型的B/S架构,服务器端只是提供数据管理,客户端只是提供数据显示。...

    JqGrid中文API文档

    JqGrid提供行内编辑、弹出编辑和添加数据的功能。通过`editGridRow`、`addGridRow`方法启动编辑或添加操作。同时,`editParams`和`addParams`可以配置编辑和添加的参数,如确认对话框、提交处理函数等。 八、事件...

    jqgrid4.6.rar

    1. **jQuery 基础**:jqGrid 是基于 jQuery 库构建的,因此理解和使用 jqGrid 需要先掌握 jQuery 的基础知识,如选择器、事件处理、DOM 操作等。 2. **jqGrid 安装与引入**:要使用 jqGrid,首先要在项目中引入 ...

    jqGrid_JS_5.2.1

    5. **编辑模式**:jqGrid支持三种编辑模式——form编辑、行编辑和单元格编辑。form编辑允许用户在一个弹出窗口中对整行数据进行编辑;行编辑则允许用户在当前选中的行内直接编辑;单元格编辑则让用户可以针对单个...

    jqgrid 表格的增删改查以及modal弹出框

    总的来说,jqGrid 提供了一个全面的解决方案来管理表格数据,包括基础操作和高级功能。通过结合 modal 弹出框,它为用户提供了更友好的交互体验。理解并熟练掌握 jqGrid 的使用,对任何需要处理大量数据的 Web 应用...

    jqGrid5.5 版本

    以下是关于jqGrid5.5版本的一些核心知识点: 1. 数据源支持:jqGrid5.5能够处理多种数据源,包括本地数组、JSON、XML、CSV以及AJAX请求。这使得它可以与各种后端数据存储无缝集成,如数据库或RESTful服务。 2. ...

    jQgrid demo

    5. **编辑功能**:对于需要在线编辑的数据,jQGrid 支持行内编辑、弹出式编辑和批量编辑模式,用户可以直接在表格中修改数据并提交更改。 6. **行选择**:用户可以选择单行或多行数据,以便执行进一步的操作,如...

    jqgridDemo

    jqGrid是一款功能强大的JavaScript数据网格插件,常用于在网页中展示和操作大量结构化的数据。...但jqGrid作为一款经典的前端数据网格组件,其基础知识和使用经验对于前端开发人员来说依然有价值。

Global site tag (gtag.js) - Google Analytics