51dev.com IT技术开发者社区

51dev.com 技术开发者社区

jqgrid 行内编辑操作

IT技术学习阅读(303)2018-10-16 收藏0次评论

最近一直在用jqgrid这个超好用的插件在做系统。现在是开始阶段,把用到的每个功能进行记录下来。在慢慢重构,封装,使其成为最快捷,最适合自己的强大工具。

先上图,看看实现的效果。

该功能实现修改删除在行内进行操作,增加功能在下面的导航区。因为添加功能使用较少,而编辑使用较多的情况。这样处理方面操作人员进行操作。

前端代码实现如下:
 

 var lastSel;
            jQuery("#TblClassTypeId").jqGrid({
                url: "@Url.Action("LoadClassTypeDatasBy", "Attendance")",
                editurl: "@Url.Action("SaveClassTypeData", "Attendance")",
                datatype: "json",
                mtype: "get",
                scroll:1,
                colModel: [
                    {
                        label: '操作', name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions:
                            {
                                keys: true,
                                editOptions: {  //编辑操作,这个很重要,实现编辑时传送参数什么的。
                                    reloadAfterSubmit: true,
                                    editData: {
                                        editkey: function () {
                                            var sel_id = $('#TblClassTypeId').jqGrid('getGridParam', 'selrow');
                                            var value = $('#TblClassTypeId').jqGrid('getCell', sel_id, 'Id_Key');
                                            return value;
                                        }
                                    }
                                },
                                delOptions: { //删除操作,这个很重要,实现删除时传送参数什么的。  这处网上没有例子的。
                                    reloadAfterSubmit: true,
                                    delData: {
                                        delkey: function () {
                                            var sel_id = $('#TblClassTypeId').jqGrid('getGridParam', 'selrow');
                                            var value = $('#TblClassTypeId').jqGrid('getCell', sel_id, 'WorkerId');
                                            return value;
                                        }  
                                    }
                                }   
                            }
                    },
                    { label: '序号', name: 'Id_Key', index: 'Id_Key', key: true, hidden: true, width: 50 },
                    { label: '工号', name: 'WorkerId', index: 'WorkerId', width: 90, sorttype: "string",hidden:true,editable: true,editrules:{edithidden:true,required:true},searchtype: 'string' },
                    { label: '姓名', name: 'WorkerName', index: 'WorkerName', width: 90, editable: false, search: false },
                    { label: '部门', name: 'Department', index: 'Department', width: 150, editable: false, search: false },
                    { label: '班别', name: 'ClassType', index: 'ClassType', width: 100, editable: true, edittype: "select", editoptions: { value: "白班:白班;晚班:晚班" }, search: false },
                    { label: '常白班', name: 'IsAlwaysDay', index: 'IsAlwaysDay', width: 90, editable: true, edittype: "select", editoptions: { value: "否:否;是:是" }, search: false },
                    { label: '起始日期', name: 'DateFrom', index: 'DateFrom', width: 130, editable: true, editoptions: { @JquiHelper.JqgridDatePicker() }, search: false,@JquiHelper.JqgridDateColFormattor() },
                    { label: '终止日期', name: 'DateTo', index: 'DateTo', width: 130, editable: true, editoptions: {@JquiHelper.JqgridDatePicker() }, search: false,@JquiHelper.JqgridDateColFormattor() },
 
 
                ],
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        jQuery("#TblClassTypeId").restoreRow(lastSel);
                        lastSel = id;
                    }
                },
                caption: "班别设定",
                loadonce: false,     //客户端排序:把服务端的数据都加载到页面。datatype会自动设置为local,所有的操作都在客户端完成。
                rowNum: 30,        //大于等于总记录数
                rowList: [10, 20, 30],  //设置分页下拉列表
                rownumbers: true,
                gridview: true,
                pager: "#pagerOfClassTypeId",
                viewrecords: true,
                width: $(window).width()-20,
                height: $(window).height()-220,
                jsonReader: { repeatitems: false },
                sortorder: "asc", sortname: "WorkerId"
            });
 
 
            jQuery("#TblClassTypeId").jqGrid('navGrid', "#pagerOfClassTypeId", {
                edit: false, add: true, del: false, search: true,
                searchtext: "Search", addtext: "Add",
            },
            //修改
            {},
            //添加
            { reloadAfterSubmit: true, },
            //删除
            {},
            //查询
            {
                multipleSearch: true,
                closeAfterSearch: true,
                recreateForm: true,
                onSearch: function ()
                {
                    jQuery("#TblClassTypeId").jqGrid('setGridParam', { url: "@Url.Action("LoadClassTypeDatasBy", "Attendance")"});
                }
            }
            );

OK,核心代码就是上面,后台是用MVC实现的。操作很简单了。功能完成了。

以上就是jqgrid 行内编辑操作的全部内容。