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行内编辑,保存

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

jqgrid 行内编辑操作

最近一直在用jqgrid这个超好用的插件在做系统。现在是开始阶段,hui

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

jqgrid快速入门之一:可编辑的单元格

在顶级属性里设置: cellEdit:true,//是否开启单元格的编辑功能 cellsubmit:'remote',//or 'clientArray',remote代表每次编辑提交后进行服务...

jqgrid实现行编辑功能

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

jqGrid行编辑配置

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

jqgrid行编辑

ondblClickRow: function(id){ if(id && id !== lastsel){ var rowData = $("#jqGridId").jqGrid("getRo...

Swagger与SpringMvc集成生成Restful形式接口文档

swagger提供的接口文档相比传统的文档方式更加直观也更加高效,但是在网上找了很多关于Swagger与SpringMvc整合的资料,发现都比较繁琐,不是很满意,于是有了这篇博客,希望对大家有所帮助。

jqgrid编辑

在jqGrid的官方文档http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules中,对jqGrid的编辑总结了以下三种类型的编辑:...

app后端开发一:swagger-ui教程-构建api接口文档工具

声明之前写过关于app后端开发的一系列文章,那是我第一次做app后端开发,存在很多不足,本想好好修改一下,想想还是重新写吧,这样子也能让我博客文章看起来多一点嘛,万一以后找工作,别人一看我博客这么多内...

如何让一个jqGrid的数据能够进行编辑

editable     可选值是true或者false,默认是false。用来说明这个列的数据是否可编辑。特别要注意的是,jqGrid的隐藏字段就算设置了这个属性为true,一样不能被编辑。在Ce...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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