Saya perlu menyajikan sejumlah besar baris data (mis. Jutaan baris) kepada pengguna dalam kotak menggunakan JavaScript.
Pengguna seharusnya tidak melihat halaman atau hanya melihat data dalam jumlah terbatas pada suatu waktu.
Sebaliknya, akan muncul bahwa semua data tersedia.
Alih-alih mengunduh data sekaligus, potongan kecil diunduh saat pengguna datang kepada mereka (mis. Dengan menggulir melalui grid).
Baris tidak akan diedit melalui ujung depan ini, jadi grid hanya baca dapat diterima.
Kisi data apa, yang ditulis dalam JavaScript, ada untuk jenis paging tanpa batas ini?
Jawaban:
( Penafian: Saya penulis SlickGrid )
PEMBARUAN Ini sekarang telah diterapkan di SlickGrid .
Silakan lihat http://github.com/mleibman/SlickGrid/issues#issue/22 untuk diskusi berkelanjutan tentang membuat SlickGrid berfungsi dengan jumlah baris yang lebih banyak.
Masalahnya adalah bahwa SlickGrid tidak memvirtualisasikan scrollbar itu sendiri - ketinggian area yang dapat digulir diatur ke tinggi total semua baris. Baris masih ditambahkan dan dihapus saat pengguna sedang menggulir, tetapi pengguliran itu sendiri dilakukan oleh browser. Itu memungkinkan untuk menjadi sangat cepat namun lancar (acara onroll sangat terkenal lambat). Peringatannya adalah bahwa ada bug / batas dalam mesin CSS browser yang membatasi ketinggian potensial suatu elemen. Untuk IE, itu adalah 0x123456 atau 1193046 piksel. Untuk browser lain, ini lebih tinggi.
Ada solusi eksperimental di cabang "fix-fix" yang meningkatkan batas itu secara signifikan dengan mengisi area yang dapat digulir dengan "halaman" yang diatur ke ketinggian 1M piksel dan kemudian menggunakan posisi relatif di dalam halaman tersebut. Karena batas ketinggian di mesin CSS tampaknya berbeda dan jauh lebih rendah daripada di mesin tata letak yang sebenarnya, ini memberi kita batas atas yang jauh lebih tinggi.
Saya masih mencari cara untuk mendapatkan jumlah baris yang tidak terbatas tanpa melepaskan keunggulan kinerja yang saat ini dimiliki SlickGrid atas implementasi lainnya.
Rudiger, dapatkah Anda menjelaskan bagaimana Anda memecahkan ini?
sumber
https://github.com/mleibman/SlickGrid/wiki
" SlickGrid menggunakan rendering virtual untuk memungkinkan Anda bekerja dengan mudah dengan ratusan ribu item tanpa penurunan kinerja. Bahkan, tidak ada perbedaan dalam kinerja antara bekerja dengan grid dengan 10 baris versus 100'000 baris. "
Beberapa hal penting:
Ini gratis (lisensi MIT). Ini menggunakan jQuery.
sumber
data.length = Math.min(131000, parseInt(resp.total));
... Dan, tentu saja, kode itu karena suatu alasan :(data
array. Ini adalah kludge, tetapi saya memiliki respons yang mengisibigdata
array, dandata
tarikan yang lebih kecil daribigdata
array. Sisa program menggunakan larik data yang lebih kecil, kecuali untuk pengukuran bilah gulir dan beberapa tempat lain yang sekarang tidak terikat untuk sejumlah besar baris. Secara keseluruhan, jauh lebih mudah daripada menulis sendiri.Grid terbaik menurut saya adalah di bawah ini:
3 pilihan terbaik saya adalah jqGrid, jqxGrid dan DataTables. Mereka dapat bekerja dengan ribuan baris dan mendukung virtualisasi.
sumber
Saya tidak bermaksud memulai perang api, tetapi dengan anggapan peneliti Anda adalah manusia, Anda tidak mengenal mereka sebaik yang Anda pikirkan. Hanya karena mereka memiliki petabyte data tidak membuat mereka mampu melihat jutaan catatan dengan cara apa pun yang berarti. Mereka mungkin mengatakan ingin melihat jutaan rekaman, tapi itu konyol. Mintalah para peneliti Anda yang paling cerdas melakukan beberapa matematika dasar: Asumsikan mereka menghabiskan 1 detik melihat setiap catatan. Pada tingkat itu, akan dibutuhkan 10.00000 detik, yang bekerja lebih dari enam minggu (40 jam kerja-minggu tanpa istirahat untuk makanan atau toilet).
Apakah mereka (atau Anda) serius berpikir satu orang (yang melihat grid) dapat mengumpulkan konsentrasi semacam itu? Apakah mereka benar-benar menyelesaikan banyak hal dalam 1 detik, atau apakah mereka (lebih mungkin) menyaring hal-hal yang tidak diinginkan? Saya menduga bahwa setelah melihat subset "berukuran cukup", mereka dapat mendeskripsikan filter untuk Anda yang akan secara otomatis menyaring catatan tersebut.
Seperti paxdiablo dan Sleeper Smith dan Lasse V Karlsen juga menyiratkan, Anda (dan mereka) belum memikirkan persyaratannya. Di sisi atas, sekarang Anda telah menemukan SlickGrid, saya yakin kebutuhan untuk filter-filter itu menjadi jelas.
sumber
Ctrl+F
untuk apa. Alternatif (paging, pencarian situs web) jauh lebih buruk. Lihat saja StackOverflow ketika mencoba menelusuri pertanyaan atau jawaban, Reddit untuk menggulir melalui riwayat komentar pengguna. Penyortiran dan pencarian instan memberikan kekuatan yang dimiliki Windows Explorer, tetapi kekurangan situs web.Saya dapat mengatakan dengan kepastian yang cukup baik bahwa Anda serius tidak perlu menunjukkan jutaan baris data kepada pengguna.
Tidak ada pengguna di dunia yang akan dapat memahami atau mengelola kumpulan data itu sehingga bahkan jika Anda secara teknis berhasil melakukannya, Anda tidak akan memecahkan masalah yang diketahui untuk pengguna itu.
Sebagai gantinya saya akan fokus pada mengapa pengguna ingin melihat data. Pengguna tidak ingin melihat data hanya untuk melihat data, biasanya ada pertanyaan yang diajukan. Jika Anda berfokus untuk menjawab pertanyaan-pertanyaan itu, maka Anda akan lebih dekat dengan sesuatu yang memecahkan masalah aktual.
sumber
Saya merekomendasikan Ext JS Grid dengan fitur Buffered View.
http://www.extjs.com/deploy/dev/examples/grid/buffer.html
sumber
(Penafian: Saya adalah penulis w2ui)
Saya baru-baru ini menulis sebuah artikel tentang bagaimana menerapkan JavaScript grid dengan 1 juta catatan ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ). Saya menemukan bahwa pada akhirnya ada 3 batasan yang mencegah dari mengambilnya lebih tinggi:
Saya telah menguji grid dengan 1 juta catatan (kecuali IE) dan kinerjanya baik. Lihat artikel untuk demo dan contoh.
sumber
dojox.grid.DataGrid menawarkan abstraksi JS untuk data sehingga Anda dapat menghubungkannya ke berbagai backend dengan toko dojo.data yang disediakan atau menulis sendiri. Anda pasti membutuhkan satu yang mendukung akses acak untuk banyak catatan ini. DataGrid juga menyediakan aksesibilitas penuh.
Sunting jadi di sini adalah tautan ke artikel Matthew Russell yang seharusnya memberikan contoh yang Anda butuhkan, melihat jutaan catatan dengan dojox.grid. Perhatikan bahwa ia menggunakan versi grid yang lama, tetapi konsepnya sama, hanya ada beberapa peningkatan API yang tidak kompatibel.
Oh, dan ini open source sepenuhnya gratis.
sumber
Saya menggunakan Plugin jQuery Grid , itu bagus.
Demo
sumber
Berikut adalah beberapa optimasi yang dapat Anda terapkan untuk mempercepat. Hanya berpikir keras.
Karena jumlah baris dapat mencapai jutaan, Anda perlu sistem caching hanya untuk data JSON dari server. Saya tidak bisa membayangkan ada orang yang ingin mengunduh semua X juta item, tetapi jika mereka melakukannya, itu akan menjadi masalah. Tes kecil ini di Chrome untuk array pada 20M + integer crash di mesin saya terus-menerus.
Anda bisa menggunakan LRU atau algoritma caching lainnya dan memiliki batas atas berapa banyak data yang ingin Anda cache.
Untuk sel tabel sendiri, saya pikir membangun / menghancurkan node DOM bisa mahal. Alih-alih, Anda bisa menentukan sebelumnya jumlah sel X, dan kapan pun pengguna menggulir ke posisi baru, masukkan data JSON ke dalam sel-sel ini. Bilah gulir hampir tidak memiliki hubungan langsung dengan berapa banyak ruang (tinggi) yang diperlukan untuk mewakili seluruh dataset. Anda bisa secara sewenang-wenang mengatur ketinggian penampung tabel, katakan 5000px, dan petakan itu ke jumlah baris. Misalnya, jika ketinggian wadah adalah 5000px dan ada total baris 10M, maka di
starting row ≈ (scroll.top/5000) * 10M
manascroll.top
mewakili jarak gulir dari bagian atas wadah. Demo kecil di sini .Untuk mendeteksi kapan meminta lebih banyak data, idealnya sebuah objek harus bertindak sebagai mediator yang mendengarkan gulir peristiwa. Objek ini melacak seberapa cepat pengguna menggulir, dan ketika sepertinya pengguna melambat atau benar-benar berhenti, membuat permintaan data untuk baris yang sesuai. Mengambil data dengan cara ini berarti data Anda akan terfragmentasi, jadi cache harus dirancang dengan mempertimbangkan hal itu.
Juga batas browser pada koneksi keluar maksimum dapat memainkan bagian penting. Seorang pengguna dapat menggulir ke posisi tertentu yang akan memecat permintaan AJAX, tetapi sebelum itu selesai pengguna dapat menggulir ke bagian lain. Jika server tidak cukup responsif permintaan akan antri dan aplikasi akan terlihat tidak responsif. Anda bisa menggunakan manajer permintaan melalui mana semua permintaan dialihkan, dan itu dapat membatalkan permintaan yang tertunda untuk membuat ruang.
sumber
Saya tahu ini pertanyaan lama tapi tetap saja .. Ada juga dhtmlxGrid yang dapat menangani jutaan baris. Ada demo dengan 50.000 baris tetapi jumlah baris yang dapat dimuat / diproses dalam grid tidak terbatas.
Penafian: Saya dari tim DHTMLX.
sumber
Saya sarankan Anda membaca ini
http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
sumber
Penafian: Saya banyak menggunakan YUI DataTable tanpa sakit kepala untuk waktu yang lama . Ia kuat dan stabil. Untuk kebutuhan Anda, Anda dapat menggunakan suport ScrollingDataTable yang
Untuk apa yang Anda butuhkan, saya pikir Anda inginkan adalah tableScrollEvent . API-nya mengatakan
Karena setiap DataTable menggunakan DataSource, Anda dapat memantau datanya melalui tableScrollEvent bersama dengan ukuran render loop untuk mengisi ScrollingDataTable Anda sesuai dengan kebutuhan Anda.
Render ukuran lingkaran kata
Misalnya
<WHERE_DOES_THE_DATA_COME_FROM> hanya satu DataSource . Ini bisa berupa JSON, JSFunction, XML dan bahkan elemen HTML tunggal
Di sini Anda dapat melihat tutorial Sederhana, yang disediakan oleh saya. Ketahuilah tidak ada pluglin DATA_TABLE lainnya yang mendukung klik tunggal dan ganda pada saat yang sama. YUI DataTable memungkinkan Anda. Dan banyak lagi, Anda dapat menggunakannya bahkan dengan JQuery tanpa sakit kepala
Beberapa contoh, bisa Anda lihat
Jangan ragu untuk bertanya tentang hal lain yang Anda inginkan tentang YUI DataTable.
salam,
sumber
Saya agak gagal melihat intinya, untuk jqGrid Anda dapat menggunakan fungsi gulir virtual:
http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling
tetapi sekali lagi, jutaan baris dengan penyaringan dapat dilakukan:
http://www.trirand.net/aspnetmvc/grid/performancelinq
Saya benar-benar gagal melihat titik "seolah-olah tidak ada halaman" meskipun, maksud saya ... tidak ada cara untuk menampilkan 1.000.000 baris sekaligus di browser - ini adalah 10MB HTML mentah, saya agak gagal melihat mengapa pengguna tidak ingin melihat halaman.
Bagaimanapun...
sumber
Pendekatan terbaik yang bisa saya pikirkan adalah dengan memuat potongan data dalam format json untuk setiap gulir atau batas tertentu sebelum gulir berakhir. json dapat dengan mudah dikonversi menjadi objek dan karenanya baris tabel dapat dibangun dengan mudah tanpa mengganggu
sumber
Saya sangat merekomendasikan Open rico . Sulit untuk diterapkan di awal, tetapi begitu Anda meraihnya, Anda tidak akan pernah melihat ke belakang.
sumber
Saya tahu pertanyaan ini sudah berumur beberapa tahun, tetapi sekarang jqgrid mendukung pengguliran virtual:
http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php
tetapi dengan pagination dinonaktifkan
sumber
Saya sarankan sigma grid, sigma grid telah menyematkan fitur paging yang dapat mendukung jutaan baris. Dan juga, Anda mungkin perlu paging jarak jauh untuk melakukannya. lihat demo http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html
sumber
Lihatlah dGrid:
https://dgrid.io/
Saya setuju bahwa pengguna tidak akan pernah, pernah perlu melihat jutaan baris data sekaligus, tetapi dGrid dapat menampilkannya dengan cepat (satu layar penuh pada suatu waktu).
Jangan merebus lautan untuk membuat secangkir teh.
sumber