جدول JS ، يتم تحميل عشرات الآلاف من البيانات على الفور
في التطبيق العملي لـ AJAX تحميل البيانات ديناميكيًا ، يتم استخدام الجميع على طريقة للتفكير: إنشاء صف من البيانات.
لذا ، إذا كان الرقم كبيرًا وتحتاج البيانات في وقت واحد ، فسيتم تعليق المتصفح لمدة نصف يوم.
مستوحاة من التحكم في بيانات DATAGRID من Flex ، في التحكم في بيانات FLEX ، لا تتمثل طريقة عرض البيانات في إنشاء العديد من الصفوف كما هو الحال ، فهي تنشئ فقط على الأقل عشر وعشرين صفًا تراها على الواجهة (على افتراض أنها إذا كانت هناك أيضًا إذا كان هناك أيضًا إذا كان هناك ما إذا كان هناك العديد من البيانات ، سيتم استخراج صفوف البيانات N التي يجب أن تراها من البيانات أثناء عملية التمرير وإعادة تشغيلها في التحكم في الصف N الذي تم إنشاؤه.
بمعنى آخر ، في التحكم في بيانات بيانات Flex ، نرى في الواقع فقط عناصر تحكم N-Line ، ولكن يتم ترشيح البيانات التي يعرضونها وفقًا لحالة شريط التمرير.
لذلك ، إذا تم تنفيذها في JS باستخدام طريقة مماثلة ، فهناك عشرات الآلاف من أجزاء البيانات ، وقد يكون ذلك بضع عشرات من الإنشاءات ، والتي ستكون أسرع بشكل طبيعي.
دون مزيد من اللغط ، يرجى إضافة الرمز. أولاً ، هناك حاجة إلى شريط التمرير
Scrollbar.js
نسخة الكود كما يلي:
وظيفة التمرير () {
this.options = {
المجموع: 0 ، // إجمالي عدد البيانات
POS: 0 ، // موقف التمرير الحالي
العناصر: 20 ، // حجم واحد
الحجم: 200 // حجم التحكم
} ؛
}
scrollbar.prototype = (function () {
وظيفة setOptions (خيارات) {
لـ (var attr in Options) {
this.options [attr] = stions [attr] ؛
}
تحديث (هذا) ؛
}
وظيفة تحديث (_ هذا) {
إذا (! _ this.created)
العودة
_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) ؛
عودة نقاط البيع.
}
// عدد البيانات التي يمكن عرضها لكل صفحة
وظيفة getPageItems () {
إرجاع this.options.size / this.options.itemsize ؛
}
// التمرير للاستجابة للحدث
وظيفة onscroll (_ هذا) {
var pos = _this.getPos () ؛
إذا (pos == _this.options.pos)
يعود؛
_this.options.pos = pos ؛
_ this.onscroll (pos) ؛
}
// Scrollbar Creation
وظيفة 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 = "Hidden" ؛
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: لاغ
// محاكاة أحداث شريط التمرير
} ؛
}) () ؛
رمز الصفحة:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<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 <10000 ؛ i ++) {
var row = {
معرف: أنا ،
النص: "نص" + أنا
} ؛
data.push (row) ؛
}
// إنشاء شريط التمرير
var scrbar = new scrollbar () ؛
window.onload = function () {
scrbar.createat ("divscroll") ؛
scrbar.setoptions ({
المجموع: 10000 ،
الحجم: 300
}) ؛
scrbar.onscroll = function (pos) {
showdata (pos) ؛
}
// الحصول على القالب
var heads = scrbar.getPageItems () ؛
var tpl = document.getElementById ("trtpl") ؛
tpl.parentnode.removechild (TPL) ؛
// قم بإنشاء بضع عشرات من الصفوف التي تراها فقط ، لذا فهي أسرع بشكل طبيعي
var list = document.getElementById ("tbllist") ؛
لـ (var i = 0 ؛ i <data.length && i <item ؛ i ++) {
var nr = tpl.clonenode (true) ؛
// نسخ سطر جديد من خط القالب
list.appendchild (nr) ؛
}
showdata (scrbar.getpos ()) ؛
}
// عرض البيانات وفقًا لشريط التمرير
وظيفة showdata (pos) {
var n = scrbar.getPageItems () ؛
صفوف var = document.getElementById ("tbllist"). صفوف ؛
لـ (var i = 0 ؛ i <n ؛ i ++) {
var row = الصفوف [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: right">
</div>
<griding>
<!-عنوان الخط->
<head>
<tr>
<h>
بطاقة تعريف
</th>
<h>
نص
</th>
</r>
</head>
<!-منطقة عرض البيانات->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</r>
</tbody>
</table>
</body>
</html>