insertRow, insertCell strādā ļoti lēni

[DarkSide]

Sveiki!

 

Sen neesmu neko rakstījis, bet tad pēkšņi atcerējos, ka ir taču tāds php.lv forums! :)

Tad nu lūk kāda man problēma - varbūt Jums ir kādas idejas vai varbūt jau gatavs risinājums.

 

Tātad ir HTML tabula (samērā liela - teiksim 2000 rindas, 50 kolonnas). Vienkāršības labad uzskatīsim, ka tie ir dati par kautkādiem klientiem.

Katrā no šīm rindiņām pirmajā kolonnā ir "+" bildīte uz ko nospiežot ielādējas un parādās konkrētā klienta veikto pasūtījumu saraksts (izmantoju AJAX gudrības šo datu iegūšanā). Šis pasūtījumu datu saraksts parādās kā papildus iespraustas tabulas rindiņas zem konkrētā klienta. Katram klientam ir apmēram 1-10 pasūtījumu, parasti ne vairāk.

 

Viss jau būtu baigi smuki utt. viss strādā, taču ir viena baigi nepatīkamā problēma. Es tās jaunās rindas tabulas vidū iespraužu ar JavaScript insertRow un insertCell palīdzību, kas kā izrādās nezkādēļ strādā baigi lēni, ja tabula ir tik liela (2000x50 piemēram). Līdz ar to viss pārējais softs šansē zibenīgi, bet IE kamēr iesprauž tās 1-10 rindiņas kautkur HTML tabulai pa vidu paiet gandrīz 5-10sek, kas ir galīgi garām.

 

Tad nu lūk jautājums, vai ir kāds variants vai kas cits, kā paātrināt papildus rindiņu iespraušanu samērā lielā HTML tabulā ar JavaScript. Zinu, ka varētu vēl mēģināt ar DOM metodēm (appendChild utt...), bet kautkā negribas ķēpāties - vai tas būtu to vērts pārtaisīt insertRow uz appendChild utml.?

 

Jau iepriekš paldies par palīdzību!

[andrisp]

Nez, varbūt vēl var ar innerHTML uzreiz visas atgrieztaas rindas iebāzt kaa plaint text html.

 

Un kas sarezhgjiits DOM metodees ? Vinjas tak ir vienkaarshaakas par vienkaarshu. No http://developer.mozilla.org/en/docs/DOM:element.appendChild

// Create a new paragraph element
var p = document.createElement("p");

// Append it to the end of the document body
document.body.appendChild(p);

 

PS. Kā arī iesaku apsvērt domu, ka to klientu sarakstu vajadzētu tomēr dalīt pa daļām (lapām).

Edited March 18, 2007 by andrisp

[john.brown]

Nez, varbūt vēl var ar innerHTML uzreiz visas atgrieztaas rindas iebāzt kaa plaint text html.

Nevar, tas strādās uz FF, bet uz IE nekā... Nepatīk šim tāds prasts risinājums :)

[andrisp]

Kā ta ne ? Esmu dzirdējis, ka ar innerHTML ir problēmas, bet pamatu pamatā viss workojot, un šīs problēmas (kuras uz sitiena neatceros), bet arī esot atrisināmas.

 

Atceros gan vienu lietu. Ja gribas pieadot html kontentu DOM kokam, tad vajag vispirms izveidot wraper elementu (piem., div. Bet DOM kokā vēl "nespraust"). Pieadot tam sho html konentu. Un tad šo div ievietot html DOM kokā. Tad laikam problēmu vairāk nekādu neesot.

[DarkSide]

Nez, varbūt vēl var ar innerHTML uzreiz visas atgrieztaas rindas iebāzt kaa plaint text html.

Tas nav iespējams - uz IE nestrādā un punkts (slinkums tagad meklēt linku no Microsoft lapas, kur tas bija aprakstīts).

Ideja tāda, ka IE nestrādā innerHTML uz <table>, <tr> un vēl dažiem tagiem. Uz <td> gan strādā un to arī izmantoju, bet problēma ir tieši ar to kā ātri ielikt jaunas rindas tabulā. Varianti cik saprotu ir tikai divi - insertRow vai DOM metodes (appendChild).

Un kas sarezhgjiits DOM metodees ? Vinjas tak ir vienkaarshaakas par vienkaarshu.

Nav jau briesmīgi sarežģīti, bet ķēpa sanāk ar to, ka tās iespraustās rindas TD elementos iekšā vēl ir SPAN, TEXT un vēl šis tas - teorētiski ar laiku var'but pat formu input elementi. Tad tie visi sanāk taisīt ar createElement un tā jau ir lielāka ķēpa nekā vienkārši nomainīt TD elementam innerHTML.

PS. Kā arī iesaku apsvērt domu, ka to klientu sarakstu vajadzētu tomēr dalīt pa daļām (lapām).

To varētu darīt, bet tas būtu samērā slikts variants, jo man ir nepieciešama liela, gara tabula, kur pēc savas būtības ir liels pārskats (tās daudzās kolonnas ir kalendāra dienas). Tādēļ ir svarīgi, lai useris varētu vienkārši paskrollējot tabulu uzreiz vizuāli redzēt kopējo situāciju pa visām rindām nevis lēkāt pa lapaspusēm.

