龙空技术网

大量数据轻松展示,你只需要这个原生的JS插件——Clusterize.js

爱分享Coder 1637

前言:

现在大家对“分享插件js”大体比较重视,朋友们都需要分析一些“分享插件js”的相关内容。那么小编也在网摘上网罗了一些关于“分享插件js””的相关内容,希望兄弟们能喜欢,你们一起来学习一下吧!

介绍

Clusterize.js是一个轻量级的原生大数据量展示插件,主要思想不是用所有使用的标签污染DOM。取而代之的是,它将列表拆分为簇,然后显示当前滚动位置的元素,并在列表的顶部和底部添加额外的行以模拟表格的全高,以便浏览器将滚动条显示为完整列表。

Github

适用HTML元素

不仅仅适用于table元素,也同样适用于div、有序列表、无序列表等等,基本上,它几乎是你想要的任何标签

安装使用安装

bower install clusterize
npm install clusterize.js
<link href="./clusterize.css" rel="stylesheet"><script src="./clusterize.min.js"></script>
代码示例

表格

<!--HTML--><div class="clusterize">  <table>    <thead>      <tr>        <th>Headers</th>      </tr>    </thead>  </table>  <div id="scrollArea" class="clusterize-scroll">    <table>      <tbody id="contentArea" class="clusterize-content">        <tr class="clusterize-no-data">          <td>Loading data…</td>        </tr>      </tbody>    </table>  </div></div>
// JavaScriptvar data = ['<tr>…</tr>', '<tr>…</tr>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

ol有序列表

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <ol id="contentArea" class="clusterize-content">    <li class="clusterize-no-data">Loading data…</li>  </ol></div>
// JavaScriptvar data = ['<li>…</li>', '<li>…</li>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

ul

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <ul id="contentArea" class="clusterize-content">    <li class="clusterize-no-data">Loading data…</li>  </ul></div>
// JavaScriptvar data = ['<li>…</li>', '<li>…</li>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

div

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <div id="contentArea" class="clusterize-content">    <div class="clusterize-no-data">Loading data…</div>  </div></div>
// JavaScriptvar data = ['<div>…</div>', '<div>…</div>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});
总结

Clusterize.js是一个原生的用于大数据量展示的插件,其渲染机制极大的提升了性能,如果你需要在前端Web页面展示海量数据列表,不妨试一试!

标签: #分享插件js