[JS] Terugvinden van record index bij tabel

[vorlox]

Beste Allemaal,

Ik ben bezig om een tabelletje met gegevens via json op mijn website te krijgen.

Dat is gelukt echter nu zit ik met de vraag hoe ik op een nette manier de gegevens van het aangeklikte record kan opvragen. Na wat ge-google en uitgeprobeer kom ik op 3 - eigenlijk 4 manieren uit waarop ik het kan doen.

1. het hele record object toevoegen aan het dom element om het zo later op te vragen
2. Het huidige json object in een globale var opslaan en het record index nr aan het dom element toevoegen
3. Een functie aan het dom object toevoegen welke direct het record object teruggeef.

Misschien is bovenstaand wat onduidelijk dus even de voorbeelden erbij.
Allemaal pseudo code overigens. Het gaat om het idee)

Dit is wat er b.v. binnen komt via xhr

JSON:

{"records":[{"name":"Vorlox","address":"Fooweg 27 Schiedam"},{"name":"Vorloxientje","address":"Generaal foostraat 18 Huizerveen"},{"name":"Vorloxette","address":"Foodijk 6 R-dam"}]}

Dit is een stukje javascript waarbij ik alle drie de mogelijkheden uitprobeer.

JavaScript:

(function () {

    //Var voor manier 2
    var currentJsonObject = null;
        
    //onRecordClick
    function onRecordClick(e) {
        e = e || window.event;
        var oEl = e.srcElement || e.target,
            recordObject;
        
        //MANIER 1
        if (typeof oEl.recordObject === 'object') {
            alert(oEl.recordObject.name);
        }
        
        //MANIER 2
        if (typeof oEl.recordIndex !== 'undefined') {
            recordObject = currentJsonObject[oEl.recordIndex];
            if (recordObject) {
                alert(recordObject.name);
            }
        }
        
        //MANIER 3
        if (typeof oEl.getRecordObject === 'function') {
            recordObject = oEl.getRecordObject();
            alert(recordObject.name);
        }
    }

    //renderTable
    function renderTable(jsonObject) {
        //Var
        var table = document.createElement('table'),
            tbody = document.createElement('tbody'),
            tr, td,
            i, l, k;
        
        //Map to global (Manier 2)
        currentJsonObject = jsonObject;
        
        //Count
        l = jsonObject.records.length;
        
        //Append
        table.appendChild(tbody);
        
        //Loop
        for (i = 0; i < l; i++) {
            //Map
            k = jsonObject.records[i];
            
            //Create record
            tr = document.createElement('tr');
            tbody.appendChild(tr);
            
            //Fill name cell
            td = document.createElement('td');
            td.innerHTML = k.name;
            td.onclick = onRecordClick;
    
            //MANIER 1
            td.recordObject = k;
    
            //MANIER 2
            td.recordIndex = i;
    
            //MANIER 3
            td.getRecordObject = function (recordObject) {
                return function() {
                    return recordObject;
                }
            }(k);

            //Append
            tr.appendChild(td);
            
            //--
            
            //Fill address cell
            td = document.createElement('td');
            td.innerHTML = k.address;
            td.onclick = onRecordClick;
                
            //MANIER 1
            td.recordObject = k;
    
            //MANIER 2
            td.recordIndex = i;
    
            //MANIER 3
            td.getRecordObject = function (recordObject) {
                return function() {
                    return recordObject;
                }
            }(k);
            
            //Append
            tr.appendChild(td);
        }
        
        //Add table to body
        document.body.appendChild(table);
        
    }

})();

Wat ik zelf rottig vind is dat ik aan elke cell nu of het object of de index of de functie moet toewijzen.
Natuurlijk zou ik het ook kunnen toewijzen aan de "TR" en dan via parent ophalen.. maar dan blijft even de vraag wat nu de beste lek-vrije methode is.

[ Voor 4% gewijzigd door vorlox op 13-01-2009 20:09 . Reden: ff nog wat code aangepast ]

[vorlox]

Uh.. niemand enige kennis te delen?

[harrald]

Let op ik kan onzin uitkramen

Is dit sneller en efficienter, dan via de dom te kijken wat de inhoud van de td waarop geklikt is?
Voor mijn gevoel is dat een minder intensieve bewerking dan wat je nu doet. Nu neem je al een hoop geheugen in beslag terwijl je de info pas nodig hebt als er en onclick plaatsvind.

[vorlox]

Je hebt wel een punt maar en in dit voorbeeld is het niet zo duidelijk, maar het kan voorkomen dat een record een ID heeft, en dat ID heb je niet getoond in de tabel..dus kun je die ook niet uit de dom node halen.

Verder moet je dan als nog met je nodes geen rommelen 1 omhoog 2 naar links enzovoorts als je een waarde van het zelfde record wil wat in de volgende kolom staat. Net niet helemaal wat ik zoek.

[harrald]

vorlox schreef op woensdag 14 januari 2009 @ 19:30:
Je hebt wel een punt maar en in dit voorbeeld is het niet zo duidelijk, maar het kan voorkomen dat een record een ID heeft, en dat ID heb je niet getoond in de tabel..dus kun je die ook niet uit de dom node halen.

Verder moet je dan als nog met je nodes geen rommelen 1 omhoog 2 naar links enzovoorts als je een waarde van het zelfde record wil wat in de volgende kolom staat. Net niet helemaal wat ik zoek.

hmm ok.
Mijn javascript skills zijn nog sterk in ontwikkeling, en kan er niet heel veel zinnigs over zeggen.
Tis even wachten tot crisp op je topic stuit denk ik, dan heb je zo je antwoord

[vorlox]

