jqgrid recreateform 宽度设置，仅适用于编辑，不适用于添加 [英] jqgrid recreateform width setting, only working for edit, not for add

问题描述

看过 jqgrid wiki 但找不到我需要的东西.

Have looked on the jqgrid wiki but cant find what i need.

我已将 recreateform 设置为 true 并设置宽度，可以正常编辑，但是当我尝试添加新记录时，表单不是我在重新创建表单参数中指定的宽度，它们是单独的设置吗?添加表格?

i have recreateform set to true and setting the width, works fine for edit, but when i try to add a new record the form is not at the width i specify in the recreate form parameters, is their a separate setting for the add form?

这是我的代码:

myGrid = jQuery("#rowed2").jqGrid({ 
    url:'data/stokistdata_s_json.php?q=3', 
    datatype: "json",
    mtype: "POST", 
    rowNum:10, 
    rowList:[50,100,150,200,300,400,500,600], 
    pager: '#prowed2', 
    sortname: 'id_mdt', 
    viewrecords: true, 
    gridview:true,
    sortorder: "asc", 
    rowNum:50, 
    scroll: true, 
    editurl: "data/server.php", 
    caption:"Stockist's and Orchid days",
    colNames:[
        'Actions',
        'id',
        'Type', 
        'Name', 
        'Geo Address',
        'Display Address',
        'Telephone',
        'Email', 
        'website', 
        'lat', 
        'lng', 
        'flag', 
        'description', 
        'active'
    ], 
    colModel:[{
        name:'Actions',
        index:'Actions',
        width:100,
        sortable:false,
        search:false
    }, {
        name:'id_mdt',
        index:'id_mdt',
        width:15,
        align:"left",
        sortable:true,
        search:false,
        editable:true,
        hidden: true,
        editrules: { edithidden: false }

        //editoptions:{size:"20"}

    }, {
        name:'id_etp',
        index:'id_etp', 
        width:90, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        formatter:'select',
        editoptions:{value:":All;1:Stockist;2:Orchid Day"},
        search:true,
        stype:'select',
        sopt: ['eq'],
        searchoptions:{value:":All;1:Stockist;2:Orchid Day"}
    }, {
        name:'Name_mdt',
        index:'Name_mdt',
        align:"left", 
        width:150,
        editable:true,
        search:true,
        stype:'text',
        sopt:['cn']
    }, {
        name:'geoaddr_mdt',
        index:'geoaddr_mdt',
        width:150, 
        align:"left",
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'displayaddr_mdt',
        index:'displayaddr_mdt', 
        width:150, 
        align:"left",
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'telephone_mdt',
        index:'telephone_mdt', 
        width:80,
        align:"left",
        editable:true,
        search:false
    }, {
        name:'email_mdt',
        index:'email_mdt', 
        width:80, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'website_mdt',
        index:'website_mdt', 
        width:80, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'lat_mdt',
        index:'lat_mdt', 
        width:40, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    } , {
        name:'lng_mdt',
        index:'lng_mdt', 
        width:40, 
        align:"left",
        sortable:false,
        editable:true,
        search:false
    }, {
        name:'flag_mdt',
        index:'flag_mdt', 
        width:20, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        editoptions: {value:{'1':'Flagged','0':'No Flag'}},
        search:true,//
        stype:'select',
        searchoptions:{value:{'':'All','1':'Flagged','0':'No Flag'}}//{value:":Both;1:Flagged;0:No Flag"}
    }, {
        name:'description_mdt',
        index:'description_mdt', 
        width:150, 
        align:"left",
        sortable:false,
        editable:true,
        search:false,
        edittype:"textarea", 
        editoptions:{rows:"3",cols:"30"}
    }, {
        name:'active_mdt',
        index:'active_mdt', 
        width:20, 
        align:"left",
        sortable:true,
        editable:true,
        edittype:"select",
        editoptions: {value:{'1':'Active','0':'Hidden'}},
        search:true,//
        stype:'select',
        searchoptions:{value:{'':'All','1':'Active','0':'Hidden'}} //{value:":Both;1:Active;0:Hidden"}
    }], search : {
         caption: "Search...",
         Find: "Find",
         Reset: "Reset",
         matchText: " match",
         rulesText: " rules"
   },

    gridComplete: function(){ 
        var ids = jQuery("#rowed2").jqGrid('getDataIDs'); 
        for(var i=0;i < ids.length;i++){ 
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' alt='Edit Location' onclick="jQuery('#rowed2').editGridRow('"+cl+"');" />"; 
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick="jQuery('#rowed2').saveRow('"+cl+"');" />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick="jQuery('#rowed2').restoreRow('"+cl+"');" />";
            fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
            gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
            jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
        } 
    }
}); 

jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
    {edit:true,add:true,del:true,search:true,refresh:true},
    {closeOnEscape:true, recreateForm: true, width:600}
); 
myGrid.jqGrid('filterToolbar',{defaultSearch:'cn',stringResult:true})

推荐答案

你误解了recreateForm的意思.我试图解释为什么需要它.

You misunderstand the meaning of recreateForm. I try to explain why it is needed.

navGrid 方法最多有 7 个参数.您仅使用 prmEdit 但未设置 prmAdd 参数.那是你的主要问题.添加"和编辑"对话框的默认实现是，一个创建的对话框将不关闭，而只会隐藏.此外，一个对话框将被共享 (!!!) 作为添加"和编辑"对话框.如果使用 recreateForm，则先前创建的(现在隐藏的)对话框将被销毁并创建新的对话框.

The method navGrid has up to 7 parameters. You use only prmEdit but not set the prmAdd parameter. That is your main problem. The default implementation of "Add" and "Edit" dialog is so that one created dialog will be not closed, and only hide instead. Moreover, one dialog will be shared (!!!) as "Add" and "Edit" dialog. If recreateForm is used that the previously created (and now hidden) dialog will be destroyed and the the new one will be created.

在您的情况下，您仅将编辑"对话框参数定义为 {closeOnEscape:true, recreateForm: true, width:600}.因此，如果用户在编辑"对话框之后打开添加"对话框，之前隐藏的编辑"对话框将用作添加"对话框.对话框的标题当然会改变.

In your case you defined only "Edit" dialog parameters as {closeOnEscape:true, recreateForm: true, width:600}. So if the user opens the "Add" dialog after the "Edit" dialog the previously hidden "Edit" dialog will be used as "Add" dialog. The title of the dialog will be changed of course.

所以你可以例如使用

jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
    {edit:true,add:true,del:true,search:true,refresh:true},// navGrid options
    {closeOnEscape:true, recreateForm: true, width:600},   // Edit options
    {closeOnEscape:true, recreateForm: true, width:500}    // Add options
);

或重新定义编辑和添加对话框通用的网格默认值.例如

or redefine the grid defaults which are common for both Edit and Add dialog. For example

jQuery.extend(jQuery.jgrid.edit, {
    closeAfterAdd: true,
    closeAfterEdit: true,
    jqModal: false,
    recreateForm: true,
    savekey: [true,13]
});

这篇关于jqgrid recreateform 宽度设置，仅适用于编辑，不适用于添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！