jqGrid行编辑DEMO

原创 2015年11月20日 16:54:08

jqGrid行编辑DEMO


需要用到的jqGrid函数:

$("#jqGrid").jqGrid("editRow", id, true);

$("#jqGrid").jqGrid('saveRow', id, saveParameters);

需要了解到的两个参数:

editable:是否启用行编辑

edittype:编辑列的类型:可选的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默认值是text。

var config = {
                title: '用户列表',
                url: '@Url.Action("GetList")',
                colNames: ['主键', '登录帐号', '姓名', '职位', '性别', '邮箱', '电话', '身份证'],
                colModel: [
                    { name: 'Id', index: 'Id', width: 60, key: true, hidden: true },
                    { name: 'Code', index: 'Code', width: 60 },
                    { name: 'Name', index: 'Name', width: 60, editable: true, edittype: 'text' },
                    { name: 'Post', index: 'Post', width: 60, editable: true, edittype: 'text' },
                    {
                        name: 'Gender',
                        index: 'Gender',
                        width: 60,
                        formatter: function(cellValue, options, rowObject) {
                            return cellValue == 0 ? "男" : "女";
                        }
                    },
                    { name: 'Email', index: 'Email', width: 60, editable: true, edittype: 'text' },
                    { name: 'Phone', index: 'Phone', width: 60, editable: true, edittype: 'text' },
                    { name: 'IdCard', index: 'IdCard', width: 60, editable: true, edittype: 'text' }
                ]
            };
            EP.InitTable(config);

编辑函数:

//行编辑
        function editLineModel() {
            var btn = $("#btnEditLine"), isEditing = btn.attr("data-editing");
            var rowData = EP.GetDataTableEditeData();
            var grid = $("#jqGridList");
            if (!rowData) {
                alert("请选择要编辑的数据");
                return;
            }
            if (isEditing && isEditing == "1") {
                var url = "/Adm/User/EditModel/" + rowData.Id;
                var saveParameters = {
                    "successfunc": function () { //success
                        //重新设置行状态
                        btn.attr("data-editing", 0);
                        btn.text("行内编辑");
                        searchData();
                    },
                    "url": url,
                    "extraparam": {},
                    "aftersavefunc": null,
                    "errorfunc": null,
                    "afterrestorefunc": null,
                    "restoreAfterError": true,
                    "mtype": "POST"
                }
                grid.jqGrid('saveRow', rowData.Id, saveParameters);
            } else {
                btn.attr("data-editing", 1);
                grid.jqGrid("editRow", rowData.Id, true);
                btn.text("保存");
            }

        }


然后转到用户管理列表,就可以看到行编辑的功能,效果图如下:



效果查看:http://www.jucheap.com/

登录账号:admin,密码:qwaszx


版权声明:本文为博主原创文章,未经博主允许不得转载。

jqGrid行编辑配置,方法,事件

行编辑可以在行修改后更新数据,如下图所示   用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示。不可编辑的列,如id,不会转为可输入单元,而是保持不变。...
  • zacry
  • zacry
  • 2015年01月07日 23:56
  • 15494

jqgrid行编辑

ondblClickRow: function(id){ if(id && id !== lastsel){ var rowData = $("#jqGridId").jqGrid("getRo...
  • zgjsczwj
  • zgjsczwj
  • 2012年09月15日 21:01
  • 24807

jqgrid实现行编辑功能

参考资料:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing http://www.trirand.com/blog/...
  • zd10101501
  • zd10101501
  • 2014年12月04日 21:15
  • 2137

jqgrid行内编辑,保存

jggrid行内编辑,保存,取消编辑
  • dreamstar613
  • dreamstar613
  • 2017年01月19日 11:27
  • 6061

jqGrid行编辑配置,方法,事件

行编辑可以在行修改后更新数据,如下图所示   用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示。不可编辑的列,如id,不会转为可输入单元,而是保持不变。可以通过...
  • ceoshun
  • ceoshun
  • 2014年04月21日 14:41
  • 9882

jqgrid编辑

在jqGrid的官方文档http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules中,对jqGrid的编辑总结了以下三种类型的编辑:...
  • mengtianyalll
  • mengtianyalll
  • 2013年10月29日 16:33
  • 22990

jqGrid行编辑配置

jqGrid行编辑配置,方法,事件   行编辑可以在行修改后更新数据,如下图所示   用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示。不可编辑的列,如i...
  • tfy1332
  • tfy1332
  • 2016年04月25日 11:28
  • 11146

jqgrid saveRow方法报错 Cannot read property 'multiple' of undefined的原因

因为我把某个字段的编辑类型改成了select ,如下:  {name : 'deductibleCode',index : 'deductibleCode',width : 150,align : ...
  • and_or_ch
  • and_or_ch
  • 2017年08月10日 17:03
  • 510

jqgrid 行内编辑操作

最近一直在用jqgrid这个超好用的插件在做系统。现在是开始阶段,hui
  • feiying008
  • feiying008
  • 2014年07月22日 10:32
  • 2916

jqgrid 编辑添加功能详细解析

ColModel 是jqGrid里最重要的一个属性,设置表格列的属性。 用法: Java代码 : 代码如下: jQuery("#gridid").jqGrid({    ...   ...
  • shan1774965666
  • shan1774965666
  • 2015年02月26日 14:22
  • 5162
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqGrid行编辑DEMO
举报原因:
原因补充:

(最多只允许输入30个字)