jqGrid - это плагин jQuery, а не виджет пользовательского интерфейса jQuery.Так что используйте не JQuery UI диалог.Вместо этого он использует $. Jgrid.createModal , $. Jgrid.viewModal и $. Jgrid.hideModal .В некоторых ситуациях используется упрощенная версия $. Jgrid.info_dialog .Многие люди (включая меня) хотят, чтобы jqGrid в одной из следующих версий использовал внутри себя больше элементов управления jQuery UI и, вероятно, будет виджетом jQuery UI, но теперь, если вы хотите создать диалог в стиле jqGrid, вы должны использовать методы, которые яперечисленные выше.
В качестве примера использования функций я предлагаю следующий пример , который создает тот же диалог, что и jqGrid с методом delGridRow .Я включил в демо кнопку навигации «Удалить», чтобы показать, что если вы сначала используете кнопку «Удалить выбранную строку», которая создает диалог, а затем используете кнопку навигации «Удалить», jqGrid не создаст никакого нового диалога.Вместо этого будет использоваться наш пользовательский диалог.
Соответствующий код ниже:
var grid = $("#list"),
gID = grid[0].id, //grid[0].p.id,
IDs = {
themodal:'delmod'+gID,
modalhead:'delhd'+gID,
modalcontent:'delcnt'+gID,
scrollelm:'DelTbl_'+gID
},
hideDialog = function() {
$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
},
rowId,
createDeleteDialog = function() {
var dlgContent =
"<div id='"+IDs.scrollelm+"' class='formdata' style='width: 100%; overflow: auto; position: relative; height: auto;'>"+
"<table class='DelTable'>"+
"<tbody>"+
"<tr id='DelError' style='display: none'>"+
"<td class='ui-state-error'></td>"+
"</tr>"+
"<tr id='DelData' style='display: none'>"+
"<td>"+rowId+"</td>"+ // it has not so much sense
"</tr>"+
"<tr>"+
"<td class='delmsg' style='white-space: pre;'>"+$.jgrid.del.msg+"</td>"+
"</tr>"+
"<tr>"+
"<td> </td>"+
"</tr>"+
"</tbody>"+
"</table>"+
"</div>"+
"<table cellspacing='0' cellpadding='0' border='0' class='EditTable' id='"+IDs.scrollelm+"_2'>"+
"<tbody>"+
"<tr>"+
"<td>"+
"<hr class='ui-widget-content' style='margin: 1px' />"+
"</td>"+
"</tr>"+
"<tr>"+
"<td class='DelButton EditButton'>"+
"<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>Delete</a>"+
" <a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>Cancel</a>"+
"</td>"+
"</tr>"+
"</tbody>"+
"</table>";
if ($('#'+IDs.themodal).length===0) {
// dialog not yet exist. we need create it.
$.jgrid.createModal(
IDs,
dlgContent,
{
gbox: "#gbox_"+gID,
caption: $.jgrid.del.caption,
jqModal: true,
left: 12,
top: 44,
overlay: 10,
width: 240,
height: 'auto',
zIndex: 950,
drag: true,
resize: true,
closeOnEscape: true,
onClose: null
},
"#gview_"+gID,
$("#gview_"+gID)[0]);
$("#dData","#"+IDs.scrollelm+"_2").click(function(){
// "Delete" button is clicked
var rowId = grid.jqGrid('getGridParam', 'selrow');
grid.jqGrid('delRowData',rowId);
//$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
hideDialog();
});
$("#eData", "#"+IDs.scrollelm+"_2").click(function(){
// "Cancel" button is clicked
//$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
hideDialog();
//return false;
});
}
$.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:true, overlay: 10, modal:false});
};
grid.jqGrid({/*jqGrid options*/});
$("#delgridrow").click(function() {
rowId = grid.jqGrid('getGridParam', 'selrow');
if (rowId === null) {
$.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+grid[0].p.id,jqm:true});
$("#jqg_alrt").focus();
} else {
createDeleteDialog();
}
return false;
});