Question

所以我正在使用MVC 4 C＃/ Razor，我正在开发一个使用SlickGrid来显示网格数据的页面。一切正常，除非我尝试使用它来显示大量数据（类似于100万行）。

当发生这种情况时，它似乎做得很好，直到它刚刚完成。当看起来它将要完成所有数据加载时，网页崩溃了。我使用getJSON从SQL数据库中提取数据。我按列进行，并分批进行300000条记录。我尝试过使用Chrome内存分析工具，但却找不到任何有用的东西。以下是一些代码片段：

    function pullAllGridData(tableName, colArray)
    {
        for (var i = 0; i < colArray.length; i++)
        {
            fetchColumn(tableName, colArray[i], 0);
        }
    }


    function fetchColumn(tableName, fieldName, startAt)
    {
        $.getJSON('/WIMenu/GetTableData', { tableName: tableName, fieldName: fieldName }, function (data)
        {
            if (data.slice(-1) !== '~')
            {
                var startPass = populateSlickData(data, fieldName, startAt);
                colStatus[fieldName] = true;
                if (loadFirstBatch())
                { populateGrid(); }
                fetchColumn(tableName, fieldName, startPass);
            }
            else
            {
                data = data.slice(0, -1);
                populateSlickData(data, fieldName, startAt);
                colStatus[fieldName] = true;
                if (loadFirstBatch())
                { populateGrid(); }
            }
        });
    }

    function populateSlickData(input, fieldName, startAt)
    {
            var output = startAt;
            var valueArray = input.split('|');
            output += valueArray.length;
            if (!isInBlackList(fieldName, tableName))
            {
                var datatype = columns[getColumnIndex(fieldName)].datatype;
                var startIndex = startAt;
                var endIndex = startAt + valueArray.length;
                var counter = 0;
                alert(fieldName + ': startIndex: ' + startIndex + ' endIndex: ' + endIndex + ' count: ' + endIndex-startIndex);
                for (var x = startIndex; x < endIndex; x++)
                {
                    if (!slickdata[x])
                    { slickdata[x] = {}; }
                    if (valueArray[x - startAt] == 'null') { valueArray[x - startAt] = ''; }
                    if (datatype == 'System.DateTime')
                    {
                        if (valueArray[x-startAt] !== '')
                        {
                            var date = new Date(valueArray[x - startAt]);
                            valueArray[x - startAt] = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
                        }
                    }
                    else if (datatype == 'System.Decimal' || datatype == 'System.Int32' || datatype == 'System.Int16' || datatype == 'System.Int64')
                    {
                        valueArray[x - startAt] = parseFloat(valueArray[x - startAt]);
                    }
                    slickdata[x][fieldName] = valueArray[x - startAt];
                    counter++;
                }
            }
            currentColumn = fieldName;

        filteredData = slickdata;
        return output;
    }

fetchColumn使用递归来获取列数据，直到收到所有列数据。 populateGrid方法只是将SlickGrid对象与slickdata对象同步。我的目标是找出页面崩溃的原因并了解如何修复它。

通过使用警报，似乎在某些时候，它会陷入populateSlickData方法的for循环中，我无法弄清楚原因。我已经尝试打印索引数据了，但这一切似乎都很正常。

Answer 1

您无法将数百万行数据拉入内存，并希望任何网页都可以执行除抓取速度缓慢或崩溃之外的任何操作。这就是grid paging 的用途，与按需ajax结合使用。您的网格应该仅在页面更改时提取显示当前数据页面所需的数据。你不应该提前装载所有东西。

以下是SlickGrid github网站上的一个示例：http://mleibman.github.io/SlickGrid/examples/example4-model.html

以下是更多信息：https://github.com/teleological/slickback/wiki/Pagination

为什么Javascript导致我的页面崩溃？

1 个答案: