Die Verknüpfung aus einer Spalte mit dem Wert im jqGrid auf eine neue Seite mit GET

Habe ich eine jqGrid enthält einige Felder wie:

job_id, name, etc

Was ich versuche zu tun ist, so dass, wenn Sie auf den Wert in der Spalte job_id, es wird redirect Sie zu:

job.php?job_id=(Wert, den Sie geklickt haben)

Ich begann, indem Sie versuchen, verwenden Sie die folgende als meine colModel:

{ name:'job_id', index:'job_id', edittype:'select', formatter:'showlink',
  formatoptions:{baseLinkUrl:'job.php'}, width:50, align:'center' }

Aber was sich so ergibt, ist eine Umleitung zu:

job.php?job_id=(row_id)

Ich habe einige suchen, und fand ein post von dem Entwickler des open-source-version dieser software, der vorschlug, mit den folgenden colModel und zusätzliche 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();
        });
    }   
}

Dies ist aber nicht kompatibel mit IE. Zusätzlich zu dieser, wenn die Anzeige eine große Anzahl von Zeilen in das jqGrid, dauert es extrem lange zum laden, sagen wir 5 Sekunden + für 500 Zeilen.

Ich werde weiter daran zu arbeiten, aber ist das etwas, was jemand anderes getan hat?

InformationsquelleAutor Linnay | 2011-02-15

7

Ihnen verwendete code-Beispiel aus meine alte Antwort, so dass ich entscheiden, ich sollte die Antwort auf deine Frage.

Stimme ich mit der Kritik über die Leistung der code der loadComplete. Also +1 von mir für deine Frage. Das Konstrukt $("#"+ids[i]+" a", myGrid[0]) im inneren der langen Schleife arbeiten kann, sehr langsam. Man kann leicht das problem zu beheben wenn man so will, verwenden Sie die folgende
```
var getColumnIndexByName = function (columnName) {
    var cm = $(this).jqGrid("getGridParam", "colModel"), l = cm.length, i;
    for (i = 0; i < l; i++) {
        if (cm[i].name === columnName) {
            return i; //return the index
        }
    }
    return -1;
};

var myGrid = $("#list");
myGrid.jqGrid({
    ...
    loadComplete: function () {
        var i = getColumnIndexByName.call(this, 'Subcategory');
        //nth-child need 1-based index so we use (i+1) below
        $("tbody>tr.jqgrow>td:nth-child(" + (i+1) + ")>a", this).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 || this.innerText;
                alert("clicked the row with id='"+id+"'. Link contain '"+text+"'");
                location.href = "http://en.wikipedia.org/wiki/" + text;
            }
            e.preventDefault();
        });
    }
});
```
Können Sie sehen, dass die verbesserte version die demo funktioniert genau wie die original demo. Zeigen die Leistungsfähigkeit der Methode auf 1000 Zeilen, die ich erstellt eine weitere demo. Man kann sehen, dass die neue Methode funktioniert schnell.

Nun zurück zu deinem Hauptproblem. Die beste Leistung, die wir erhalten, wenn Sie schreiben, Ihre custom formatter und unformatter anstelle der Verwendung der vordefinierten formatter showlink. Der code kann etwa folgende:
```
formatter: function (cellvalue, options, rowObject) {
    return "<a href=\"job.php?job_id=" + rowObject.job_id + "\">" + cellvalue + "</a>";
},
unformat: function (cellvalue, options, cellobject) {
   return cellobject.job_id;
}
```
Der exakte code hängt davon ab, welche datatype Sie verwenden, ob Sie loadonce:true oder nicht, und die jsonReader Sie verwenden. Es kann beispielsweise sein, dass rowObject ist array in Ihrem Fall und Sie haben zu verwenden
array-index den entsprechenden Daten-Bereich (wie rowObject[4]) statt rowObject.job_id.

