ตารางข้อมูลจาวาสคริปต์สำหรับแถวนับล้าน [ปิด]

ฉันต้องการนำเสนอแถวข้อมูลจำนวนมาก (เช่น. ล้านแถว) ให้กับผู้ใช้ในกริดโดยใช้ JavaScript

ผู้ใช้ไม่ควรเห็นหน้าหรือดูข้อมูลในปริมาณที่ จำกัด ในแต่ละครั้ง

แต่ควรปรากฏว่ามีข้อมูลทั้งหมดอยู่

แทนที่จะดาวน์โหลดข้อมูลทั้งหมดในครั้งเดียวจะมีการดาวน์โหลดชิ้นส่วนขนาดเล็กเมื่อผู้ใช้เข้ามาถึง (เช่นการเลื่อนผ่านกริด)

แถวจะไม่ถูกแก้ไขผ่านส่วนหน้านี้ดังนั้นกริดแบบอ่านอย่างเดียวจึงเป็นที่ยอมรับ

มีกริดข้อมูลใดที่เขียนด้วย JavaScript สำหรับการเพจแบบไม่มีรอยต่อชนิดนี้

( ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้เขียน SlickGrid )

UPDATE นี้ได้ถูกนำมาใช้ในSlickGrid

โปรดดูhttp://github.com/mleibman/SlickGrid/issues#issue/22สำหรับการสนทนาอย่างต่อเนื่องเกี่ยวกับการทำให้ SlickGrid ทำงานด้วยจำนวนแถวที่มากขึ้น

ปัญหาคือ SlickGrid ไม่ได้จำลองแถบเลื่อนเอง - ความสูงของพื้นที่เลื่อนได้ถูกตั้งค่าเป็นความสูงทั้งหมดของแถวทั้งหมด แถวยังคงมีการเพิ่มและลบออกในขณะที่ผู้ใช้กำลังเลื่อน แต่เบราว์เซอร์ตัวเองทำเสร็จแล้ว ที่ช่วยให้มันเร็วมาก แต่ก็ราบรื่น (เหตุการณ์ onscroll ช้าฉาวโฉ่) ข้อแม้คือว่ามีข้อบกพร่อง / ข้อ จำกัด ในเครื่องยนต์ CSS ของเบราว์เซอร์ที่ จำกัด ความสูงที่อาจเกิดขึ้นขององค์ประกอบ สำหรับ IE นั้นเป็น 0x123456 หรือ 1193046 พิกเซล สำหรับเบราว์เซอร์อื่นมันสูงกว่า

มีวิธีแก้ไขปัญหาทดลองในสาขา "largenum-fix" ที่เพิ่มขีด จำกัด อย่างมีนัยสำคัญโดยการเติมพื้นที่เลื่อนที่มี "หน้า" ตั้งเป็นความสูงพิกเซล 1M แล้วใช้การวางตำแหน่งสัมพัทธ์ภายในหน้าเหล่านั้น เนื่องจากขีดจำกัดความสูงในเอนจิน CSS ดูเหมือนจะแตกต่างกันและต่ำกว่าในเอ็นจิ้นเลย์เอาต์จริงอย่างมากจึงทำให้เรามีขีด จำกัด สูงกว่ามาก

ฉันยังคงมองหาวิธีที่จะได้จำนวนไม่ จำกัด จำนวนแถวโดยไม่ต้องลดทอนประสิทธิภาพที่ SlickGrid ถืออยู่ในขณะนี้สำหรับการใช้งานอื่น ๆ

Rudiger คุณสามารถอธิบายอย่างละเอียดเกี่ยวกับวิธีการแก้ไขปัญหานี้ได้หรือไม่?

https://github.com/mleibman/SlickGrid/wiki

" SlickGrid ใช้การเรนเดอร์เสมือนเพื่อให้คุณสามารถทำงานกับหลายแสนรายการโดยไม่มีการลดประสิทธิภาพใด ๆ ในความเป็นจริงไม่มีความแตกต่างของประสิทธิภาพระหว่างการทำงานกับกริดที่มี 10 แถวกับ 100'000 แถว "

ไฮไลท์บางส่วน:

