代码之家 › 专栏 › 技术社区 › rg88

jqgrid-设置edittype的自定义值:“custom”

jqgrid jquery javascript

rg88 · 技术社区 · 14 年前

place\u id的自定义值设置为我首先单击的行。随后单击的行都将使用相同的值,而不管它们的实际值如何。为什么?

例子:

place_id foo_name bar_value
   10      blah       abc
   11      blah2      fgr

单击place\u id为10的行,然后单击“编辑”,出现的窗体将显示 10 10 尽管所有其他值都是正确的。

我的代码:

列place\u id如下所示:

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

这个 myval 功能是:

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

我需要的是将myval设置为被编辑行的正确位置。我看了看 elem 对象,我看到它总是具有第一次单击的行的值,但我不明白为什么,也不知道从哪里可以获取正确的值。任何建议都很感谢(我试着在jqgrid论坛上询问,但是没有结果,所以我转向stackoverflow)。

*编辑:如果我使用 edittype:'text' edittype:'custom'

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

编辑2:

获取站点:

function getSites(){
    <?php
    $sites = "0:Select";
    foreach ($this->sites as $k => $v){
        $sites = $sites . ";" . $v['site_id'] . ":" . $v['site_name'];
    }
    ?>
    return "<?= $sites ?>";
}

1 回复 | 直到 14 年前

Community Navdeep Singh 7 年前

key: true 在 place_id 列。您可以删除 id 从服务器发送的数据。

如果没有帮助,那么你应该发布一个完整的代码示例来重现你的问题,我将尝试找到一个解决方法。

更新 :有时对于复杂的问题有一个简单的解决方案。一个附加参数 editGridRow 函数解决您的问题:

recreateForm: true

不使用参数函数 myelem 将被调用 . 然后窗体将被缓存并 未重新创建 . 因此,您将始终编辑同一行。包含参数后 recreateForm: true 将创建窗体 每一次 .

jQuery.jgrid.defaults , jQuery.jgrid.edit , jQuery.jgrid.view jQuery.jgrid.del 和 jQuery.jgrid.nav . 例如,我总是使用

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

那我以后就不需要设置这个参数了。在写答案的时候 Add multiple input elements in a custom edit type field