ตาราง JS ข้อมูลหลายหมื่นข้อมูลจะถูกโหลดทันที
ในการใช้งานจริงของ AJAX กำลังโหลดข้อมูลแบบไดนามิกทุกคนใช้วิธีคิด: สร้างแถวข้อมูล
ดังนั้นหากจำนวนมีขนาดใหญ่และต้องโหลดข้อมูลพร้อมกันเบราว์เซอร์จะติดอยู่ครึ่งวัน
แรงบันดาลใจจาก DataGrid Control ของ Flex ใน DataGrid Control ของ Flex วิธีการแสดงข้อมูลไม่ได้สร้างแถวให้มากที่สุดเท่าที่จะมีมันจะสร้างขึ้นได้มากที่สุดในช่วงยี่สิบหรือยี่สิบแถวที่คุณเห็นในอินเทอร์เฟซ (สมมติว่ามันเป็นเช่นกัน ข้อมูลจำนวนมากแถวข้อมูล n ที่คุณควรเห็นจะถูกดึงออกมาจากข้อมูลในระหว่างกระบวนการเลื่อนและซ้ำในการควบคุมแถว N ที่สร้างขึ้น
กล่าวอีกนัยหนึ่งในการควบคุม DataGrid ของ Flex เราเห็นเฉพาะการควบคุม N-Line เท่านั้น แต่ข้อมูลที่พวกเขาแสดงจะถูกกรองตามสถานะ Scroll Bar
ดังนั้นหากมีการใช้งานใน JS โดยใช้วิธีการที่คล้ายกันนั้นมีข้อมูลหลายหมื่นชิ้นและอาจเป็นเพียงไม่กี่โหลการสร้าง DOM ซึ่งจะเร็วขึ้นมาก
โดยไม่ต้องกังวลใจเพิ่มเติมโปรดเพิ่มรหัส ขั้นแรกจำเป็นต้องมีแถบเลื่อน
Scrollbar.js
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น Scrollbar () {
this.options = {
รวม: 0, // จำนวนข้อมูลทั้งหมด
POS: 0, // ตำแหน่งการเลื่อนปัจจุบัน
รายการ: 20, // ขนาดเดียว
ขนาด: 200 // ขนาดควบคุม
-
-
scrollbar.prototype = (function () {
ฟังก์ชั่น setoptions (ตัวเลือก) {
สำหรับ (var attain ในตัวเลือก) {
this.options [attr] = ตัวเลือก [attr];
-
รีเฟรช (นี่);
-
ฟังก์ชั่นรีเฟรช (_this) {
ถ้า (! _this.created)
return; // ตั้งค่าความสูงของการควบคุม
_this.bar.style.height = _this.options.size + "px";
// ตั้งค่าความสูงของเนื้อหา
var ch = _this.options.total * _this.options.itemsize;
_this.content.style.height = ch + "px";
-
// รับตำแหน่งเลื่อน
ฟังก์ชั่น getPos () {
var top = this.bar.scrolltop;
var pos = parseint (top / this.options.itemsize);
กลับ POS;
-
// จำนวนข้อมูลที่สามารถแสดงต่อหน้าได้
ฟังก์ชั่น getPageItems () {
ส่งคืนสิ่งนี้ options.size / this.options.itemsize;
-
// การตอบสนองเหตุการณ์การเลื่อน
ฟังก์ชั่น onscroll (_this) {
var pos = _this.getPos ();
if (pos == _this.options.pos)
กลับ;
_this.options.pos = pos;
_this.onscroll (POS);
-
// การสร้างแถบเลื่อน
ฟังก์ชั่น CreateAT (DOM) {
var _this = this;
var bar = document.createElement ("div");
var content = document.createElement ("div");
bar.appendchild (เนื้อหา);
bar.style.width = "19px";
bar.style.overflowy = "Scroll";
bar.style.overflowx = "ซ่อน";
if (bar.attachevent) {
bar.attachevent ("onscroll", function () {
onscroll (_ นี่);
-
} อื่น {
// Firefox เข้ากันได้
bar.addeventListener ("Scroll", function () {
onscroll (_ นี่);
}, เท็จ);
-
content.style.backgroundColor = "White";
content.style.width = "1px";
this.bar = bar;
this.content = เนื้อหา;
if (typeof (dom) == "String") {
dom = document.getElementById (dom);
-
dom.innerhtml = "";
Dom.AppendChild (this.bar);
this.created = true;
รีเฟรช (นี่);
-
กลับ {
SetOptions: SetOptions
CreateAT: CreateAT
getPos: getPos,
getPageItems: getPageItems,
onscroll: null
// จำลองเหตุการณ์แถบเลื่อน
-
-
รหัสหน้า:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>
การควบคุมตาราง
</title>
<script src = "scrollbar.js" type = "text/javascript">
</script>
<script language = "javascript" type = "text/javascript">
var data = [];
// สร้างข้อมูลตัวอย่างหมื่น
สำหรับ (var i = 0; i <10,000; i ++) {
var row = {
id: ฉัน,
ข้อความ: "text" + i
-
data.push (แถว);
-
// สร้างแถบเลื่อน
var scrbar = new scrollbar ();
window.onload = function () {
scrbar.createat ("divscroll");
Scrbar.setOptions ({
รวม: 10,000,
ขนาด: 300
-
scrbar.onscroll = function (pos) {
Showdata (POS);
-
// รับเทมเพลต
รายการ var = scrbar.getPageItems ();
var tpl = document.getElementById ("trtpl");
tpl.parentNode.removeChild (TPL);
// สร้างตารางเพียงไม่กี่โหลที่คุณเห็นดังนั้นมันจึงเร็วขึ้นตามธรรมชาติมาก
var list = document.getElementById ("tbllist");
สำหรับ (var i = 0; i <data.length && i <items; i ++) {
var nr = tpl.clonenode (จริง);
// คัดลอกบรรทัดใหม่จากสายเทมเพลต
list.appendchild (NR);
-
showdata (scrbar.getpos ());
-
// แสดงข้อมูลตามแถบเลื่อน
ฟังก์ชั่น showdata (pos) {
var n = scrbar.getPageItems ();
var rows = document.getElementById ("tbllist"). แถว;
สำหรับ (var i = 0; i <n; i ++) {
var row = rows [i];
var item = data [i + pos];
row.cells ["tdid"]. innerhtml = item ["id"];
row.cells ["tdtext"]. innerhtml = item ["text"];
-
-
</script>
</head>
<body>
<div id = "divscroll" style = "float: ขวา">
</div>
<table>
<!-ชื่อบรรทัด->
<head>
<tr>
<th>
รหัสประจำตัว
</th>
<th>
ข้อความ
</th>
</tr>
</head>
<!-พื้นที่แสดงข้อมูล->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</tr>
</tbody>
</table>
</body>
</html>