#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
является общей, и она будет использоваться во всех формах редактирования формы (все гиалоги «Добавить» и «Редактировать»).