Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Izdanje o velikoj tabeli (Big Table)


Od Jin, 01-08-09 /

Moj prijatelj / bivši kolega Sem, “čudo od dečaka” kasno noću mi je slao AIM poruke, koje se sastoje od samo tri slova, "M.F.R." Zbog toga bi mi prošla jeza po kičmi, a ja bih se sklupčao na podu u fetalni položaj i plakao non- stop.

U redu, malo preterujem, a i Sam to više ne radi.

"MFR" je skraćenica za "Mesečni izveštaj prognoze." To je bio jedan od mnogih modula ogromnih intranet web aplikacija na kojima smo radili pre nekoliko godina. Kao što sam naziv implicira, to je izveštaj. Pre ulaska u stvarni izveštaj na ekranu, korisnik može izabrati neke kriterijume, kao što su datum, opseg proizvoda, itd. U zavisnosti od izbora, izveštaj može imati do šezdeset kolona i na hiljade redova. To je bio priličan izazov kako za pozadinu tako i za i čeoni program. Prvobitno sam ga napravio pomoću serverske strane Excel API, i bacio ga na frontend (čeoni program) kao deo Excel liste. U drugoj verziji, sam ga napravio kao HTML tabelu, sa Excel opcijom izvoza. U trećoj verziji, sam odbacio HTML i prebacio se na Cristal Report, u verziji 3.5 koji je postao aktivan izveštaj. U četvrtoj verziji sam prepisao celu aplikaciju kao .NET klijent aplikaciju, uz deo izveštaja koji je bio Excel ponovo. U petoj verziji, pa nije bilo pete verzije. Ceo projekat je dobio spoljne izvore do Indije i ekipa je raspuštena. Ali, to je blog za neki drugi dan.

Problem velike tabele (Big Table)

U savršenom svetu web programerskog života, tabela sa podacima bi imala nekoliko kolona i redova, tako da bi se savršeno uklopila u naš sadržaj oblasti i sa ostatkom UI elementa bez problema. Ali u stvarnosti, tabela sa podacima može biti veoma velika i ružna, posebno u finansijskim web aplikacijama.



Problem je kada tabela postane toliko velika da se više ne uklapa u prozor. Prozor može da bude cela površina prozora pregledača, ili kontejner oblast, unutar prozora pretraživača (npr. klizeći DIV). Da biste videli ostatak podataka korisnik će morati da se kreće. Međutim, to prouzrokuje situaciju u kojoj korisnik izgubi iz vida zaglavlje kolone i prvu kolonu.

Drugi problem je performansa. Velikim zapisima je potrebno vreme da se generise na pozadini, pa čak još duže da se prikaže na frontendu.

Pristup

Misim da je naša prva uloga kao UI programera / dizajnera, rešavanje problema. To znači da rešenje ne leži uvek u HTML / CSS / JS- u. Gledajući na situaciju na početku, da li je HTML najbolji medijum? Moram da kažem ne, to je razlog zašto sam se odlučio prvo za Excel. Koristi od upotrebe Excela:
  • Odličan sa formatom tabele na ekranu.
  • Omogućava korisnicima dodatne manipulacije kao što su formule i zamrznute panele.
  • Štampanje većinom prijateljsko, korisnik može definisati oblast štampanja.
  • Brzo izvođenje.
Međutim, postoje nedostaci u korišćenju Excela:
  • Korisnici moraju imati instaliran Excel klijent da bi videli listove (Iako to nije preveliki problem za intranet aplikacije)

  • Ne dozvoljava manipulacije podacima (nije lako barem, osim ako pravite prilagodjeni VBA).
Hajde da pogledamo druge alternative.

Active Reports (Aktivni izveštaji) i Crystal Reports (Kristalni izveštaji) su dva popularna preduzimljiva alata izveštavanja. Koristio sam oba preko .NET- a (.Net). Oba softvera imaju RIA izveštaje gledalaca pomoću ActiveX- a.

Prednosti:
  • Brzo vreme izvođenja.

  • Dozvoljava paginaciju.

  • Omogućava prilagođeni šablon formata izveštaja.
Protiv:
  • Naknadni troškovi.

  • Neprijateljsko štampanje.

  • Ne dozvoljava manipulaciju podataka, samo pogled.
