jqgrid - 设置edittype的custom_value:'custom'

2022-01-19 00:00:00 jquery javascript jqgrid

place_id 的 custom_value 设置为我首先单击的那一行.随后单击的行都将使用相同的值，而不管它们的实际值如何.为什么?

The custom_value of place_id is set to whichever row I click first. Subsequent clicked rows will all use that same value, regardless of their actual value. Why?

示例:

place_id foo_name bar_value
   10      blah       abc
   11      blah2      fgr

单击place_id 为10 的行并单击编辑"，出现的表单将具有10 作为place_id 值.进行更改并保存，然后单击下一行.尽管所有其他值都是正确的，但表单仍将具有 10 的 place_id.

click the row with the place_id of 10 and click "edit" and the form that appears will have 10 for the place_id value. Make a change and save it then click the next row down. The form will still have the place_id of 10 though all other values will be correct.

我的代码:

place_id 列如下所示:

The column place_id looks like this:

{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 设置为正在编辑的行的正确 place_id.我查看了 Firebug 中的 elem 对象，发现它始终具有第一次单击的那一行的值，但我不明白为什么，也看不到从哪里获取正确的值.任何建议都表示赞赏(我尝试在 jqgrid 论坛上提问，但没有任何结果，所以我转向 stackoverflow).

What I need is for the myval to be set to the correct place_id for the row being edited. I looked at the elem object in Firebug and I see that it always has the value of whichever row was first clicked but I don't understand why nor do I see where I can grab the correct value from. Any suggestions are appreciated (I tried asking on the jqgrid forums but nothing came of it so I'm turning to stackoverflow).

*Edit:如果我使用 edittype:'text' 而不是 edittype:'custom' 我会显示并传递正确的值，但是该列是可编辑的并且它应该只可见但不可编辑.

* If I use edittype:'text' rather than edittype:'custom' I get the correct values displayed and passed but then the column is editable and it should only be visible but not editable.

完整代码:

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

edit2:

获取站点:

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

推荐答案

您能否尝试在 place_id 列的定义中包含 key: true.您可以从服务器发送的数据中删除 id.

Could you try to include key: true in the definition of the place_id column. You can remove id from the data which you send from the server.

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

If it will not help, then you should post a full code example which reproduce your problem and I will try to find a workaround.

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

UPDATED: Sometime there are a simple solution for complex problems. One additional parameter of editGridRow function solve your problem:

recreateForm: true

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

Without using of the parameter the function myelem will be called only one time at the first edit of the selected row. Then the form will be cached and not recreated. So you will be edit always the same row. After including of the parameter recreateForm: true the form will be created every time.

顺便说一下，我设置了一些常规设置，我在所有 jqGrids 中使用了扩展 jQuery.jgrid.defaults、jQuery.jgrid.edit、jQuery.jgrid.view、jQuery.jgrid.del 和 jQuery.jgrid.nav.例如我总是使用

By the way I set some general settings which I use in all jqGrids per extending jQuery.jgrid.defaults, jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del and jQuery.jgrid.nav. For example I use always 

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

那我以后就不需要设置这个参数了.在编写答案期间 添加多个输入自定义编辑类型字段中的元素关于自定义编辑我也有设置，所以我没有看到任何问题.

Then I don't need set this parameters later. During writing of the answer Add multiple input elements in a custom edit type field about custom editing I has also the settings, so I didn't see any problems.

相关文章