jqgrid et popup fenêtres modales du lien

Question

J'ai un jqgrid, et je voudrais y mettre un lien pour ouvrir plus de détails sur la ligne dans une fenêtre modale. Tout ce que j'ai lu sur les fenêtres modales utilise un div qui s'affiche lorsque vous cliquez sur le lien, mais je veux passer un identifiant afin que je puisse obtenir l'information dont j'ai besoin. Je sais que je pourrais le faire avec une nouvelle fenêtre très facilement, mais je voudrais utiliser une fenêtre modale si possible.

Des idées comment je pourrais le faire. J'utilise asp.net si ça va être pertinent.

Vive Luke

Answer 1

Je suggère d'utiliser le plug-in de dialogue jQuery UI pour Windows modales personnalisé. Vous trouverez ici la démonstration et de la documentation:

http://jqueryui.com/demos/dialog/

En théorie, de faire ce que vous demandez, vous pouvez suivre ces étapes:

1. Ajouter un « dialogue » div balise ta page.

2. Créer le lien dans votre flux de données. Si vous utilisez un type de données XML, assurez-vous d'utiliser un indicateur CDATA pour encapsuler votre lien afin qu'il puisse être analysé correctement.

   < cellulaire> < [CDATA [< a href = » javascript: showDialog ('551') »> texte]]!> </cellule>

   Dans ce cas, puisque nous savons que l'ID réel à le moment où le lien est créé, j'ai pré-rempli l'identifiant (par exemple 551) dans la fonction. Cela pourrait également être récupéré à partir de l'API jqGrid avec la propriété selrow. C'est ton appel. Si vous utilisez un type de données JSON, l'idée serait similaire. Vous n'auriez pas à vous soucier du qualificatif CDATA.

3. Créez une fonction locale (par exemple showDialog (id)) pour correspondre à votre lien.

4. Ajoutez du code dans la fonction showDialog pour remplir et ouvrir la boîte de dialogue modale. À l'aide d'un appel AJAX pour rassembler des données spécifiques pour cet enregistrement, créez le contenu de la boîte de dialogue et remplissez la boîte de dialogue à l'aide de la méthode jQuery .html.

   fonction showDialog (id) {

   .ajax $ ({ url: "feed.aspx id =?" + Id, succès: function (données) {var contenu = // TODO: créer disposition de dialogue ici

   $("#dialog").html(content); 
   
       $("#dialog").dialog({ 
        title: 'Record Details', 
        modal: true, 
        closeOnEscape: true, 
        width: 300, 
        height: 200, 
        buttons: false, 
        position: "center", 
       }); 
   
       $("#dialog").dialog("open"); 
   } 
   

   }); }

Ceci est juste une façon à la peau du chat. Vous devriez être capable d'utiliser plus d'une approche jQuery avec la création de lien. Si vous le souhaitez, plutôt que de créer le lien spécifique au flux de données, vous pouvez ajouter des liaisons d'événements click jQuery pour gérer la requête. C'est ton appel. Vous pouvez également ajouter dynamiquement le dialogue div à votre page en utilisant jQuery plutôt que de simplement le placer manuellement comme je l'ai décrit ci-dessus. Il pourrait être un peu plus élégant mais atteindrait le même objectif.

Answer 2

J'essaye ceci en retard. Peut-être avez-vous une réponse. Pensé que cela aidera les autres.

Le code #dialog peut être fait comme suggéré par gurun8. Cela doit être connecté à jqgrid. Il existe un événement onSelectRow qui se déclenche chaque fois qu'une ligne est sélectionnée dans jqgrid. Référez documentation. J'ajoute habituellement autoOpen: false, au constructeur de dialogue.

Vous devez ajouter l'événement onselectrow à la grille (fonction jqgrid comme indiqué ci-dessous) et vous pouvez transmettre l'identifiant à la fonction. Cet identifiant est l'identifiant unique dans jqgrid. Assurez-vous qu'il n'y a pas d'erreurs de syntaxe, ajoutez une virgule, le cas échéant.

$s("#list").jqGrid({ 
... 
    onSelectRow: function(id){ 
    console.log("row is selected"+id); 
    $url = "your_url/"; 
    $s('#dialog').load($url); 
    $s('#dialog').dialog('open'); 
    } 
... 
});