Alarms new grid POC

by sectioni

HTML

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
    <script>
        $(function(){
            var rows = [];
            for(var i=1; i<=8000; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            $('#dg').datagrid({
                detailFormatter: function(rowIndex, rowData){
                    return '';
                },
                onExpandRow(index,row){
                    var dg = $(this);
                    var detail = dg.datagrid('getRowDetail', index);
                    if (!detail.hasClass('not-empty')){
                        detail.addClass('not-empty');
                        var data = [];
                        var len = Math.max(2,Math.floor(Math.random()*20));
                        for(var i=1; i<=len; i++){
                            data.push({
                                inv: row.inv,
                                val1: Math.floor(Math.random()*1000),
                                val2: Math.floor(Math.random()*1000)
   ...