2010-11-12 14 views
1

En regardant l'exemple suivant de la jqGridbug jQuery ou jqGrid dans Internet Explorer

http://members.iinet.net.au/~maximg1/Demo/jqGridBug.htm

(UserName: PublicAccess, Mot de passe: 12345678)

Vous remarquerez que les boutons d'option sont désactivées par par défaut et activé sur la ligne sélectionnée cliquez sur:

beforeSelectRow: function (ID, event) { 
    $("#" + _LastSelectedRow + "_SaveButton").button("disable"); 
    $("#" + _LastSelectedRow + "_DeleteButton").button("disable"); 
    $("#" + ID + "_SaveButton").button("enable").click(function (event) { 
     event.stopPropagation(); event.preventDefault(); 
    }); 
    $("#" + ID + "_DeleteButton").button("enable").click(function (event) { 
     event.stopPropagation(); event.preventDefault(); 
    }); 
    _LastSelectedRow = ID; 
} 

Vous remarquerez également que dans le wireup déclaré r les boutons qu'ils sont désactivés et wiredup pour éviter postbacks:

$(".DeleteButton").button({ icons: { primary: 'ui-icon-closethick' }, text: false, 
    disabled: true }).css({ width: "45px" }).click(function (event) { 
     event.stopPropagation(); event.preventDefault(); 
}); 
$(".SaveButton").button({ icons: { primary: 'ui-icon-check' }, text: false, 
    disabled: true }).css({ width: "45px" }).click(function (event) { 
     event.stopPropagation(); event.preventDefault(); 
}); 

Le comportement est exactement comme prévu dans Firefox et chrome, mais bon vieux IE émet un postback lorsque la ROW non sélectionné est cliqué IN LA COLONNE DE BOUTON. Le comportement est comme prévu lorsque vous cliquez sur l'une des autres colonnes telles que la description.

Je n'arrive pas à comprendre pourquoi cela se produit et je serais toujours redevable à qui que ce soit qui pourrait faire la lumière sur cette situation. PS: Je suis conscient que je câline les gestionnaires d'événements pour les boutons deux fois en deux points différents et cela a été fait seulement comme une dernière tentative pour résoudre le problème (évidemment n'a pas fonctionné).

Répondre

2

Votre problème principal est que vous ne spécifiez pas l'attribut type des boutons que vous avez créés. La valeur par défaut est différente dans différents navigateurs. Si le type est submit, vous aurez un problème supplémentaire. Il y a quelques problèmes connus avec la désactivation des boutons d'envoi. Je ne suis pas sûr que vous vraiment besoin de soumettre à tous. Probablement que votre gestionnaire d'événements personnalisé click suffira. Si vous avez besoin soumettez, vous pouvez utiliser les boutons avec le type="button", mais appeler le formulaire soumettre

$("#form1").submit(); 

à l'intérieur de la poignée de l'événement click. La version modifiée de votre code, vous pouvez voir here. J'appelle $("#form1").submit() uniquement à l'intérieur de la poignée d'événement click du bouton "Enregistrer" et non pour le bouton "Supprimer". Un autre inconvénient du formulaire sera le rechargement de la page et la suppression de la sélection de la grille.

De plus en the modified version of the your code je fixe quelques petites erreurs, mais importantes et a fait quelques petites améliorations de code:

  1. votre code original chargé des JavaScripts de jqGrid deux fois en raison de l'utilisation de grid.loader.js en plus à d'autres development scripts.
  2. Le code original utilisé ui.multiselect.js et jquery.searchFilter.js qui nécessaire pour chargerjquery.searchFilter.css et ui.multiselect.css aussi.
  3. Votre page HTML devrait inclure <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> dans l'en-tête de la page.
  4. Vous pouvez charger les données de jqGrid plus efficacement et plus facilement en utilisant le paramètre data de jqGrid au lieu de l'utilisation de la méthode addRowData. Au lieu de localReader: {id: 'ID'}, vous pouvez utiliser l'option key:true pour la colonne ID. Il est préférable de lire et cela fonctionne avec toutes les valeurs datatype et pas seulement avec les données locales.
  5. À l'intérieur de beforeSelectRow vous ne devez pas utiliser la liaison click sans de désolidarisation du gestionnaire précédent. Si vous insérez alert("in click") dans votre code actuel de la fonction que vous liez, vous verrez qu'après chaque sélection de la même ligne, la fonction alert sera appelée plusieurs fois (deux fois, trois fois et ainsi de suite). Donc, pour corriger votre code, vous devez supprimer toute liaison click à l'intérieur de la beforeSelectRow. Vous avez déjà lié un événement click une fois au début (voir $(".DeleteButton").button(...).click à l'intérieur de gridComplete).
  6. Comme je l'ai décrit ci-dessus, vous devez ajouter type=\"button\" dans le fragment de code HTML que vous placez dans la colonne Option.
  7. Étant donné que vous définissez une seule valeur de cellule, il est préférable d'utiliser la méthode setCell au lieu de la méthode setRowData.
  8. Vous devez augmenter la largeur de la colonne Options pour afficher les boutons insérés dans une ligne du navigateur Google Chrome. Dans ma version modifiée, j'ai utilisé width:98 au lieu de l'original width:96.
  9. De légères modifications du code HTML sont recommandées pour que le code soit valide XHTML 1.0 Transitional ou XHTML 1.0 Strict. (Voir les commentaires dans la page modifiée)
+0

Dire que vous êtes un bijou Oleg serait un euphémisme. Merci! –