javascript - 页面需要更多时间来加载和显示表格记录

问题描述

我在codeigniter中使用angularjs创建了表格显示。我在下面提到了我用于显示该表格记录的表格。该表格将有200条记录，每条记录将有100条记录。所以这段代码需要很长时间来加载页面.

var chseble_app = angular.module('chseble_app', []);
chseble_app.controller('chsebale_ctlr', function($scope){
$scope.bale_list= <?= json_encode($bale_list); ?>;
$scope.total_wght = function(){
  var total_wght = 0;
  angular.forEach($scope.bale_list, function(lot){
    total_wght += parseFloat(lot.weight);    
  });
  return total_wght;
};
$scope.selected_lots = [];
$scope.selected_total = 0;
$scope.chk_lot = [];
$scope.chk_bale = [];
$scope.chk_all = false;
//checkbox checked function of lot row
$scope.lot_chkd = function(id){

    angular.forEach($scope.bale_list, function(lot){
      if(lot.id == id)
      {
        if(!$scope.chk_lot[id])
        {
          angular.forEach(lot.bales, function(bale){
            $scope.chk_bale[bale.id] = false;
          });
       }
      else
      {
          angular.forEach(lot.bales, function(bale){
            $scope.chk_bale[bale.id] = true;
          });
      }
      }
    });
  $scope.check_loop();      
}

//打捆排复选框勾选功能

$scope.bale_chkd = function(bleid, lotid){
  $scope.check_loop();
}

//check/uncheck all checkboxes when select all check box is checked
$scope.check_all = function(){
  $scope.selected_total = 0;
  $scope.selected_lots = [];
  if($scope.chk_all)
  {
    angular.forEach($scope.bale_list, function(lot){
        $scope.selected_total += parseFloat(lot.weight);
        $scope.chk_lot[lot.id] = true;
        $scope.selected_lots.push(' '+lot.lot_no);
        angular.forEach(lot.bales, function(bale){$scope.chk_bale[bale.id] = true;});
    });
  }
  else
  {
    angular.forEach($scope.bale_list, function(lot){
        $scope.chk_lot[lot.id] = false;
        angular.forEach(lot.bales, function(bale){$scope.chk_bale[bale.id] = false;});
    });
  }
}

//calculate total and check or uncheck parent checkbox
$scope.check_loop = function(){
  $scope.selected_total = 0;
  $scope.selected_lots = [];
  var all_lot_chkd = true;
  angular.forEach($scope.bale_list, function(lot){
     var bale_chkd = false;
      angular.forEach(lot.bales, function(bale){
          if($scope.chk_bale[bale.id])
          {
            $scope.selected_total += parseFloat(bale.weight);
            $scope.chk_lot[lot.id] = true;
            bale_chkd = true;
          }
          else
          {
            all_lot_chkd = false;
          }
      });
    if(bale_chkd == false)
      $scope.chk_lot[lot.id] = false;
    else
      $scope.selected_lots.push(' '+lot.lot_no);
  });
      $scope.chk_all = all_lot_chkd;
}

});

我已经尝试 settimeout 方法在通过以下参考方法完成页面加载后加载数据，但无法使用该方法代码编辑我的代码。是否可以像该参考演示那样更改我的代码，或者任何其他方式可以更快地加载那个页面？

JSFiddle - 页面加载优化

标签： javascriptphpangularjscodeigniter

假设您在 ng-repeat 中拥有每条顶级记录，则应该为其子数据的容器使用 ng-if 进行装饰，以防止 dom 呈现过多的 html 元素。这意味着您将需要实现 UI 来扩展有问题的行（即ng-if="{{currentItem.expanded}}" ng-click={{currentItem.expanded == !currentItem.expanded}}）。

如果您在这些子对象中绑定属性，您可能还想查看单向绑定，在该绑定中，您在绑定前加上一个双冒号{{::modelBeingOneWayBound}}。这可以防止您的大型数据集产生大量可能影响性能的观察者。

上述两个建议都将在模板中实现。如果您提供它，它将帮助其他人，我会解决问题。

javascript - 页面需要更多时间来加载和显示表格记录

问题描述

解决方案

推荐阅读