настройка ширины воссоздаваемой формы jqgrid, работает только для редактирования, не для добавления

#jquery #forms #jqgrid

#jquery #формы #jqgrid

Вопрос:

Просмотрел jqgrid wiki, но не могу найти то, что мне нужно.

у меня для recreateform установлено значение true, и настройка ширины отлично работает для редактирования, но когда я пытаюсь добавить новую запись, форма не имеет ширины, указанной в параметрах формы воссоздания, это отдельная настройка для формы добавления?

вот мой код:

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

Ответ №1:

Вы неправильно понимаете значение recreateForm . Я пытаюсь объяснить, зачем это нужно.

Метод navGrid имеет до 7 параметров. Вы используете только prmEdit , но не устанавливаете prmAdd параметр. Это ваша главная проблема. Реализация диалогов «Добавить» и «Редактировать» по умолчанию такова, что один созданный диалог будет не закрыт, а только скрыт вместо этого. Более того, одно диалоговое окно будет общим (!!!) как диалоги «Добавить» и «Редактировать». Если recreateForm используется, ранее созданное (и теперь скрытое) диалоговое окно будет уничтожено и будет создано новое.

В вашем случае вы определили только параметры диалогового окна «Редактировать» как {closeOnEscape:true, recreateForm: true, width:600} . Таким образом, если пользователь откроет диалоговое окно «Добавить» после диалога «Редактировать», ранее скрытое диалоговое окно «Редактировать» будет использоваться как диалоговое окно «Добавить». Заголовок диалогового окна, конечно, будет изменен.

Так что вы можете, например, использовать

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

или переопределите значения сетки по умолчанию, которые являются общими как для редактирования, так и для диалогового окна добавления. Например

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

Комментарии:

1. большое спасибо, что это отлично очищает, я полагаю, добавив width: 600 в параметр extend, это сделает все формы шириной 600?

2. @Диззи Брайан Хай: Добро пожаловать! Настройка в jQuery.jgrid.edit является общей, и она будет использоваться во всех формах редактирования формы (все гиалоги «Добавить» и «Редактировать»).