Naravno, pristupi koje sam naveo samo su za Microsoft prodavnice. Mogu postojati i druga ne-MS rešenja sa kojima ja nisam upoznat.

Excel je moj omiljeni za sad. Međutim, postoje trenuci kada ste zaglavljeni radeći na HTML način, o čemu se radi u ostatku ovog članka.

HTML rešenja

Imamo tri problema: vertikalne, horizontalne i performanse.

Vertikalne je najlakše rešiti. Prvo, možemo da (lock) zaključamo zaglavlja kolona, tako da kada korisnik skroluje na dole ipak može da vidi podatke koje gleda.

Kada tabela ima na stotine ili hiljade redova, najbolje je da ih ne prikaže sve odjednom. Ne samo da su performanse loše, nego je takođe prilično besmislena upotrebljivost POV- a. Paginacija je najčešće korišćena. Jedan od najboljih primera paginacije u kombinaciji sa AJAX- om koju sam video, vrši stranica “Blizzard’s World of Warcraft Armory". Karakteristika “filtriranje”, omogućava korisniku da brzo pronađe podatke u letu.



Drugi metod bez upotrebe paginacije, je da učita samo dovoljno redova da prepopuni oblast prozora. Onda kada korisnik skroluje malo više, on učitava dodatne redove pomoću AJAX- a. Google čitač to radi prilikom utovara fidova. Osećam da je ovo najbolji način za prednje učitavanje performansi. Međutim, to ne može biti izvodljivo gde korisnik treba brzo da vidi dodatne podatke.



Problem horizontalnog pomeranja, nažalost je nešto što nisam bio u mogućnosti da rešim, uprkos mnogim istraživanjima. U idealnom slučaju, trebalo bi da budemo u stanju da zaključamo prvu kolonu (obično identifikator kolonu), pa kad pomera bočno, korisnik može lako identifikovati koji red gleda. Od sada, ne možemo lako da zamrznemo kolonu. Tokom mog istraživanja, naleteo sam na nekoliko sajtova koji su došli blizu, ali svi su imali nedostatke.
  • Lock or Freeze Table Columns (Zaključavanje ili zamrzavanje kolona tabele) - Odličan rad od Brett Merkey- a. Najbliže je stigao. Nažalost, on koristi IE izraz, što znači da neće raditi u Firefox- u ili Safari- ju. Međutim, ako pravite intranet aplikaciju gde je IE standardni pretraživač, to je jedino rešenje za koje znam.

  • Smart Grid, an Ajax-driven table - Odrađuje donekle posao, međutim, on nema kontrolu nad podacima visine ćelije, ako se podaci prostiru na više linija.

  • Jquery driven table - Ovaj koristi ugnežđene tabele i “Jquery”. To je prilično dobar performans.

  • xTable - Efekat je dobar, međutim, ovo je urađeno gnežđenjem više tabela.

  • Freeze Panes - Opet, ogromne ugnežđene tabele. Nije previše realno za realne aplikacije.

  • Google Docs - Tabela u Google Docs- u ponaša se vrlo slično kao Excel. Međutim, to je uradio DIVs. Iako je ovo održivo rešenje, mislim da su troškovi razvoja preveliki.
Moj predlog

Mislim da je najbolji način da pretraživač ima mogućnost zaključavanja kolone prirodno. Nažalost za sada, COL i COLGROUP imaju vrlo malu podršku, osim nekoliko few CSS atributa. U idealnom slučaju, zamrzavanje kolone, bih voleo da bude lako kao:

COL.freeze, COLGROUP.freeze {
   position: fixed/relative; /* lock */
   display: none/inline/block etc /*so we can toggle */
   left: x;
   stacking-order: n; /* allows multiple freezing */
}

Čitao sam o HTML5 i CSS3 specifikacijama. Ne vidim još uvek nikakav dokaz, niti da će doći do bilo kakvog poboljšanja COL /COLGROUP- e u bliskoj budućnosti. Neko može tvrditi da je to i previše, posle svega, HTML / CSS samo je za prezentaciju. Ali, videvši napredne selektore u CSS3, verujem da je konsenzus da će CSS zameniti neke od resenja koje su trenutno urađene u Javascript- u.

Ako imate bilo kakve predloge / rešenja za ovaj problem, voleo bih da čujem od vas.




Published (Last edited): 16-12-2012 , source: http://www.8164.org/the-big-table-issue/