jqgrid - 设置edittype的custom_value:'custom'

时间:2010-08-05 15:51:57

标签: javascript jquery jqgrid

place_id的custom_value设置为我先点击的行。无论实际值如何,后续单击的行都将使用相同的值。为什么呢?

示例:

place_id foo_name bar_value
   10      blah       abc
   11      blah2      fgr

点击place_id为10的行,然后点击“修改”,出现的表单将为{_ 1}}设置place_id值。进行更改并保存,然后单击下一行。虽然所有其他值都是正确的,但表单仍将具有10的place_id。

我的代码:

列place_id如下所示:

10

{name:'place_id', index:'place_id', editable: true, edittype:'custom', editoptions: { custom_element:myelem,custom_value:myval }} 功能是:

myval

我需要的是将myval设置为正在编辑的行的正确place_id。我查看了Firebug中的function myval(elem){ return elem.val(); } 对象,我发现它总是具有第一次单击的行的值,但我不明白为什么我也不知道从哪里可以获取正确的值。任何建议都表示赞赏(我试过在jqgrid论坛上询问,但没有任何结果,所以我转向stackoverflow)。

*修改:如果我使用的是elem而不是edittype:'text',我会显示并传递正确的值,但该列可以编辑,只能显示但不可编辑。

完整代码:

edittype:'custom'

EDIT2:

getSites:

jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({
        url:'/foo/bar/results',
        datatype: 'json',
        mtype: 'POST',
        colNames:['Place ID', 'Site ID', 'Site Name', 'API ID', 'M Type'],
        colModel :[ 
            {name:'place_id', index:'place_id', key: true, sorttype:'integer',
             width:70, editable: true, edittype:'custom',
             editoptions: {custom_element:myelem,custom_value:myval }},
            {name:'site_id', index:'site_id', sorttype:'integer', width:70,
             editable: true, edittype: 'select', editrule: {required: true},
             editoptions:{value:getSites(), size:30}},
            {name:'site_name', index:'site_name', width:150, editable: false,
             editrule: {required: true}, editoptions: {size:30}},
            {name:'api_id', index:'api_id', sorttype:'integer', width:75,
             editable: true, edittype: 'text', editrules: {required: true},
             editoptions:{size:30}},
            {name:'m_type', index:'m_type', width:150, editable: true,
             edittype: 'select', editrules: {required: true},
             editoptions:{value:{'one':'one','two':'two','three':'three',
                                 'four':'four'},size:30}} 
        ],
        editurl:'/foo/bar/editinfo',    
        height: 'auto',
        width: 'auto',
        pager: '#pager',
        viewrecords: true,
        loadonce: true,
        rowNum:20,
        rowList:[20,40,60,80,100],
        caption: 'Meter Listing'
    }); 

    // Edit functionality
    $("#editfields").click(function(){
        var gr = jQuery("#list").jqGrid('getGridParam','selrow');
        if( gr != null ) { 
            jQuery('#list').setGridParam({datatype:'json'});
            jQuery("#list").jqGrid('editGridRow',gr,
                           {editCaption: 'Edit Place Details',height:550,
                            closeAfterEdit:true,width:600,reloadAfterSubmit:true});
        } else {
            alert("Please select a row");
        }
    });
});

function myelem(value,options){
    return $('<input type="text" value="'+value+'" disabled="disabled"/>');
}

function myval(elem){
    return elem.val();
}

1 个答案:

答案 0 :(得分:5)

您是否可以尝试在key: true列的定义中加入place_id。您可以从服务器发送的数据中删除id

如果没用,那么您应该发布一个完整的代码示例来重现您的问题,我会尝试找到一种解决方法。

更新:有时复杂问题有一个简单的解决方案。 editGridRow函数的另一个参数可以解决您的问题:

recreateForm: true

在不使用参数的情况下,在第一次编辑所选行时,函数myelem将仅被称为一次。然后表单将被缓存并且不会重新创建。因此,您将始终编辑同一行。在包含参数recreateForm: true后,表格将每次创建

顺便说一下,我设置了一些常规设置,我在每个jqGrids中使用jQuery.jgrid.defaultsjQuery.jgrid.editjQuery.jgrid.viewjQuery.jgrid.deljQuery.jgrid.nav。例如,我总是使用

jQuery.extend(jQuery.jgrid.edit, {
    closeAfterAdd: true,
    closeAfterEdit: true,
    recreateForm: true,
   //...
});

然后我不需要稍后设置此参数。在撰写关于自定义编辑的答案Add multiple input elements in a custom edit type field期间,我还有设置,所以我没有看到任何问题。