Lien à partir d'une valeur de colonne dans jqGrid vers une nouvelle page à l'aide de GET
J'ai créé un jqGrid qui contient certains des domaines tels que:
job_id, nom, etc
Ce que je suis en train de faire, c'est de faire de sorte que lorsque le clic sur la valeur de la job_id colonne, il va rediriger vers:
travail.le php?job_id=(valeur qu'ils ont cliqué sur)
J'ai commencé par essayer d'utiliser ce qui suit comme mon colModel:
{ name:'job_id', index:'job_id', edittype:'select', formatter:'showlink',
formatoptions:{baseLinkUrl:'job.php'}, width:50, align:'center' }
Mais ce qu'il en résulte est une redirection vers:
travail.le php?job_id=(row_id)
J'ai fait quelques recherches et trouvé un poste par le développeur de la version open source de ce logiciel, qui a suggéré à l'aide de la suite de colModel et supplémentaires JS:
{ name:'job_id', index:'job_id', edittype:'select', formatter:'showlink',
formatoptions:{baseLinkUrl:'#'}, width:50, align:'center' }
loadComplete: function() {
var myGrid = $("#home_list");
var ids = myGrid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
$("#"+ids[i]+" a",myGrid[0]).click(function(e) {
var hash=e.currentTarget.hash;//string like "#?id=0"
if (hash.substring(0,5) === '#?id=') {
var id = hash.substring(5,hash.length);
var text = this.textContent;
location.href="job.php?id="+text;
}
e.preventDefault();
});
}
}
Mais ce n'est pas compatible avec IE. En plus de cela, lors de l'affichage d'un grand nombre de lignes dans le jqGrid, il faut un temps très long à charger, disons 5 secondes + de 500 lignes.
Je vais continuer à travailler sur ce projet, mais est-ce quelque chose que quelqu'un d'autre a faire?
OriginalL'auteur Linnay | 2011-02-15
Vous devez vous connecter pour publier un commentaire.
Vous avez utilisé l'exemple de code à partir de mon ancienne réponse je décide donc je dois répondre à votre question.
Je suis d'accord avec la critique sur les performances du code de la
loadComplete
. Donc +1 pour moi votre question. La construction$("#"+ids[i]+" a", myGrid[0])
à l'intérieur de la boucle longue peut fonctionner très lentement. On peut facilement résoudre le problème si on va utiliser les éléments suivantsVous pouvez voir que la version améliorée de la démo fonctionne exactement comme la démo originale. Pour montrer la performance de la méthode sur 1000 lignes, j'ai créé encore une démo. On peut voir que la nouvelle méthode fonctionne rapidement.
Maintenant de retour à votre problème principal. Le meilleur rendement, nous avons recevrez si vous écrivez votre mise en forme personnalisée et unformatter au lieu de l'utilisation de la prédéfinis formateur showlink. Le code peut être sur le point suivant:
Le code exact dépend
datatype
que vous utilisez, si vous utilisezloadonce:true
ou pas et quijsonReader
que vous utilisez. Il peut s'agir, par exemple, querowObject
est tableau dans votre cas et vous devez les utilisertableau d'index du champ de données correspondant (comme
rowObject[4]
) au lieu derowObject.job_id
.Mis à JOUR: je pense que la meilleure mise en œuvre de façon sera l'utilisation de onCellSelect ou beforeSelectRow au lieu de lier cliquez sur l'événement à chaque élément de la colonne. Je vous recommande de lire les réponses ci-après pour plus de détails: cette une, un autre et un de plus vieux répondre.
Merci pour les commentaires. Je fixe les deux ok-soft-gmbh.com/jqGrid/UnobtrusiveLinks.htm et ok-soft-gmbh.com/jqGrid/UnobtrusiveLinks1.htm. Maintenant, les deux fonctionnent dans tous les navigateurs.
La haine de soit votre testeur, mais ils sont encore à lancer des questions. Quand je suis à bricoler avec votre code dans mon application web, j'obtiens les mêmes problèmes. Un travail avec IE, un travail avec Firefox. En les comparant dans l'autre sens, vous bénéficiez d'une variable non définie erreur.
clicked the row with id='1'. Link contain 'undefined'
Êtes-vous sûr que vous utilisez la nouvelle version de ces deux codes et pas dans le cache? Dans la nouvelle version, vous devriez trouver
var text = this.textContent || this.innerText;
au lieu devar text = this.textContent;
ouvar text = this.innerText;
. Si une version pas de travaux, veuillez vous dire exactement quelles versions de navigateurs que vous utilisez. Chez moi cela fonctionne dans IE8, FF 3.6.13 et Chrome 9.J'ai effacé par le cache avant de tester vos pages et aucun d'entre eux montrent
var text = this.textContent || this.innerText;
. Mais je vais vous donner cet extrait d'un rapport et essayez de revenir ici. Merci beaucoup.OriginalL'auteur Oleg