[DarkSide]

Atceros gan vienu lietu. Ja gribas pieadot html kontentu DOM kokam, tad vajag vispirms izveidot wraper elementu (piem., div. Bet DOM kokā vēl "nespraust"). Pieadot tam sho html konentu. Un tad šo div ievietot html DOM kokā. Tad laikam problēmu vairāk nekādu neesot.

Droši vien tas saistīts ar ātrdarbību, jo browserim tad viss DIVs ir jāievieto weblapā vienā reizē, nevis jāievieto katrs elements atsevisķi.

[andrisp]

Droši vien tas saistīts ar ātrdarbību, jo browserim tad viss DIVs ir jāievieto weblapā vienā reizē, nevis jāievieto katrs elements atsevisķi.

 

Nope, tur bija cita lieta. Tikai nevaru atcerēties. :)

 

 

Par to innerHTML - sapratu, kā arī apdomāju, ko tev vajag, un sapratu, ka tas tev noteikti neder (jo vienkārši nav iespējams). Varbūt tev labāk to expandojamo saturu nevis vienot klāt esošajai galvenai tabulai kā papildus rindas, bet gan ievietot kā subtabulu iekš uzklikotā <td> ?

[bubu]

Par šo

Nav jau briesmīgi sarežģīti, bet ķēpa sanāk ar to, ka tās iespraustās rindas TD elementos iekšā vēl ir SPAN, TEXT un vēl šis tas - teorētiski ar laiku var'but pat formu input elementi. Tad tie visi sanāk taisīt ar createElement un tā jau ir lielāka ķēpa nekā vienkārši nomainīt TD elementam innerHTML.

Uzraksti vienkāršu wraperīti DOM fjām. Tādu, lai viegli varētu sadefinēt ko konkrēti tev tur vajag uzradīt.

Kautko līdzīgu šim te:

http://www.talrasha.com/jquery/jquery.easydom.html

vai http://mg.to/2006/02/27/easy-dom-creation-...y-and-prototype

[andrisp]

btw, šim arī var aci uzmest http://www.jackslocum.com/blog/2006/10/06/...s-or-templates/

[DarkSide]

Varbūt tev labāk to expandojamo saturu nevis vienot klāt esošajai galvenai tabulai kā papildus rindas, bet gan ievietot kā subtabulu iekš uzklikotā <td> ?

Hmm, vispār ideja interesanta, bet ir viens BET - tai iekšējā tabulā vajag visas kolonnas tieši tādā pašā platumā kā parent table, lai useris nemaz nenojauš, ka tā reāli ir cita tabula. Laikam jau to var noorganizēt ar JavaScript katrai kolonnai iebakstot precīzu cell.width (vai kautkā tā) no parent.table...

[DarkSide]

Paldies par linkiem - nočekošu rīt.

[KAC]

nu ja tev vajag tikai horizontaali iespraust, tad izdrukaa uzreiz visu, bet <tr> uzliec display none un tad uz klikskja to maini

[v3rb0]

bet jautājums, kā useris tājā 2000x50 tabulā ko var atrast? viņam 2x30" displeji iedoti, vai kā? :)

ērtāk nav pielikt filtru, lai nofiltrē kuru klientu grib redzēt, un rādīt uzreiz ar visiem pasūtījumiem - priekš kam tur lieku klikšķināšanu?

[DarkSide]

nu ja tev vajag tikai horizontaali iespraust, tad izdrukaa uzreiz visu, bet <tr> uzliec display none un tad uz klikskja to maini

Tā diemžēl nevaru darīt, jo iepriekš nezinu cik rindas būs jāiesprauž. To es uzzinu tikai tai brīdī kad veicu iespraušanu (pirms tam saņemot noteiktu datu rindu skaitu no servera izmantojot AJAX :)

bet jautājums, kā useris tājā 2000x50 tabulā ko var atrast? viņam 2x30" displeji iedoti, vai kā? :)

ērtāk nav pielikt filtru, lai nofiltrē kuru klientu grib redzēt, un rādīt uzreiz ar visiem pasūtījumiem - priekš kam tur lieku klikšķināšanu?

Tā tabula ir sakārtota pēc vienas no kolonnām, pēc kuras tad arī notiek "meklēšana" - klienta identifikatora. Userim tā tabula skrollējās uz leju - nu varbūt arī 30 ekrānus :) Tā tabula saucas "pārskats" un tāpēc tai zūd jēga, ja to sadala pa 30 atsevišķām lapām. Garajai, skrollējamajai tabula ir tas bonus, ka var ļoti ātri pabraukājot uz leju un augšu pārskatīt visus klientus (kopējo stāvokli) un ja rodas interese par kādu konkrētu, tad var atvērt tā klienta pasūtījumus, pieprasot datus no servera un iespraužot rindas kā tas minēts iepriekš...

Edited March 25, 2007 by DarkSide