Pourquoi JQuery boîte de Dialogue Modale et JQGrid boîte de Dialogue Modale sont à la recherche de différent?
J'ai créé JQGrid avec Jquery boîte de dialogue modale pour les Supprimer. Jqgrid avec la modification en ligne et un champ est requis si je laisse le champ vide et appuyez sur soumettre le message Veuillez saisir le prénom, mais le problème est Intégré message et mon jquery boîte de dialogue modale sont trop différents.
Intégré JQGrid Boîte De Dialogue Modale:
JQuery Boîte De Dialogue Modale
CODE:
function createGrid() {
jQuery("#list").jqGrid({
url: '@Url.Action("JQGridGetGridData", "TabMaster")',
datatype: 'json',
mtype: 'GET',
colNames: ['col ID', 'First Name', 'Last Name', ''],
colModel: [{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true} },
{ name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true, editrules: { required: true} },
{ name: 'act', index: 'act', width: 60, sortable: false}],
pager: jQuery('#pager'),
hidegrid: false,
rowNum: 100,
rowList: [10, 50, 100, 150],
sortname: 'colID',
sortorder: "asc",
viewrecords: true,
multiselect: false,
width: 500,
height: "250px",
imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
caption: 'Tab Master Information',
editurl: '@Url.Action("JQGridEdit", "TabMaster")',
gridComplete: function () {
var ids = jQuery("#list").getDataIDs();
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
be = "<a href='#'><div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'></div></a>";
de = "<a href='#'><div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'></div></a>";
se = "<a href='#'><div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'></div></a>";
ce = "<a href='#'><div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'></div></a>";
jQuery("#list").setRowData(ids[i], { act: be + de + se + ce })
}
}
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
}
Comment puis-je appliquer Jquery boîte de Dialogue Modale pour JQGrid intégré de la boîte de dialogue de la peau?
Grâce,
Imdadhusen
Ce qui est sur le votre question précédente? Avez-vous lu ma réponse?
J'ai trouvé votre question intéressante, si +1, de moi et de ma réponse.
J'ai vérifié $("#load_list") à l'aide de firebug mais je ne pouvais pas trouver n'importe quel élément dans mon jqgrid même il n'y a aucun élément de pager_left, pager_center et pager_right dans mon cas, donc j'ai supposé que mon jqgrid de rendu sont différents indiqué par vous.
j'ai également soumis composant logiciel enfichable de mon jqgrid pied de page et le vôtre stackoverflow.com/questions/6646347/....
Je con pas vous suivre. La position d'origine de la #load_list ne sont pas dans le pager, mais vous pouvez déplacer n'importe quel élément de la page à un autre endroit à l'égard de
J'ai trouvé votre question intéressante, si +1, de moi et de ma réponse.
J'ai vérifié $("#load_list") à l'aide de firebug mais je ne pouvais pas trouver n'importe quel élément dans mon jqgrid même il n'y a aucun élément de pager_left, pager_center et pager_right dans mon cas, donc j'ai supposé que mon jqgrid de rendu sont différents indiqué par vous.
j'ai également soumis composant logiciel enfichable de mon jqgrid pied de page et le vôtre stackoverflow.com/questions/6646347/....
Je con pas vous suivre. La position d'origine de la #load_list ne sont pas dans le pager, mais vous pouvez déplacer n'importe quel élément de la page à un autre endroit à l'égard de
jQuery.prependTo
par exemple. mon démo faire ce que vous avez besoin?
OriginalL'auteur imdadhusen | 2011-07-14
Vous devez vous connecter pour publier un commentaire.
jqGrid est le plugin jQuery et pas un de jQuery UI widget. Donc pas utiliser jQuery UI dialog. Au lieu de cela, il utilise $.jgrid.createModal, $.jgrid.viewModal et $.jgrid.hideModal méthode. Dans certaines situations version simplifiée $.jgrid.info_dialog sont utilisés. Beaucoup de gens (y compris moi) souhaitent que jqGrid dans une prochaine version n'utilisent plus jQuery UI contrôles en interne et sera probablement l'un de jQuery UI widget, mais maintenant, si vous voulez créer une boîte de dialogue dans jqGrid style vous devez utiliser les méthodes que j'ai énumérés ci-dessus.
Comme un exemple d'utilisation des fonctions de je suggère l'exemple suivant qui créent de la même boîte de dialogue que jqGrid faire avec delGridRow méthode. J'ai inclus dans la démo "Supprimer" bouton de navigation pour montrer, que, si la première utilisation "Supprimer la ligne sélectionnée" créer une boîte de dialogue puis utilisez la fonction "Supprimer" bouton de navigation pas de dialogue nouveau sera créé par jqGrid. Au lieu de cela, nos dialogue personnalisée sera utilisé.
Le code correspondant est ci-dessous:
C'est la réalité. J'ai juste réduit le code utilisé par jqGrid. Vous pouvez réduire le code HTML de la
dlgContent
si nécessaire.Par ailleurs, si vous utilisez
$.jgrid.del.caption
et$.jgrid.del.msg
pas directement et de les inclure en tant que paramètre de lacreateDeleteDialog
fonction, vous aurez un "MessageBox" fonction que vous pouvez utiliser. Vous ne devriez probablement remplacer l'appel de$.jgrid.hideModal
à l'appel de $.jgrid.closeModalOriginalL'auteur Oleg
Moi aussi, je trouve le haut-jqGrid boîte de dialogue modale difficile à mettre en œuvre. Essayez d'appeler le createModal(), avec tous ses paramètres, était trop compliqué. Les solutions de contournement que j'ai vu posté étaient aussi très complexe. J'ai décidé de faire contourner le problème en réécrivant le code HTML, puis de l'afficher.
jqGrid déjà écrit le code HTML pour leurs modal popup à charge. J'ai détourné, écrit mon propre écouteur pour le " X " en lien étroit et, voilà, j'ai eu moi-même entièrement à la peau de la boîte de dialogue. Le mien n'est pas modale, mais vous pouvez facilement créer votre propre en modifiant le CSS de la solution. Une fois que vous comprenez comment manipuler le code HTML que vous pouvez ajouter que des éléments/attributs/classes que vous voulez. Lors de la clôture que vous venez de retirer ce que vous avez ajoutés.
Tout d'abord, je test si la messagebox est déjà affiché en vérifiant si mon #clonePopup id existe déjà. J'ai alors, prenez une poignée sur le X à proximité de lien parce que je vais clone et masquer l'original. Si j'utilise la version originale, ça ne marchera pas, parce que jqGrid est à l'écoute et je n'ai pas de définir les paramètres nécessaires. J'ai créer un clone et lui attribuer un ID de 'clonePopup'. J'ai ensuite masquer l'original.
Il ne peut pas être une solution parfaite, mais peut-être pour certains. Fonctionne pour moi. Sauve-moi d'essayer de comprendre comment createModal() fonctionne!
Le point principal de ce post n'est pas de savoir si cette solution fonctionne pour vous est (je l'espère), mais que vous pouvez remplacer les limitations de jqGrid par une réécriture de leur code HTML.
OriginalL'auteur Yitz Meirovich
Mise à jour de mon post précédent...
J'ai ajouté une interface modale à la fin, qui a supprimé la nécessité de vérifier mon #clonePopoup. J'ai nettoyer le modal à la fin. J'utilise un , trouvé après le #alertmod en Chrome, pour créer le modal. Toutefois, c'est à dire, pour quelque raison, cette même n'apparaît pas. Je la créer si elle n'existe pas déjà.
Espérons-le, c'est une solution plus complète.
OriginalL'auteur Yitz Meirovich