SlickGrid简单使用——一个高性能的datagrid库

SlickGrid是一个极速的JavaScript网格/电子表格库，提供现代化的数据处理和展示功能，在大数据量展示方面表现极好。与easyui和layui的datagrid相比，SlickGrid在大数据量展示方面具有极高的流畅性。

github链接：GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet

本人实测，使用SlickGrid一页存放790000条数据时性能表现极佳。

html 复制代码

<!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>