• การเลื่อนเสมือนแบบปรับได้ (จัดการหลายแสนแถว)
• ความเร็วการเรนเดอร์ที่เร็วมาก
• พื้นหลังหลังการเรนเดอร์สำหรับเซลล์ยิ่งขึ้น
• กำหนดค่าและปรับแต่งได้
• การนำทางคีย์บอร์ดแบบเต็ม
• ปรับขนาดคอลัมน์ / จัดลำดับใหม่ / แสดง / ซ่อน
• การปรับขนาดคอลัมน์ & บังคับแบบอัตโนมัติ
• ตัวฟอร์แมตและตัวแก้ไขเซลล์ที่เสียบได้
• รองรับการแก้ไขและสร้างแถวใหม่ "โดยmleibman

ได้ฟรี (ใบอนุญาต MIT) มันใช้ jQuery

กริดที่ดีที่สุดในความคิดของฉันอยู่ด้านล่าง:

• Flexigrid: http://flexigrid.info/
• jQuery Grid: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• Ingrid: http://reconstrukt.com/ingrid/
• SlickGrid http://github.com/mleibman/SlickGrid
• DataTables http://www.datatables.net/index
• ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows

3 ตัวเลือกที่ดีที่สุดของฉันคือ jqGrid, jqxGrid และ DataTables พวกเขาสามารถทำงานกับหลายพันแถวและรองรับการจำลองเสมือน

ฉันไม่ได้ตั้งใจจะเริ่มสงครามไฟ แต่สมมุติว่านักวิจัยของคุณเป็นมนุษย์คุณไม่รู้จักพวกเขาเช่นเดียวกับที่คุณคิด เพียงเพราะพวกเขามีเพตาไบต์ของข้อมูลไม่ได้ทำให้พวกเขาสามารถดูได้นับล้านระเบียนในลักษณะที่มีความหมายใด ๆ พวกเขาอาจบอกว่าพวกเขาต้องการดูบันทึกเป็นล้าน ๆ แผ่น แต่มันก็โง่ ให้นักวิจัยที่ฉลาดที่สุดทำคณิตศาสตร์พื้นฐาน: สมมติว่าพวกเขาใช้เวลา 1 วินาทีในการดูแต่ละระเบียน ในอัตราดังกล่าวจะใช้เวลา 1000000 วินาทีซึ่งทำงานได้นานกว่าหกสัปดาห์ (จาก 40 ชั่วโมงทำงานต่อสัปดาห์โดยไม่หยุดพักเพื่อทานอาหารหรือเข้าห้องน้ำ)

พวกเขา (หรือคุณ) คิดอย่างจริงจังว่าคนคนหนึ่ง (คนที่กำลังมองหาที่กริด) สามารถรวบรวมสมาธิแบบนั้นได้หรือไม่? พวกเขาทำได้ดีมากใน 1 วินาทีนั้นหรือพวกเขา (มีแนวโน้มมากกว่า) กรองสิ่งที่ไม่ต้องการหรือไม่ ฉันสงสัยว่าหลังจากดูชุดย่อย "ขนาดที่เหมาะสม" พวกเขาสามารถอธิบายตัวกรองให้คุณทราบซึ่งจะกรองข้อมูลเหล่านั้นออกโดยอัตโนมัติ

ในขณะที่ paxdiablo และ Sleeper Smith และ Lasse V Karlsen ก็บอกเป็นนัยว่าคุณ (และพวกเขา) ก็ไม่ได้คิดตามข้อกำหนด ในอีกด้านหนึ่งตอนนี้คุณได้พบ SlickGrid แล้วฉันมั่นใจว่าความต้องการตัวกรองเหล่านั้นจะชัดเจนขึ้นทันที

ฉันสามารถพูดได้ด้วยความมั่นใจที่ดีงามว่าคุณไม่จำเป็นต้องแสดงข้อมูลเป็นล้านแถวแก่ผู้ใช้

ไม่มีผู้ใช้ในโลกที่จะสามารถเข้าใจหรือจัดการชุดข้อมูลนั้นได้แม้ว่าคุณจะสามารถดึงมันออกมาได้ในทางเทคนิคแล้วคุณก็จะไม่แก้ปัญหาใด ๆ ที่ผู้ใช้รู้

แต่ฉันจะมุ่งเน้นไปที่สาเหตุที่ผู้ใช้ต้องการดูข้อมูล ผู้ใช้ไม่ต้องการเห็นข้อมูลเพียงเพื่อดูข้อมูลมักจะมีคำถามที่ถูกถาม หากคุณมุ่งเน้นที่จะตอบคำถามเหล่านั้นแทนคุณจะเข้าใกล้สิ่งที่ช่วยแก้ปัญหาที่เกิดขึ้นจริง

