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

Question

我在 jqGrid 中内联编辑遇到问题。我想要两种编辑方法:

1. 首先 - 通过双击该行进行编辑(有效)，我只能通过“输入”和“退出”键“保存”或“取消”。如果我想要一个事件图标“保存”和“取消”，我应该怎么做？它处于非事件状态。
2. 其次 - (更重要)，通过选择行并单击图标“编辑”(它也有效)进行编辑，我只能通过图标“保存”或“取消”。如果我想使用“Enter”和“Escape”键保存和取消，我该怎么办？

我只对内联编辑感兴趣。我读过here关于编辑“图标”:单击按钮时，将执行 editRow 方法。我有功能，但在按“编辑”图标后它没有自动打开。它应该覆盖默认函数吗？

$(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: {}}
    })
});

Answer 1

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

{ 名称:“ Action ”，格式化程序:“ Action ”，索引:“ Action ”，对齐:“左”，可排序:假，可编辑:假，
格式选项:{
键:真，
编辑按钮:真，
德尔按钮:正确，
编辑选项:{
closeOnEscape:真，
添加后关闭:true，
viewPagerButtons:假，
编辑后关闭:true，
afterSubmit:函数(响应，postdata){
var r = $.parseJSON(response.responseText);
返回[r.成功，r.描述，空]；
}
},
删除选项:{
closeOnEscape:真，
添加后关闭:true，
viewPagerButtons:假，
删除后关闭:true，
afterSubmit:函数(响应，postdata){
var r = $.parseJSON(response.responseText);
返回[r.成功，r.描述，空]；
}
}
}
},