javascript jqgrid - 设置 edittype 的 custom_value: 'custom'

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3416572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 01:06:50  来源:igfitidea点击:

jqgrid - Set the custom_value of edittype: 'custom'

javascriptjqueryjqgrid

提问by rg88

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 的 custom_value 设置为我首先单击的任何行。随后单击的行都将使用相同的值,而不管它们的实际值如何。为什么?

example:

例子:

place_id foo_name bar_value
   10      blah       abc
   11      blah2      fgr

click the row with the place_id of 10 and click "edit" and the form that appears will have 10for 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 10though all other values will be correct.

单击 place_id 为 10 的行,然后单击“编辑”,出现的表单将包含10place_id 值。进行更改并保存,然后单击下一行。10尽管所有其他值都是正确的,但表单仍将具有 place_id 。

My code:

我的代码:

The column place_id looks like this:

列 place_id 如下所示:

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

The myvalfunction is:

myval功能是:

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

What I need is for the myval to be set to the correct place_id for the row being edited. I looked at the elemobject 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).

我需要的是将 myval 设置为正在编辑的行的正确 place_id。我elem在 Firebug 中查看了该对象,发现它始终具有第一次单击的任何行的值,但我不明白为什么,也看不到我可以从哪里获取正确的值。感谢任何建议(我尝试在 jqgrid 论坛上提问,但没有任何结果,所以我转向 stackoverflow)。

*Edit: 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.

*编辑:如果我使用edittype:'text'而不是edittype:'custom'显示和传递正确的值,但是该列是可编辑的,它应该只可见但不可编辑。

Full code:

完整代码:

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:

编辑2:

getSites:

获取站点:

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

回答by Oleg

Could you try to include key: truein the definition of the place_idcolumn. You can remove idfrom the data which you send from the server.

您能否尝试将其包含key: trueplace_id列的定义中。您可以id从服务器发送的数据中删除。

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.

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

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

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

recreateForm: true

Without using of the parameter the function myelemwill 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: truethe form will be created every time.

如果不使用该参数,该函数myelem仅在第一次编辑所选行时调用一次。然后表单将被缓存而不是重新创建。因此,您将始终编辑同一行。在包含参数之后,每次recreateForm: true都会创建表单。

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.deland jQuery.jgrid.nav. For example I use always

顺便说一句我把我在每延长所有jqGrids使用一些常规设置jQuery.jgrid.defaultsjQuery.jgrid.editjQuery.jgrid.viewjQuery.jgrid.deljQuery.jgrid.nav。例如我总是使用

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 fieldabout custom editing I has also the settings, so I didn't see any problems.

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