`

使用jqGrid修改数据并检查(转)

阅读更多

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: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的值,强烈推荐为所有的其他编辑元素都设置这些值。
分享到:
评论
1 楼 sbliyang 2014-09-29  
                      
踩踩踩

相关推荐

    jqgrid4.6.rar

    3. **基本使用**:创建 jqGrid 需要在 HTML 中定义一个表格元素,然后使用 JavaScript 初始化并配置 jqGrid。例如,使用 `$("#grid").jqGrid(options)` 进行初始化,`options` 是一个包含各种配置项的对象。 4. **...

    jqgrid非常简单的例子,读取本地简单的XML,还有IE下的firebug调试工具

    本例子将展示如何使用jqGrid从本地XML文件中读取数据并显示在一个表格中。 首先,我们来看`index.html`或`testjq.html`这两个HTML文件,它们是网页的主体部分。通常,这两个文件会包含jqGrid所需的CSS和JS文件引用...

    jqGrid与Struts2的结合应用_操作Grid数据

    然后,Struts2 需要定义一个 Action 来处理来自 jqGrid 的请求,比如获取数据、添加、修改或删除记录。 1. **getGridParam** 方法是 jqGrid 提供的一个用于获取 jqGrid 配置参数的方法。通过指定参数 name,你可以...

    jqGrid 4.2

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格化的数据。在jqGrid 4.2这个版本中,它提供了丰富的功能和优化,旨在提高用户体验和开发效率。以下是关于jqGrid 4.2及其组成部分的一些详细...

    利用jqGrid实现类似Excel录入功能

    通常,这会涉及到AJAX请求,使用`url`参数指定服务器端接口,并通过`postData`传递编辑后的数据。 jqGrid还提供了撤销和重做功能,可以通过`cellEdit`选项启用单元格级别的编辑,并结合`beforeSaveCell`和`...

    jquery.jqGrid-4.1.1.zip

    2. 使用主题:jqGrid兼容jQuery UI主题,可以方便地更改界面风格。 3. 错误处理:在使用过程中,应关注错误日志,确保数据加载、编辑等操作的正确性。 4. 记得更新:定期检查jqGrid的最新版本,获取新功能和安全修复...

    jquery与jqprint兼容插件.zip

    当你升级到jQuery 1.9或更高版本,并发现代码中有不兼容的情况时,只需在引入新的jQuery库之后,紧接着引入这个migrate插件,它会帮助你找出哪些API已经被弃用,同时临时恢复这些功能,以便有时间去修改你的代码适应...

    software download

    5. **更新与维护**:定期检查并更新软件,以获取最新的功能和安全修复。 6. **源码获取**:对于开源软件,熟悉Git等版本控制系统,从源代码仓库克隆或下载源码。 7. **开发工具**:掌握各种开发工具的使用,如Visual...

    jQuery动态创建表格生成器代码.zip

    例如,当Ajax请求失败时,可以显示错误信息,或者在创建表格时检查数据格式是否正确。 以上就是使用jQuery动态创建表格的核心知识点,通过理解和掌握这些技术,开发者可以创建出功能强大、交互丰富的网页表格。这个...

    ajax实现无刷新

    - 它通过后台载入和交换数据,并使网页的部分更新而无需重新加载整个页面。 - 主要依赖于JavaScript、XMLHttpRequest对象以及HTML和CSS等技术。 **2. XMLHttpRequest 对象:** - 这个对象是实现AJAX的关键。 - ...

Global site tag (gtag.js) - Google Analytics