JS Таблица, десятки тысяч данных загружаются мгновенно
В практическом применении AJAX динамически загружая данные, каждый используется для мышления: создать ряд данных.
Поэтому, если число большое, и данные необходимо загрузить за один раз, браузер застрянет в течение полудня.
Вдохновлен управлением DataGrid от Flex, в управлении DataGrid от Flex, метод отображения данных не заключается в создании столько строк, сколько их, он создает только более дюжины или двадцать строк, которые вы видите на интерфейсе (при условии, что это тоже, если есть и не более дюжины или двадцать Многие данные, n Rows of Data, которые вы должны увидеть, будут извлечены из данных в ходе процесса прокрутки и повторно сняты в управлении N Row, который был создан.
Другими словами, в управлении DataGrid Flex мы на самом деле видим только элементы управления N-Line, но отображаемые ими данные отфильтрованы в соответствии с состоянием полосы прокрутки.
Следовательно, если он реализован в JS с использованием аналогичного метода, то существует десятки тысяч кусков данных, и это может быть лишь несколько десятков создания DOM, что, естественно, будет намного быстрее.
Без лишних слов, пожалуйста, добавьте код. Во -первых, необходим стержень прокрутки
Scrollbar.js
Кода -копия выглядит следующим образом:
функция scrollbar () {
this.options = {
Всего: 0, // общее количество данных
POS: 0, // текущая позиция прокрутки
СДЕЛЕЖИВАНИЕ: 20, // Одиночный размер
Размер: 200 // Размер управления
};
}
Scrollbar.prototype = (function () {
Функция setoptions (options) {
для (var attr в параметрах) {
this.options [attr] = параметры [attr];
}
Обновить (это);
}
Функция обновления (_this) {
if (! _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);
вернуть POS;
}
// количество данных, которые можно отобразить на страницу
функция getPageItems () {
вернуть this.options.size / this.options.itersize;
}
// Ответ о прокрутке события
функция onscroll (_this) {
var pos = _this.getpos ();
if (pos == _this.options.pos)
возвращаться;
_This.options.pos = pos;
_this.onscroll (pos);
}
// Создание прокрутки
Функция Createat (dom) {
var _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 (_this);
});
} еще {
// Firefox совместим
bar.addeventlistener ("scroll", function () {
Onscroll (_this);
}, ЛОЖЬ);
}
content.style.backgroundcolor = "White";
content.style.width = "1px";
this.bar = bar;
this.content = 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">
<голова>
<название>
Управление таблицей
</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 = {
ID: я,
Текст: "Текст" + я
};
data.push (row);
}
// Создание прокрутки
var scrbar = new scrollbar ();
window.onload = function () {
scrbar.createat ("divscroll");
scrbar.setoptions ({
Всего: 10000,
Размер: 300
});
scrbar.onscroll = function (pos) {
ShowData (POS);
}
// Получить шаблон
var elects = scrbar.getPageItems ();
var tpl = document.getElementbyId ("trtpl");
tpl.parentnode.removechild (tpl);
// Создать только несколько десятков рядов столов, которые вы видите, так что, естественно, намного быстрее
var list = document.getElementbyId ("tbllist");
for (var i = 0; i <data.length && i <eptions; i ++) {
var nr = tpl.clonenode (true);
// копировать новую строку из строки шаблона
list.appendchild (nr);
}
ShowData (scrbar.getPos ());
}
// отображать данные в соответствии с полосой прокрутки
функция ShowData (pos) {
var n = scrbar.getPageitems ();
var row = document.getElementbyId ("tbllist"). Rows;
для (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>
<тело>
<div id = "divscroll" style = "float: right">
</div>
<Таблица>
<!-название строки->
<голова>
<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>