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
  • 12668

jqgrid行编辑

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

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

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

jqgrid行内编辑,保存

jggrid行内编辑,保存,取消编辑

jqgrid实现行编辑功能

参考资料:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing http://www.trirand.com/blog/...

jqgrid 编辑添加功能详细解析

ColModel 是jqGrid里最重要的一个属性,设置表格列的属性。 用法: Java代码 : 代码如下: jQuery("#gridid").jqGrid({    ...   ...

jqGrid增删改查显示——删除+nodejs后台

本篇文章只介绍jqGrid删除操作 本篇文章代码在以下一篇代码基础上修改: jqGrid显示:http://blog.csdn.net/tangjiarao/article/details/5045...

jqGrid行编辑配置

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

jqgrid动态设置某个单元格进入编辑状态

一、关键点 1、点击修改按钮时,设置列qtype的editable属性值为true,表示此字段可编辑;然后设置id对应的行进入编辑状态,此时该行中所有的可编辑列都将进入编辑状态。 $("#jq...

jqgrid编辑

在jqGrid的官方文档http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules中,对jqGrid的编辑总结了以下三种类型的编辑:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqGrid行编辑DEMO
举报原因:
原因补充:

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