AKTUALISIERT: ich denke, die beste Art und Weise der Umsetzung wird die Verwendung von onCellSelect oder beforeSelectRow anstelle der Bindung click-Ereignis für jedes element in der Spalte. Ich empfehle, Lesen Sie die folgenden Antworten für details: diese eine, ein weiteres und eine weitere alte Antwort.
- Hallo Oleg, danke für deine Antwort. Ich habe getestet, Ihre zwei Seiten und haben Folgendes gefunden. ok-soft-gmbh.com/jqGrid/UnobtrusiveLinks1.htm ist kompatibel mit Internet Explorer, aber die Zeilen undefined zurück mit Mozilla Firefox. Das original war kompatibel mit Firefox, aber nicht IE. Ich werde wieder auf dieses Thema kurz, aber ich dachte, ich würde machen Sie darauf aufmerksam.
- Vielen Dank für das feedback. Ich fixierte die beiden ok-soft-gmbh.com/jqGrid/UnobtrusiveLinks.htm und ok-soft-gmbh.com/jqGrid/UnobtrusiveLinks1.htm. Jetzt arbeiten beide in allen Browsern.
- Hasse, um Ihre persönlichen tester, aber Sie sind immer noch werfen Fragen auf. Wenn ich basteln mit dem code in meine web-Anwendung, ich bin immer die gleichen Probleme. Man arbeitet mit dem IE, ein arbeiten mit Firefox. Im Vergleich zu den anderen Weg um, erhalten Sie eine " undefined variable Fehler. clicked the row with id='1'. Link contain 'undefined'
- Sind Sie sicher, dass Sie die neue version von codes und nicht aus dem cache? In der neuen version finden Sie var text = this.textContent || this.innerText; statt var text = this.textContent; oder var text = this.innerText;. Wenn version nicht funktioniert bitte genau sagen welche Versionen der Browser, die Sie verwenden. Bei mir funktioniert es im IE8, FF 3.6.13 und Chrome 9.
- Hab ich gelöscht, cache vor dem testen der Seiten und keiner von Ihnen zeigen var text = this.textContent || this.innerText;. Aber ich Geb dir das snippet ausprobieren und hier wieder melden. Vielen Dank.
- Es ist sehr seltsam, was Sie erklärt. Wahrscheinlich haben Sie einige proxy, die sind auf dem Weg? Sie können versuchen, Zugriff auf die gleichen Seiten später. Dennoch, die einzige änderung, die ich gemacht in der neuen version ist das Auswechseln von this.innerText oder this.textContent zu this.textContent || this.innerText. Bitte lassen Sie mich bekannt, die Ihren code basierend auf meinem Beispiel korrekt funktioniert nachdem Sie diese änderungen.
- Vielen Dank für deine Hilfe, ich habe aufgeräumt, alle meine code und es funktioniert perfekt. Sie sind der Mann.
- Sie sind herzlich willkommen!
- vielen Dank für die umfassende und vollständige Antwort, nur implementiert, die benutzerdefinierte formatter-in einer meiner apps. Wollte nur lassen Sie wissen, dass es ein kleiner Tippfehler in Ihrem formatter Beispiel, die rowObject.job_id=+ sollte nicht ein Gleichheitszeichen vor dem plus-Zeichen, auch cellval sollte geändert werden, um cellvalue und für die Konsistenz, die Sie verwenden sollten rowObject in beiden formatter und unformatter. Vielleicht könnten Sie ändern die oberen Beispiel? Danke!
- Danke, werde ich korrigieren Sie den code. Die Antwort ist relativ alt. Der bessere Weg ist, finden Sie in die Antwort oder im diese eine.
- Danke für die tolle demo auf die beste Weise zu gehen, wenn es um Keep-It-Simple-Stupid-Codierung und jqGrid Leistungen. Auch habe ich beinahe verpasst den neuen link, den Sie gerade gebucht. Google-Suche brachte mich hier. 🙂 Im Grunde will ich nur anfügen eine javascript-Funktion, um die nicht-hyperlink html-Tags für die features.
- Sie sind herzlich willkommen! Ich empfehle nun vor allem auf den Ansatz aus der AKTUALISIERT Teil meiner Antwort.
InformationsquelleAutor Oleg

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.