Frage zum jquery plugin jqgrid data-tag mit Wert belegen

[selfmade01]

Hallo
ich verwende das jqgrig plugin und hole mir die Daten für die Tabelle aus einer db mit

  
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {  
			$responce->rows[$i]['id']=$row['hardwareInfoId'];  
			$responce->rows[$i]['data-group']=$row['hardwareGroup'];  
			$responce->rows[$i]['cell']=array($row['hardwareInfoId'],$row['roomNr'],$row['roomType'],$row['nlContainerTypeName'],$row['Type'],$row['hardwareTypeName'],$row['description'],$row['hardwareGroup'] );  
			$i++;  
			}  
			echo json_encode($responce);  

nun möchte ich in dem javascript-code den Wert von data-group ($responce->rows[$i]['data-group'])
abfragen, finde aber in der Doku nichts wie ich auf einzelne Keys zugreifen kann

hier mein javascript Ausschnitt

  
  
colNames:[ ' ', '<?=_("Room Nr.");?>','<?=_("Room Type");?>', '<?=_("Container type");?>',  
								'<?=_("type");?>',  
								'<?=_("Hardware type");?>',  
								'<?=_("Description");?>'  
								//'<?=_("group");?>'  
								],  
					colModel:[  
					// {  name: 'group', key: true, width: 75, hidden: true },  
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,  
							formatter:'actions',  
							formatoptions:{  
								keys:true,  
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},  
							}  
						},  
						  
						{name:'roomNr',index:'roomNr', width:30, sorttype:"int", edittype:"select",  editable: true,  
.  
.  
.  
  
usw...  

Da ich colNames verwende, muss laut jqgrid ColNames und ColModel in der Anzahl der Felder gleich sein.
Wenn ich nun in ColModel ein Feld mit hidden belege bräuchte ich auch den Tag in ColNames. dort wird mir dann  aber der Wert ausgegeben
Ich möchte nur das der Wert von data-group als data-attribut in meiner Seite hinterlegt wird, mehr nicht

Weiss jemand wie das geht?

Grüße Jürgen

[hotti]

Hallo

Weiss jemand wie das geht?

Idee: Den Record mit Daten welche nicht angezeigt werden sollen entweder hinten oder vorn im rowArray platzieren, so dass er vor der Ausgabe der Tabelle recht einfach gelöscht werden kann. Vor dem Löschen natürlich die Daten auslesen.

MfG

[selfmade01]

Hallo,

da habe ich noch das Verständnisproblem.

Ich kann mir zwar alle erdenklichen Daten aus der DB holen, aber ich in dem jqgrid plugin habe ich nur die Möglichkeit (zumindest kenne ich nur die) mir mit ColNames und ColModel dann die Daten ausgeben zu lassen die dann tatsächlich in der Tabelle stehen
Verwende ich Nicht ColNames und lasse mir den Table-header automatisch generieren so kann ich unter ColNames ein Feld mit hidden belegen was dann auch nicht angezeigt wird.

In dem Plugin muss es irgend eine Möglichkeit geben data-attribute zu belegen.
Aber da finde ich nichts

Ich finde auch nichts wie ich OHNE ColModel auf einzelne Werte zugreifen kann die mir von der DB geliefert werden.

Grüße Jürgen

Idee: Den Record mit Daten welche nicht angezeigt werden sollen entweder hinten oder vorn im rowArray platzieren, so dass er vor der Ausgabe der Tabelle recht einfach gelöscht werden kann. Vor dem Löschen natürlich die Daten auslesen.

MfG

[hotti]

Hallo,
In dem Plugin muss es irgend eine Möglichkeit geben data-attribute zu belegen.
Aber da finde ich nichts

Das Teil hat eine miserable bis kar keine Doku. Auf GitHub angekommen, war mir die Lust am Lesen schon vergangen.

Ich finde auch nichts wie ich OHNE ColModel auf einzelne Werte zugreifen kann die mir von der DB geliefert werden.

Wahrscheinlich kommst Du clientseitig gar nicht ran an das Array. Bau dir serverseitig ein JSON-Array mit Objekten (je Zeile ein Objekt) selbst zusammen und füge am Anfang ein Objekt mit den hidden Daten an. Das ziehst Du vor der Darstellung der Tabellendaten einfach wieder raus, fertig.

Schöne Grüße.

[selfmade01]

Hallo,

die Doku ist hier
http://guriddo.net/documentation/php/

aber leider finde ich darin 0,0 wie man ein data-attribut füllt oder wie man an den Inhalt des arrays herankommt.
Das einzige was ich gefunden habe ist, wie man die <tr>-id füllt. Das wars dann schon.

Ich hatte auch schon in seinem Forum nachgefragt werde dort aber stets nur auf die Doku verwiesen ohne das mir dabei ein Link gesendet wird wo es tatsächlich zu finden ist.

Das ist wirklich übel.
Schade um so ein plugin was wirklich ganz gut ist, aber man Wochen braucht um kleinste Teile zu implementieren

Grüße Jürgen

[selfmade01]

Hallo

habe es jetzt endlich geschafft ein hidden zu plazieren.
Nun muss ich diese mit jquery nur noch auslesen

kann mir jemand helfen?

hier wie der code im Dom aussieht

  
  
<table id="grid-table" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="0" role="grid" aria-multiselectable="true" aria-labelledby="gbox_grid-table" style="width: 1371px;">  
  
<tr id="4" class="ui-widget-content jqgrob ui-row-ltr" tabindex="-1" role="row">  
  
<!--- hier benötige ich die 3 , das ist eigentlich meine data-group ->  
<td aria-describedby="grid-table_data-group" title="3" style="display:none;" role="gridcell">3</td>  
</tr>  

dabei benötige ich die "3"
" ">3</td> "

wäre super wenn mir jemand den jquery-befehl schreiben könnte

Danke!

Grüße Jürgen

[hotti]

Warum so umständlich? Dein JSON in der Ajax-Response könnte so aussehen:

  
  
[  
  { mydata: 'hidden 123' },  
  {  
    Name: 'Lottermann',  
    Vname: 'Erwin'  
  },  
  {  
    Name: 'Haselhuhn',  
    Vname: 'Horst'  
  }  
]  
  
  

Nach dem Empfang ziehst Du das erste Objekt raus und mit dem Rest erzeugst Du die Tabelle.

Fertisch ;)