ฉันขอแนะนำ Ext JS Grid พร้อมกับคุณสมบัติมุมมองบัฟเฟอร์

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

(ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้เขียน w2ui)

เมื่อเร็ว ๆ นี้ฉันได้เขียนบทความเกี่ยวกับวิธีการใช้กริด JavaScript ที่มี 1 ล้านบันทึก ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ) ฉันค้นพบว่าในที่สุดมีข้อ จำกัด 3 ประการที่ป้องกันไม่ให้สูงขึ้น:

1. ความสูงของ div มีขีด จำกัด (สามารถเอาชนะได้โดยการเลื่อนเสมือน)
2. การดำเนินการเช่นการเรียงลำดับและการค้นหาเริ่มช้าลงหลังจากมีการบันทึก 1 ล้านครั้ง
3. RAM ถูก จำกัด เนื่องจากข้อมูลถูกเก็บไว้ในอาร์เรย์ JavaScript

ฉันได้ทดสอบกริดกับ 1 ล้านบันทึก (ยกเว้น IE) และทำงานได้ดี ดูบทความสำหรับการสาธิตและตัวอย่าง

dojox.grid.DataGridเสนอนามธรรม JS สำหรับข้อมูลเพื่อให้คุณสามารถเชื่อมโยงกับแบ็กเอนด์ต่าง ๆ กับร้านค้า dojo.data ที่ให้มาหรือเขียนของคุณเอง คุณจะต้องมีหนึ่งที่รองรับการเข้าถึงแบบสุ่มสำหรับบันทึกจำนวนมากนี้ DataGrid ยังให้การเข้าถึงอย่างเต็มรูปแบบ

แก้ไขดังนั้นนี่คือลิงก์ไปยังบทความของ Matthew Russellที่ควรให้ตัวอย่างที่คุณต้องการโดยดู dojox.grid หลายล้านรายการ โปรดทราบว่ามันใช้กริดเวอร์ชันเก่า แต่แนวคิดเหมือนกันมีเพียงการปรับปรุง API ที่เข้ากันไม่ได้บางอย่างเท่านั้น

โอ้และมันก็โอเพนซอร์สฟรี

ฉันใช้ปลั๊กอิน jQuery Gridมันดีมาก

สาธิตการใช้งาน

ต่อไปนี้คือการเพิ่มประสิทธิภาพสองสามประการที่คุณสามารถนำมาใช้เพื่อเร่งความเร็ว แค่คิดออกมาดัง ๆ

เนื่องจากจำนวนแถวสามารถเป็นล้านคุณจะต้องการระบบแคชสำหรับข้อมูล JSON จากเซิร์ฟเวอร์ ฉันนึกภาพไม่ออกว่าใครที่ต้องการดาวน์โหลด X ล้านรายการทั้งหมด แต่ถ้าพวกเขาทำมันจะเป็นปัญหา นี้การทดสอบเล็ก ๆ น้อย ๆเกี่ยวกับ Chrome สำหรับอาร์เรย์ใน 20M + จำนวนเต็มเกิดปัญหาในเครื่องของฉันอย่างต่อเนื่อง

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

คุณสามารถใช้LRUหรืออัลกอริธึมการแคชอื่นและมีขอบเขตบนว่าคุณต้องการแคชข้อมูลมากแค่ไหน

สำหรับเซลล์ตารางเองฉันคิดว่าการสร้าง / ทำลายโหนด DOM อาจมีราคาแพง แต่คุณสามารถกำหนดจำนวนเซลล์ X ล่วงหน้าได้และเมื่อใดก็ตามที่ผู้ใช้เลื่อนไปที่ตำแหน่งใหม่ฉีดข้อมูล JSON ลงในเซลล์เหล่านี้ แถบเลื่อนแทบจะไม่มีความสัมพันธ์โดยตรงกับจำนวนพื้นที่ (ความสูง) ที่ต้องการเพื่อแสดงชุดข้อมูลทั้งหมด คุณสามารถตั้งค่าความสูงของคอนเทนเนอร์ตารางโดยพลการพูด 5,000px และแม็พกับจำนวนแถวทั้งหมด ตัวอย่างเช่นหากความสูงของคอนเทนเนอร์เป็น 5,000px และมีทั้งหมด 10M แถวดังนั้นstarting row ≈ (scroll.top/5000) * 10Mที่จะscroll.topแสดงระยะทางเลื่อนจากด้านบนของภาชนะ ขนาดเล็กสาธิตที่นี่

