jqGrid行编辑DEMO

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