[selfmade01]

Hallo

so sieht auch mein json array aus.

nur weiss ich eben nicht wie ich es rausziehen soll

bei mir sieht es so aus

das ist der jquery-teil mit dem ajax (ist so in dem jqgrid plugin)

  
url: "incl/getHardwareDetails-neu.php?hardwareInfoId="+rowId+"&table=hardwareInfo",  
datatype: "json",  
mtype: "GET",  
  

nur ist die Frage , wie greife ich auf den json-string zu den ich mir über diese url: hole?

in der getHardwareSettings-neu.php

bekomme ich zum Schluss den json-string mit
echo json_encode($responce);

ich weiss jetzt nicht wie Du das meinst an welcher Stelle und wie ich auf das Element data-group in dem String zugreifen soll?

Sorry für Dich ist das evtl. total logisch aber ich bin da nicht so firm drin....

Grüße Jürgen

[hotti]

Hallo

so sieht auch mein json array aus.

nur weiss ich eben nicht wie ich es rausziehen soll

array.shift();

[selfmade01]

Hallo

mit array.shift();
muss ich doch das array angeben...

das ist doch meine Frage...

ich weiss nicht mal wo das array ist

ich habe nur das plugin hier und muss mich nach diesem halten
wenn ich eine variable hätte wo ich weiss das dort das Ergebnis meines url-requests steht dann wäre ich schon viiiiiel weiter

