Question

我有一个26 * 26的矩阵要在UI上呈现，然后保存到数据库中。列标签和矩阵单元格以JSON的形式从数据库中提取，以使用Knockout的foreach在UI上呈现它。矩阵在IE中大约需要花费很多时间（大约5秒钟），但在Chrome中几乎不需要一秒钟。

JS：

$(document).ready(function(){
    viewModel=new model(ko,$);
    ko.applyBindings(viewModel);
});

function model(ko,$){
    this.columnLabels=ko.observableArray();
    this.rowData=ko.observableArray();

    this.showMatrix=function(){

        var postData = 'function=fetchColumnsAndMatrix&infodom='+g_infodom+'&matrixType='+this.matrixType()+'&pageMode='+g_pageMode;
        var formURL = 'transMatrix';

        $.ajax({
            type: "post",
            url: formURL,
            data: postData,
            aysnc: false,
            success: function(responseData, textStatus, jqXHR){
                var returnValue=$.trim(responseData);
                returnValue = (eval('('+returnValue+')'));
                viewModel.columnLabels(returnValue["columnLabels"]);
                viewModel.rowData(returnValue["matrices"]);
            },
            error: function(jqXHR, textStatus, errorThrown){

            }
        });

    }
}

查看：

<table width="100%" id ="transitionMatrix" class="conttablefixed">
    <thead>
        <tr>
            <th>&nbsp;&nbsp;&nbsp;&nbsp; </th>
            <!-- ko foreach: $root.columnLabels-->
               <th data-bind="text:$data['cellDescription']">
               </th>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody data-bind="foreach: $root.rowData">
        <tr>
            <td data-bind="text: $root.getColumnLabels($index())"></td>
            <!-- ko foreach: $data-->
            <td class="col12">
                <input type="text" maxlength="10" size="35" class="flegend1" data-bind="value:$data['cellValue']"/>
                <input type="hidden" data-bind="value:$data['sourceXCoordinate']"/>
                <input type="hidden" data-bind="value:$data['destYCoordinate']"/>   
            </td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

viewmodel中的observable映射到DTO类中声明的这两个实例的JSON。

private MatrixDTO [][] matrices; 
private List<MatrixLabels> columnLabels;

我能够在几分之一秒内从服务器获取JSON。因此，二维阵列矩阵的数量不是问题。

它适用于Chrome但不适用于IE。有人可以告诉我需要做些什么才能提高Internet Explorer的性能。

以下是JSON的一部分：

{“matrices”：[[{“transitionMatrixDefId”：null，“ficMisDate”：null，“destYCoordinate”：“AAA INT”，“sourceXCoordinate”：“AAA INT”，“cellValue”：null}，.. ........ ，{“transitionMatrixDefId”：null，“ficMisDate”：null，“destYCoordinate”：“C INT”，“sourceXCoordinate”：“D INT”，“cellValue”：null}，{“transitionMatrixDefId”：null，“ficMisDate”： null，“destYCoordinate”：“C-INT”，“sourceXCoordinate”：“D INT”，“cellValue”：null}，{“transitionMatrixDefId”：null，“ficMisDate”：null，“destYCoordinate”：“D INT”， “sourceXCoordinate”：“D INT”，“cellValue”：null}]]，“columnLabels”：[{“cellValue”：“AAA INT”，“cellDescription”：“INT LT Rating AAA”}，{“cellValue”： “C-INT”，“cellDescription”：“INT LT Rating C - ”}，{“cellValue”：“D INT”，“cellDescription”：“INT LT Rating D”}}}

Knockout的foreach在IE中花了很长时间，但在Chrome中更快

0 个答案: