SlickGrid是一个极速的JavaScript网格/电子表格库，提供现代化的数据处理和展示功能，在大数据量展示方面表现极好。与easyui和layui的datagrid相比，SlickGrid在大数据量展示方面具有极高的流畅性。
github链接：GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet
本人实测，使用SlickGrid一页存放790000条数据时性能表现极佳。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link type="text/css" rel="stylesheet" href="/static/css/main.css"><link rel="stylesheet" href="/static/slickgrid/dist/styles/css/slick.grid.css" type="text/css"/><link rel="stylesheet" href="/static/slickgrid/dist/styles/css/slick-icons.css" type="text/css"/><link rel="stylesheet" href="/static/slickgrid/dist/styles/css/slick-alpine-theme.css" type="text/css"/><script src="/static/js/jquery.min.js"></script>
</head>
<body>
<div id="dataTable" class="slick-container" style="width: 100%; height:550px;"></div>
<script src="/static/slickgrid/lib/jquery.jsonp-2.4.min.js"></script>
<script src="/static/slickgrid/dist/browser/slick.core.js"></script>
<script src="/static/slickgrid/dist/browser/slick.interactions.js"></script>
<script src="/static/slickgrid/dist/browser/slick.grid.js"></script>
<script src="/static/slickgrid/dist/browser/slick.editors.js"></script>
<script src="/static/slickgrid/dist/browser/slick.remotemodel.js"></script>
<script src="/static/slickgrid/dist/browser/plugins/slick.autotooltips.js"></script>
<script src="/static/slickgrid/dist/browser/plugins/slick.cellrangedecorator.js"></script>
<script src="/static/slickgrid/dist/browser/plugins/slick.cellrangeselector.js"></script>
<script src="/static/slickgrid/dist/browser/plugins/slick.cellcopymanager.js"></script>
<script src="/static/slickgrid/dist/browser/plugins/slick.cellselectionmodel.js"></script>
<script>var grid;var tableDatas = [];var columns = [{id: "autoid", name: "", field: "autoid", width: 50},{id: "country", field: 'country', name: 'Country', width: 80},{id: "sku", field: 'sku', name: 'Sku', width: 70},{id: "asin", field: 'asin', name: 'Asin', width: 120},{id: "item", field: 'item', name: 'Item', width: 150}];var options = {enableCellNavigation: true,enableColumnReorder: false,editable: true,enableAddRow: false,asyncEditorLoading: false,autoHeight: false};// 设置表格高度$(function () {var tableHeight = window.innerHeight - 150; $("#dataTable").css("height", tableHeight);grid = new Slick.Grid("#dataTable", [], columns, options);});var obj = {find: function () {var country = $("#country").val();var asin = $("#asin").val();var sku = $("#sku").val();var focusSkus = $('[name="FocusSkus"]').is(':checked')? 1: 0;$.ajax({url: '#',type: 'GET',dataType: 'json',success: function (datas) {tableDatas = datas;grid = new Slick.Grid("#dataTable", datas, columns, options);},error: function (error) {console.log(error);}})}};
</script>
</body>
</html>