Grüße Jürgen

array.shift();

[selfmade01]

hallo,

mit dem auslesen des arrays geht das auch glaube ich nicht
Grund:
Ich lasse mikr eine Tabelle mit dem json-string füllen
in jeder Zeile steht eine andere groupid--- das ist bei mir nun das hidden-feld data-group (leider wird es wie oben nicht als data-attribut gespeichert sondern ganz einfach als hidden-feld.

Jede Zeile kann ich anklicken und es öffnete sich dann eine weitere subgrid-tabelle---

genau für diese subgrid-tabelle benötige ich diese group-id

aus dem grund müsste ich wahrscheinlich via jquery auf die Zeile zugreifen und dort nach data-group und dem hidden-wert suchen

oder?

die ID der Zeile habe ich, auf die kann ich auch zugreifen
aber Beispiele oder Dokus zu dem was ich hier zusätzlich benötig finde ich nach tagelanger suche einfach nicht

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

das ist doch meine Frage...

ich weiss nicht mal wo das array ist

Das array wird über AJAX geladen. Die einfachse Methode für dich da heran zu kommen, ist ein EventHandler für die Ajax-Abfrage zu registrieren. Das jQuery-Plugin stellt dafür einen entsprechendes Event bereit. Ich hab das genaue Event jetzt nochmal für dich nachgeschlagen.

Immernoch ungetestet:

$('table').on('jqGridLoadComplete', function ( data ) {  
   console.dir( data ); // das sollte dein Array sein  
});

wenn ich eine variable hätte wo ich weiss das dort das Ergebnis meines url-requests steht dann wäre ich schon viiiiiel weiter

Pfeif auf die Dokumentation und schau dir den Quelltext an.

[selfmade01]

Hallo

danke erstmal für die Hilfe.

das Problem ist, bevor ich auf die Daten die ich ja bereits in meinem json-string richtig bekomme, muss ich aus diesem string ein hidden-feld füllen und dies natürlich für jede Zeile.
ich arbeite ja mit einem subgrid. Klicke ich also auf die Zeile dann öffnet sich das subgrid.
Ich muss aber aus der ausgewählten Zeile eine bestimmte id senden.

Diese id will ich zuvor in jede Zeile abspeichern

Aktuell kann ich nur über colModel ein hidden feld bezeichnen. Dort steht nun meine gewünschte id
jedoch weder in einem input-feld sondern einfach zwischen dem <td></td>

das ist mein Quelltext

  
<td aria-describedby="grid-table_data-group" title="3" style="display:none;" role="gridcell">3</td>  

die Zahl 3 ist meine groupid die ich aus dem json-string erhalte, der key dort ist data-group.

Ich muss also nicht unbedingt auf den json-string zugreifen sondern ich benötige eine Möglichkeit

irgendwo in der Zeile ein data-groupid tag zu hinterlegen dem ich den Wert aus data-group zuweise.

Wenn ich dann auf die Zeile klicke kann ich ja über jquery dann auf diesen data-groupid tag zugreifen.

Oder es gibt noch eine elegantere Methode. die es bestimmt in dem jqgrid-plugin gibt nur findet man das nirgends in der undurchsichtigen Doku

mache ich das mit Deinem Beispiel, dann bekomme ich ja alle Daten des json-strings. Die brauche ich aber nicht.

Damit ich das nun nicht falsch erkläre.

Ich suchte ursprünglich eine Möglichkeit auf einen bestimmten key des json-strings zuzugreifen und im zweiten step suchte ich eine Möglichkeit den wert des bestimmten keys dann in ein data-attribut in jede Zeile zu speichern damit ich dann im 3 step bei klick auf die Zeile diesen wert wieder auslesen kann

sorry für die lange Story

wäre super wenn dir dazu was einfällt

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

So ganz verstehe ich dich immer noch nicht, aber ich wills nochmal versuchen:

Ich suchte ursprünglich eine Möglichkeit auf einen bestimmten key des json-strings zuzugreifen und im zweiten step suchte ich eine Möglichkeit den wert des bestimmten keys dann in ein data-attribut in jede Zeile zu speichern

Angenommen dein JSON-Objekt hat folgende (vereinfachte Struktur):

{  
   rows : [  
      {  
         "data-group" : 1  
      },  
      {  
         "data-group" : 2  
      },  
      {  
         "data-group" : 1  
      }  
   ]  
}  

Frickeln wir die beiden Beispiele, die ich dir schon gebastelt habe, doch mal zusammen:

  
// Wir lauschen auf das jqGridLoadComplete-Event, das ist der Zeitpunkt an dem wir Zugriff auf das JSON-Objekt erhalten können  
$('table').on('jqGridLoadComplete', function ( data ) {  
   var $this = $(this);  
   // data ist eine Referenz auf das JSON-Objekt, wir wollen aber über die Zeilen itereieren  
   data.rows.forEach( function ( row, i ) {  
      // in jeder i-ten Tabellenzeile wollen wir die data-group-Eigenschaft der aktuellen JSON-Zeile speichern  
      $this.find('tr').eq(i).data('group', row['data-group']);  
   });  
});

Hier passiert  also folgendes:
Wenn eine Antwort auf einen Ajax-Request eintrifft, werden alle Zeilen in dem JSON-Objekt (data.rows) iteriert und für jeden Eintrag wird ein data-Attribut an der korrespondierenden Tabellenzeile gesetzt. Inwiefern unterscheidet sich das jetzt noch von deiner Vorstellung?

damit ich dann im 3 step bei klick auf die Zeile diesen wert wieder auslesen kann

Klingt für mich ziemlich umständlich, wieso der Umweg über das data-Attribut? Wie auch immer:

$('tr').click( function(){  
   var dataGroup = $(this).data('group');  
});

PS: jQuerys $().data() setzt nicht wirklich ein data-Attribut, sondern benutzt einen eigenen internen Speicher. Wenn du unbedingt ein data-Attribut brauchst, dann kannst du mit $().attr('data-group', row['data-group']) bzw. $().attr('data-group') arbeiten.

[selfmade01]

Hallo,

bin beeindruckt.

Vielen Dank für die ausführliche Hilfe.

Nun habe ich es verstanden.
Du ziehst also aus dem json-string "data" den wert des data-group heraus und fügst diesen jeder Zeile hinzu.
Das würde ja passen.
wenn ich dann auf die zeile klicke (bei mir ist das ein "+" Button und somit das subgrid geladen werden soll, dann liest du aus der angeklickten Zeile das gesetzte data attribut aus und somit wäre es ja perfekt.

Super das werde ich probieren.

Ich melde mich dann morgen ob es geklappt hat

Danke einstweilen

Grüße Jürgen

[selfmade01]

so ein Mist

jetzt findet er "data" nicht

hier die Meldung...

TypeError: data.rows is undefined

data.rows.forEach( function ( row, i ) {

so habe ich es jetzt implementiert

  
$(grid_selector).on('jqGridLoadComplete', function ( data ) {  
					var $this = $(this);  
						data.rows.forEach( function ( row, i ) {  
					 $this.find('tr').eq(i).data('group', row['data-group']);  
				   });  
				});	  

kann es sein das dieses jqgrid plugin "data" gar nicht benutzt?

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

jetzt findet er "data" nicht

Nein, du liest die Fehlermeldung falsch. Er findet "rows" nicht als Eigenschaft von "data". Sonst hieße die Fehlermeldung:

"Cannot read property 'rows' of undefined"

$(grid_selector).on('jqGridLoadComplete', function ( data ) {
var $this = $(this);
data.rows.forEach( function ( row, i ) {
$this.find('tr').eq(i).data('group', row['data-group']);
   });
});

  
  
Lass dir testweise doch mal die Variable 'data' ausgeben. Am besten mit `console.dir(data)`{:.language-javascript}. Die Ausgabe findest du in deiner JavaScript-Konsole (In Chrome öffnet die sich mit STRG+Shift+i).  
  
BTW: Wie hast du es geschafft, die Code-Einrückung so schnell zu zetrstören? Den Code kann doch kein Schwein mehr ordentlich lesen.  

-- 
“All right, then, I'll go to hell.” – Huck Finn

[selfmade01]

Hallo

mit

  
  
loadComplete : function(data) {  
	data.rows.forEach( function ( row, i ) {  
       jQuery(grid_selector).find('tr').eq(i).attr('data-group', row['data-group']);  
	});  
},  

macht er jetzt genau das was er soll, er schreibt in jede Zeile das data attribut data-group und gibt im den Wert.

Das einzige was noch nicht ganz funktioniert ist

das Auslesen bei click

  
$(grid_selector).click( function(){  
	var dataGroup = $(this).data('group');  
	//var dataGroup = jQuery(grid_selector).find('tr').data('group');  
	 alert("das ist data-group"+dataGroup);  
});  

wie geschrieben
das data-group gibt es nun in jeder <tr> und es hat auch einen wert also
<tr data-group=3>

irgendwie wird der this nicht richtig intepretiert
wenn ich willkürlich mit
var dataGroup = jQuery(grid_selector).find('tr').data('group');
drauf zugreife bekomme ich halt immer den gleichen wert, aber er findet es

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

$(grid_selector).click( function(){
var dataGroup = $(this).data('group');
//var dataGroup = jQuery(grid_selector).find('tr').data('group');
alert("das ist data-group"+dataGroup);
});

  
Vorweg: Du hast dich offenbar entschieden, nicht jQuery eigenen Speicher zu benutzen, deswegen wirst du mit .data('group') auch keinen Erfolg beim Auslesen haben. Stattdessen müsstest du .attr('data-group') benutzen, um den Wert zu auszulesen.  
  
Dein zweites Probelm ist auch logisch zu erklären, wenn du den ClickHandler bei der Tabelle registrierst, kann die Funktion ja nicht die geklickte Zeile auf magische Art eraten. Du hast zwei Möglichkeiten, du registrierst du den EventHandler bei den Tabellezeilen:  
  
~~~javascript
$(grid_selector).on('click','tr' function(){ // Achte auf das 'tr' als zweiter Paramter  
   var dataGroup = $(this).attr('data-group');  
   alert("das ist data-group"+dataGroup);  
});

Oder du traversierst von dem tatsächlich geklickten Element (zum Beispiel eine Tabellespalte) nach oben bis zur nächsten Tabellenzeile:

$(grid_selector).click( function( event ){  
   var tr = $( event.target ).closest('tr');  
   var dataGroup = $(tr).attr('data-group');  
   alert("das ist data-group"+dataGroup);  
});

[selfmade01]

Hallo,

Vorweg: Du hast dich offenbar entschieden, nicht jQuery eigenen Speicher zu benutzen,

wie meinst Du das?
kannst Du mir das bitte erklären ==> "jQuery eigenen Speicher"

damit es funktioniert musste ich attr('data-group');
verwenden.
Was hätte ich bei Deiner Lösung noch machen müssen?

Dein zweites Probelm ist auch logisch zu erklären, wenn du den ClickHandler bei der Tabelle registrierst, kann die Funktion ja nicht die geklickte Zeile auf magische Art eraten. Du hast zwei Möglichkeiten, du registrierst du den EventHandler bei den Tabellezeilen:

da ich ja eine subgrid funktion in dessen plugin habe, die auf einen klick auf den "+" Button wartet, habe ich nun einfach Deine Lösung in diesen Teil gepackt.

Ein Problem habe ich noch

das Setzen des data-group attributes funktioniert zwar, aber ich habe in der Tabelle als erste Zeile eine leer-Zeile, der müsste also in der zweiten Zeile anfangen

  
data.rows.forEach( function ( row, i ) {  
									 jQuery(grid_selector).find('tr').eq(i).attr('data-group', row['data-group']);  
							  
});  

bei mir sieht die Tabelle so aus

  
  
<tr class="jqgfirstrow" style="height:auto" role="row" data-group="2"> // in diese zeile darf nichts gesetzt werden  
  
// ab hier wäre es ok  
<tr id="2" class="ui-widget-content jqgrow ui-row-ltr" tabindex="-1" role="row" data-group="3">  
<td aria-describedby="grid-table_cb" style="text-align:center;width: 25px;" role="gridcell">  

habe das schon versucht in eine if-Abfrage zu packen ob er die erste Zeile hat etc. das hat aber nicht geklappt

Grüße Jürgen

[selfmade01]

hallo,

habe das mit der ersten Zeile die er auslassen soll so gelöst.

  
var z = i + 1;  
							jQuery(grid_selector).find('tr').eq(z).attr('data-group', row['data-group']);  

weiss nur nicht ob das die eleganteste Methode ist.

Grüße Jürgen

[selfmade01]

Hallo

habe die Abfrage der des data-group tag nun direkt in den Teil des subgrids implementiert

mit
subGridRowExpanded: function (subgridDivId, rowId) {
var dataGroup = $("#"+rowId).data('group');

es funktioniert nun genau so wie ich es wollte

Danke!!!

Grüße Jürgen

[selfmade01]

habe Dein Beispiel
jetzt in das plugin integriert

mit

  
loadComplete : function(data) {  
	var $this = $(this);  
	data.rows.forEach( function ( row, i ) {  
	$this.find('tr').eq(i).data('group', row['data-group']);  
	alert(row['data-group']);  
	});  
},  
  

Fehler kommen jetzt keine mehr, er bringt mir auch die groupid's mit alert
aber er schreibt es nicht in die Tabelle

der weg, scheint jedoch schonmal richtig zu sein..

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

Fehler kommen jetzt keine mehr, er bringt mir auch die groupid's mit alert
aber er schreibt es nicht in die Tabelle

Wie ich schon erklärt habe, benutzt die data()-Methode von jQuery seinen eigenen internen Speicher und greift nicht auf die data-Attribute zurück.

Wenn du den jQuery-Speichermechanismus nicht nutzen willst, sondern auf jeden Fall den benutzerdefinierte data-Attribute haben möchtest, dann musst du diese Zeile:

$this.find('tr').eq(i).data('group', row['data-group']);
ändern in
$this.find('tr').eq(i).attr('data-group', row['data-group']);

jQuerys eigener Speicher hat aber den Vorteil, dass man auch ganze JavaScript-Objekte darin speichern kann und nicht nur Strings.

[selfmade01]

... ps.

hier ist der Teil in dem ich das hidden feld definiere

das kommt also nachdem ich mit der url: angabe mir den json-string geholt habe

colModel:[
.
.// andere felder
.// hier kommt das was ich benötige

{ name: 'data-group', index: 'data-group', hidden: true , editable: true,
editrules: {edithidden:true}
];

[1UnitedPower]

Hakuna matata!

Ich möchte nur das der Wert von data-group als data-attribut in meiner Seite hinterlegt wird, mehr nicht

Ich habe dein Problem nicht so ganz verstanden. Soweit ich jqGrid verstehe, handelt es sich dabei um eine fancy Tabelle, die ihre Daten mit AJAX vom Server lädt.

Es scheint ein Event loadComplete zu geben, das du nutzen könntest, um dein Vorhaben umzusetzen:

Ungetestet:

$('table').jqGrid({  
   loadComplete : function ( ts, request ) {  
      var $this = $(this);  
      request.response.rows.forEach( function ( row, i ) {  
         $this.find('tr').eq(i).data('group', row['data-group']);  
      });  
   }  
});