Hahaha idd. ik hoop dat crisp zin heeft in mijn vraag? Hehehe eigenlijk kunnen ze net zo goed een apart topic openen (Javascript vragen aan Crisp)

Wheheh 0800-crisp

[ Voor 6% gewijzigd door vorlox op 14-01-2009 19:41 ]

[Pkunk]

Ik snap eerlijk gezegd nog niet helemaal wat je wil.
Je wil een tabel opbouwen met javascript, en de gegevens haal je d.m.v. xmlhttp uit een andere tabel? Dan heb je die gegevens toch gewoon server-side beschikbaar?

Of wil je een andere site spideren en de opgehaalde gegevens in een tabelletje tonen? Want in dat geval kan je toch ook gewoon alles server-side regelen?

[vorlox]

Hmm heeft volgens mij niet zoveel met server side te maken...ik wil graag dynamisch een tabel opbouwen en dan door er op te dubbelklikken nog meer gegevens van dat betreffende record ophalen. Natuurlijk heb ik alles serverside beschikbaar maar het is een ajax applicatie dus niet elke klik genereert een nieuwe pagina, soms wil ik dat er in een andere div additionele gegevens getoond worden...deze haal ik weer op van de server, echter daarvoor heb ik wel het betreffende record ID nodig. En nu vroeg ik me dus af op welke manier je een record koppelt aan een dom object zodat je als je er op klikt het betreffende record of de manier waarop je refereert terug krijgt.

edit:

ah ik begrijp misschien wat je bedoelt. even wat extra info

In dit projectje heb ik me voorgenomen om alleen met json data te werken.
Ik bouw de tabel op met aan de hand van 1 json object welke een paar records bevat met weinig data
Dus zegmaar alleen id, naam, grootte, extensie
Dan toon ik die in een tabel...echter zonder ID zegmaar, als ik dan op zo'n regel klik doe ik een nieuwe json request naar de server en die haalt van 1 record meer gegevens op zoals b.v datum aangelegd, -gemodificeerd, rollen enz.

Dus ik was niet van plan om alles in dat eerste json object te duwen omdat je dan meer stuurt dan waar de gebruiker om gevraagd had. en ik dus als je er op klikt de rest van de data ga ophalen. Mijn vraag is dus hoe refereer je via een dom object naar een soort van record.

Hetgeen hier nu geld voor de "TD" cellen of misschien de "TR"
Echter ik zit met hezelfde probleem bij elk type dom object.

Op dit moment los ik het op door de recordIndex toe te wijzen aan het dom object (Lijkt mij het kleinste) en vervolgens via het record index de bijbehorende json record index op te vragen.
In principe heb ik het json object toch al in geheugen, en het lijkt me dat wanneer ik het recordObject toewijs aan het dom element ik het alsmaar ga vergroten terwijl ik het toch in geheugen heb zitten.

Voorbeeld van lijst in tabel


Als je er op klikt dan krijg je additionele gegevens in een divje

[ Voor 44% gewijzigd door vorlox op 14-01-2009 22:13 ]

[Cousin Boneless]

Lijkt me wat overdreven om in je handler de sender via het event object terug te halen.. zoiets zou ik er van maken:

Handler:

JavaScript:

    function rowClick(row)
    {
        alert(row.recordObject.name);
    }

Rijtje toevoegen:

JavaScript:

            //Map
            k = jsonObject.records[i];

            //Create record
            tr = document.createElement('tr');
            tbody.appendChild(tr);
            tr.recordObject = k;
            tr.onclick = function(row) {
                            return function() {
                                rowClick(row);
                            }
                        } (tr);

            //Fill name cell
            td = document.createElement('td');
            td.innerHTML = k.name;
            tr.appendChild(td);
            
            //Fill address cell
            td = document.createElement('td');
            td.innerHTML = k.address;
            tr.appendChild(td);

Beetje methode 3 dus, maar nu wel direct het recordObject en de row beschikbaar.

In principe heb ik het json object toch al in geheugen, en het lijkt me dat wanneer ik het recordObject toewijs aan het dom element ik het alsmaar ga vergroten terwijl ik het toch in geheugen heb zitten.

Het is een referentie naar het object, je overhead is vrij minimaal? (heb geen diepgaande kennis over JS memory management)

[ Voor 20% gewijzigd door Cousin Boneless op 15-01-2009 00:21 ]

[vorlox]

Hmm dus toch een combi van methode 3...is idd wel de mooiste..vond het zelf ook al zo'n omweg om via een event en dan de target het record op te halen....

Bedankt voor het inzicht.

[crisp]

een anonymous function op de row zelf lijkt me ook het beste in dit geval; clicks vanuit de cells worden toch wel doorgestuurd.

[gvanh]

Wat nu als je bij het opbouwen van je tabel het ID van het betreffende record als attribute zou instellen voor je <tr>?

Dus zoiets als:

JavaScript:

tr.setAttribute('recordid', jsonObject.records[i].getAttribute('myRecordID");

Je kunt dan bij het afhandelen van de click het recordid weer ophalen uit de <tr>, en op basis daarvan vervolgens meer info gaan ophalen. Dat kun je dan doen met gegevens die via JSON al ingeladen zijn, of - als het omvangrijker datasets zijn - zou je ook per record bij een click de extra gegevens van je server kunnen ophalen.

Voordeel hiervan lijkt me dat je eventueel je tabel dynamisch kan laten "sorteren" door de gebruiker, zonder dat je opnieuw gegevens hoeft in te laden. Immers ... je relatie tussen de <tr> en de betreffende record blijft "hard" aanwezig in de "recordid" attribute van je <tr>.

[ Voor 2% gewijzigd door gvanh op 17-01-2009 18:31 . Reden: code aanpassing ]