jqGrid内联编辑-添加键保存和取消

Posted 2023-05-08

【中文标题】jqGrid内联编辑-添加键保存和取消

【英文标题】：jqGrid inline editing - add keys to save and cancel

【发布时间】：2013-04-26 13:58:17

【问题描述】：

我在 jqGrid 中遇到了内联编辑的问题。 我想要两种编辑方式：

首先 - 通过双击行进行编辑（它有效），我只能通过“输入”和“退出”键来“保存”或“取消”。如果我想要一个活动图标“保存”和“取消”，我应该怎么做？它处于非活动状态。 其次-（更重要的是），通过选择行并单击“编辑”图标进行编辑（它也可以），我只能通过图标“保存”或“取消”。如果我想使用 'enter' 和 'escape' 键来保存和取消，我应该怎么做？

我只对内联编辑感兴趣。我读了here 关于编辑“图标”：When the button is clicked a editRow method is executed。 我有功能，但按图标“编辑”后它不会自动打开。它应该覆盖默认函数吗？

$(function()
    var rowid;
    $("#list").jqGrid('editRow',rowid, 
    
        keys : true, 
        oneditfunc: function() 
            alert ("edited"); 
        
    );
);

我的 JqGrid 代码：

$(function()
    $("#list").jqGrid(
        url:'<?php echo $this->baseUrl('/jq-grid/view'); ?>',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
        colModel :[ 
            name:'invid', index:'invid', width:55, sorttype:'int', hidden:false,
                editable:true, key: true, 
                editrules: required:false, integer:true, edithidden:true , 
            name:'invdate', index:'invdate', width:90, 
                editable:true, 
                editrules: date:true ,
            name:'amount', index:'amount', width:80, align:'right', 
                editable:true, 
                editoptions:readonly:false , 
            name:'tax', index:'tax', width:80, align:'right', 
                editable:false, 
                editrules: edithidden:true ,
            name:'total', index:'total', width:80, align:'right', 
                editable:false, 
            name:'note', index:'note', width:150, align:'right', sortable:false,
                editable:false
        ],
        rowNum:5,
        rowList:[10,15,20,30],
         rowTotal: 2000, //maksimum
         loadonce: true,

        pager: '#pager',
        viewrecords: true,
        sortname: 'invid',  
        sortorder: 'asc', //'desc'
        gridview: true,
        height: '100%',
        width: '700',

        ondblClickRow: function(id)
            //jQuery('#list').editRow(id); //, true
            jQuery('#list').jqGrid('editRow',id,true);
        ,
        editurl: '<?php echo $this->baseUrl('/jq-grid/edit'); ?>'
        //hidegrid:false,
        //hiddengrid:true,
        //caption: 'Grid'
    ); 

$(function()
    $("#list").jqGrid('filterToolbar',stringResult: true,searchOnEnter : false); 
); 
$(function()
    $("#list").jqGrid('navGrid',"#pager",edit:false,add:false,del:true); //,search:false,refresh:false
);
$(function()
    $("#list").jqGrid('inlineNav',"#pager",
        save:true,
        edit:true,
        addParams: addRowParams: 
    )
);

【参考方案1】：

下面的域代码将允许内联编辑并显示保存和取消图标

name: "action", formatter: 'actions', index:"action", align: "left",sortable: false, editable: false, formatoptions: keys: true, editbutton: true, delbutton: true, editOptions: closeOnEscape: true, closeAfterAdd: true, viewPagerButtons: false, closeAfterEdit: true, afterSubmit: function (response, postdata) var r = $.parseJSON(response.responseText); return [r.success, r.Description, null]; , deleteOptions: closeOnEscape: true, closeAfterAdd: true, viewPagerButtons: false, closeAfterDelete: true, afterSubmit: function (response, postdata) var r = $.parseJSON(response.responseText); return [r.success, r.Description, null]; ,