ในการตรวจจับเมื่อต้องการขอข้อมูลเพิ่มเติมวัตถุควรทำหน้าที่เป็นสื่อกลางที่ฟังการเลื่อนเหตุการณ์ วัตถุนี้ติดตามว่าผู้ใช้เลื่อนเร็วแค่ไหนและเมื่อดูเหมือนว่าผู้ใช้กำลังชะลอตัวลงหรือหยุดทำงานอย่างสมบูรณ์ทำให้คำขอข้อมูลสำหรับแถวที่เกี่ยวข้อง การดึงข้อมูลในลักษณะนี้หมายความว่าข้อมูลของคุณจะถูกแยกส่วนดังนั้นแคชควรได้รับการออกแบบโดยคำนึงถึงสิ่งนั้น

เบราว์เซอร์ยัง จำกัด การเชื่อมต่อขาออกสูงสุดสามารถเล่นเป็นส่วนสำคัญ ผู้ใช้อาจเลื่อนไปยังตำแหน่งที่แน่นอนซึ่งจะเริ่มการร้องขอ AJAX แต่ก่อนที่ผู้ใช้จะสามารถเลื่อนไปยังส่วนอื่น ๆ ได้ หากเซิร์ฟเวอร์ไม่ตอบสนองเพียงพอคำขอจะเข้าคิวและแอปพลิเคชันจะไม่ตอบสนอง คุณสามารถใช้ตัวจัดการการร้องขอผ่านการร้องขอทั้งหมดที่ถูกกำหนดเส้นทางและสามารถยกเลิกการร้องขอที่ค้างอยู่เพื่อให้มีที่ว่าง

ฉันรู้ว่ามันเป็นคำถามเก่า แต่ก็ยังมี .. นอกจากนี้ยังมีdhtmlxGridที่สามารถจัดการกับแถวนับล้าน มีการสาธิตพร้อม 50,000 แถวแต่จำนวนแถวที่สามารถโหลด / ประมวลผลในกริดนั้นไม่ จำกัด

คำเตือน: ฉันมาจากทีม DHTMLX

ฉันแนะนำให้คุณอ่าน

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

Disclaimer: ฉันหนักใช้YUI DataTable โดยไม่ต้องปวดหัวไม่เป็นเวลานาน มันทรงพลังและมั่นคง สำหรับความต้องการของคุณสามารถใช้ScrollingDataTable suports ช

• x เลื่อน
• Y-เลื่อน
• XY-เลื่อน
• กลไกเหตุการณ์ที่ทรงพลัง

สำหรับสิ่งที่คุณต้องการผมคิดว่าคุณต้องการคือtableScrollEvent API ของมันบอกว่า

ยิงเมื่อ DataTable การเลื่อนแบบตายตัวมีการเลื่อน

เนื่องจากแต่ละ DataTable ใช้แหล่งข้อมูลคุณสามารถตรวจสอบข้อมูลผ่าน tableScrollEvent พร้อมกับขนาดลูปการเรนเดอร์เพื่อเติมข้อมูล ScrollingDataTable ตามความต้องการของคุณ

ขนาดลูปการแสดงผลพูดว่า

ในกรณีที่มีความต้องการ DataTable ของคุณเพื่อแสดงความสมบูรณ์ของชุดที่มีขนาดใหญ่มากของข้อมูลการตั้งค่า renderLoopSize สามารถช่วยในการจัดการการแสดงผลเบราว์เซอร์ DOM เพื่อให้หัวข้อ UI ไม่ได้รับการล็อคขึ้นบนโต๊ะขนาดใหญ่มาก ค่าใด ๆ ที่มากกว่า 0 จะทำให้การเรนเดอร์ DOM ถูกเรียกใช้ในเชน setTimeout () ที่แสดงจำนวนแถวที่ระบุในแต่ละลูป ควรกำหนดมูลค่าที่เหมาะสมต่อการใช้งานเนื่องจากไม่มีกฎที่ยากและรวดเร็วเพียงแนวทางทั่วไปเท่านั้น:

• โดยดีฟอลต์ renderLoopSize คือ 0 ดังนั้นแถวทั้งหมดจะถูกเรนเดอร์ในลูปเดียว renderLoopSize> 0 เพิ่มโอเวอร์เฮดดังนั้นให้ใช้อย่างรอบคอบ
• หากชุดข้อมูลของคุณก็พอขนาดใหญ่ (จำนวนแถว X จำนวนคอลัมน์ X รูปแบบซับซ้อน) ที่ผู้ใช้มีประสบการณ์ความล่าช้าในการแสดงผลภาพและ / หรือจะทำให้สคริปต์เพื่อแขวนพิจารณาตั้ง renderLoopSize
• renderLoopSize ที่ต่ำกว่า 50 อาจไม่คุ้มค่า renderLoopSize> 100 น่าจะดีกว่า
• ชุดข้อมูลอาจไม่ถือว่าใหญ่พอเว้นแต่จะมีหลายร้อยและหลายร้อยแถว
• การมี renderLoopSize> 0 และ <ผลรวมแถวทำให้ตารางถูกเรนเดอร์ในหนึ่งลูป (เหมือนกับ renderLoopSize = 0) แต่มันยังทริกเกอร์การทำงานเช่นการสตริปแถว post-render ที่จะจัดการจากเธรด setTimeout แยกต่างหาก

ตัวอย่างเช่น

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM> เป็นเพียงหนึ่งเดียวแหล่งข้อมูล มันสามารถเป็น JSON, JSFunction, XML และแม้กระทั่งองค์ประกอบ HTML เดียว

ที่นี่คุณสามารถดูบทแนะนำแบบง่ายที่จัดทำโดยฉัน ระวังไม่มีปลั๊กอิน DATA_TABLE อื่นรองรับการคลิกเดี่ยวและคู่ในเวลาเดียวกัน YUI DataTable ช่วยให้คุณ และยิ่งกว่านั้นคุณสามารถใช้กับ JQuery ได้โดยไม่ต้องปวดหัว

ตัวอย่างบางส่วนคุณสามารถดู

• รายการสินค้า

อย่าลังเลที่จะถามเกี่ยวกับสิ่งอื่นที่คุณต้องการเกี่ยวกับ YUI DataTable

ความนับถือ,

ฉันไม่เห็นจุดสำหรับ jqGrid คุณสามารถใช้ฟังก์ชันการเลื่อนเสมือน:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

แต่หลังจากนั้นอีกนับล้านแถวที่มีการกรองสามารถทำได้:

http://www.trirand.net/aspnetmvc/grid/performancelinq

ฉันไม่เห็นจุด "ราวกับว่าไม่มีหน้าเว็บ" แต่ฉันหมายความว่า ... ไม่มีวิธีที่จะแสดง 1,000,000 แถวในเบราว์เซอร์พร้อมกัน - นี่คือ HTML ดิบ 10MB ฉันไม่เห็นอะไรเลย สาเหตุที่ผู้ใช้ไม่ต้องการเห็นหน้า

อย่างไรก็ตาม...

วิธีที่ดีที่สุดที่ฉันคิดได้ก็คือโหลดข้อมูลในรูปแบบ json สำหรับทุกการเลื่อนหรือการ จำกัด ก่อนที่การเลื่อนจะสิ้นสุด json สามารถแปลงเป็นวัตถุได้อย่างง่ายดายและด้วยเหตุนี้แถวของตารางจึงสามารถสร้างได้อย่างง่ายดายโดยไม่เป็นการรบกวน

ฉันอยากจะแนะนำเปิดเปอร์โตริโก เป็นการยากที่จะนำไปใช้ในการเริ่มต้น แต่เมื่อคุณคว้ามันคุณจะไม่หันกลับมามอง

ฉันรู้ว่าคำถามนี้มีอายุไม่กี่ปี แต่ตอนนี้ jqgrid รองรับการเลื่อนเสมือน:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

แต่เมื่อปิดการใช้งานเลขหน้า

ฉันขอแนะนำ sigma grid, sigma grid ได้ฝังคุณสมบัติการเพจซึ่งสามารถรองรับได้หลายล้านแถว และคุณอาจต้องใช้เพจจิ้งระยะไกลด้วย ดูตัวอย่าง http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

ดูที่ dGrid:

https://dgrid.io/

ฉันยอมรับว่าผู้ใช้จะไม่เคยต้องดูข้อมูลหลายล้านแถวในคราวเดียว แต่ dGrid สามารถแสดงข้อมูลได้อย่างรวดเร็ว (เป็นหน้าจอพร้อมกัน)

อย่าต้มมหาสมุทรเพื่อชงชาสักถ้วย