如何在javascript或Angularjs中动态生成类似excel的单元格？_Javascript_Angularjs

如何在javascript或Angularjs中动态生成类似excel的单元格？

javascript angularjs

如何在javascript或Angularjs中动态生成类似excel的单元格？,javascript,angularjs,Javascript,Angularjs,我想创建一个类似excel的单元格系统，但需要动态地选择每个单元格。我的期望输出：如果我有2和10，输出将是这样的（上图）。2表示2行，10表示10列。2和10来自数据库，然后javascript/angularjs应该根据这些值生成表。第二件事是我必须使用javascript选择每个单元格。例如，我想选择B7，如果单击该单元格，将显示一个带有所选单元格编号的警报框。在real中，我想存储一些关于该单元格的值。如何使每个单元格都可单击？有什么建议吗？我更喜欢angularjs 编辑：准确

我想创建一个类似excel的单元格系统，但需要动态地选择每个单元格。我的期望输出：

如果我有2和10，输出将是这样的（上图）。2表示2行，10表示10列。2和10来自数据库，然后javascript/angularjs应该根据这些值生成表。第二件事是我必须使用javascript选择每个单元格。例如，我想选择B7，如果单击该单元格，将显示一个带有所选单元格编号的警报框。在real中，我想存储一些关于该单元格的值。如何使每个单元格都可单击？有什么建议吗？我更喜欢angularjs

编辑：

准确地说，我想使庭院的图形视图。工作人员将选择单元格并输入货物重量（在引导模式下）。然后保存。下一次，如果某个单元格/槽之前有重量，则该单元格/槽将采用不同的颜色（红色表示该单元格/槽已装满货物），如果他单击该单元格，则会显示与该单元格类似的重量相关的所有详细信息。数据库表将存储yard_id、cell_id和weight。如果单元格以前有详细信息，如何进行查询以从数据库中获取详细信息，使我的单元格充满颜色并显示详细信息

编辑2：

在factory中创建对象以在单元格中设置值：

      database[createKey({
    row: 'A',
    column: 1
  })] = 12;

此处，默认情况下，行A和列1为红色。但在real app中，我会有一些单元格的数据，如：

[{“行”：“A”，“列”：1，“权重”：100}，
{“行”：“A”，“列”：2，“权重”：200}
]

那么，我如何在特定的单元格上设置这些值，并具有不同的bg颜色？我想使用此方法（loadData（））在单元格中设置颜色（如您设置的红色），这些单元格在首次加载页面时具有存储在数据库中的值：

function loadData() {
    fakeHttp.get('api/weights').then(function (result) {
        $scope.weights = result.data;

        console.log(result.data)
    });
};

我将在result.data参数中传递json数据（如上所示）

…在real app中，我将有一些单元格的数据，如：。。。我如何在特定的单元格上设置这些值并使用不同的bg颜色

您可以保持

loadData

不变，并更改

$scope.getWeight

以适应数据的格式。这需要依赖于lodash，因为这使事情更加简洁。如果你不想这样做，你可以用你自己的

find

方法来代替

\uu.find

，这个方法也可以做同样的事情——我把它留给你做练习：）

HTML

工作人员将选择单元格并输入货物重量（在引导模式下）。然后保存。下一次，如果某个单元格/槽之前有重量，它将是不同的颜色（红色表示该单元格/槽已装满货物），如果他单击该单元格，所有关于该单元格的详细信息（如重量）都将显示……如果该单元格以前有详细信息，如何进行查询以从数据库获取详细信息，使我的单元格充满颜色并显示详细信息

我不完全理解，但这里有一些你能为我理解的部分做些什么。这假设您有3个端点-

获取api/weights

以获取权重

GET api/weight

获取单个单元格的权重，并

POST api/weight

更新权重。您需要将

fakeHttp

替换为

$http

和实际的url。我不知道什么是院子

index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table border="1" cellspacing="0">
      <tbody>
        <tr ng-repeat="row in rows">
          <td ng-repeat="column in columns" style="width: 100px; cursor: pointer" 
            ng-style="{ background: getWeight(row, column) ? 'red' :  '' }"
            ng-click="select(row, column)">
            {{row}}{{column}}
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

HTML:


{{row}}{{column}}


选定（行、列）：


（{selectedRow | |'未定义'}，{{selectedColumn | |'未定义'}}）

谢谢您的回答。我对我的问题进行了编辑以使其更清楚@jared@Fawel我不明白你的意思。对我来说，这听起来像是一个无关的问题。它与你的问题的模态/其余部分有关吗？是的，它与我的问题有关。也许我不能让你明白。但是我编辑了我的edit2部分来让你明白。看看它。@jaredOk，但是$scope.weights来自loadData（）和loadData（）调用一个fakehttp。所以，我可以说主要的源代码是fakeHttp.get方法（elseif）。它返回->

数据库[createKey（{row'A'，column:1}）]=12那么，我应该在哪里附加我真正的api调用：$http.get（“api/getYardGraphDetails”）。然后（函数（r）{console.log（r.data）$scope.dataAll=r.data}）
如果我在Load函数中调用api，它不会；t work:“$http.get（“api/getYardGraphDetails”）.then（函数（结果）{$scope.weights=result.data；}）$scope.weights
。如何在$scope.getweight（）中使用它？`$http.get（“api/getYardGraphDetails”）。然后（函数（r）{console.log（r.data）$scope.weights=r.data}）`我更新了我的答案
$scope.getWeight = function (row, column) {
  if ($scope.weights) {
    // See if there's a record with the row and column.
    var record = _.find($scope.weights, {
      row: row,
      column: column
    });

    // Was a record found with the row and column?
    if (record) {
      // If so return its weight.
      return record.weight;
    }
  }
};

// TODO: Replace fakeHttp with $http

var module = angular.module('myApp', ['ui.bootstrap']);

module.controller('MainCtrl', function ($scope, $uibModal, fakeHttp) {
  $scope.rows = [
    'A',
    'B'
  ];

  $scope.columns = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10  
  ];

  $scope.select = function (row, column) {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModal.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        row: function () {
          return row;
        },
        column: function () {
          return column;
        }
      }
    });

    modalInstance.result.then(loadData);
  };

  $scope.getWeight = function (row, column) {
    if ($scope.weights) {
      var key = createKey({
        row: row,
        column: column
      });

      return $scope.weights[key];
    }
  };

  loadData();

  function loadData() {
    fakeHttp.get('api/weights').then(function (result) {
      $scope.weights = result.data;
    });
  };

  function createKey(data) {
    var key = {
      row: data.row,
      column: data.column
    };

    return JSON.stringify(key);
  }
});

module.controller('ModalInstanceCtrl', function ($scope, row, column, fakeHttp, $uibModalInstance) {
  $scope.row = row;
  $scope.column = column;

  fakeHttp.get('api/weight', {
    row: row,
    column: column
  }).then(function (result) {
    $scope.weight = result.data;
  });

  $scope.save = function () {
    fakeHttp.post('api/weight', {
      row: row,
      column: column,
      weight: $scope.weight
    }).then(function () {
      $uibModalInstance.close();
    });
  };
});

module.factory('fakeHttp', function ($q) {
  var fakeHttp = {};

  var database = {};

  database[createKey({
    row: 'A',
    column: 1
  })] = 12;

  fakeHttp.get = function (url, data) {
    if (url === 'api/weight') {
      var key = createKey(data);
      return $q.when({ data: 
        database[key]
      });
    } else if (url === 'api/weights') {
      return $q.when({ data: 
        database
      });
    } else {
      alert('invalid url: ' + url);
    }
  };

  fakeHttp.post = function (url, data) {
    if (url === 'api/weight') {
      var key = createKey(data);
      database[key] = data.weight;
      return $q.when({});
    } else {
      alert('invalid url: ' + url);
    }
  };

  return fakeHttp;

 function createKey(data) {
    var key = {
      row: data.row,
      column: data.column
    };

    return JSON.stringify(key);
 }
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table border="1" cellspacing="0">
      <tbody>
        <tr ng-repeat="row in rows">
          <td ng-repeat="column in columns" style="width: 100px; cursor: pointer" 
            ng-style="{ background: getWeight(row, column) ? 'red' :  '' }"
            ng-click="select(row, column)">
            {{row}}{{column}}
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<div class="modal-body">
  Please enter weight for {{ row }}{{ column }}
  <input type="text" class="form-control" 
    ng-model="weight" />
  <button class="btn btn-primary"
    ng-click="save()">Save</button>
</div>

module.controller('MainCtrl', function($scope) {
  $scope.rows = [
    'A',
    'B'
  ];

  $scope.columns = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];

  $scope.select = function(row, column) {
    if ($scope.selectedRow === row && $scope.selectedColumn === column) {
      $scope.selectedRow = undefined;
      $scope.selectedColumn = undefined;
    } else {
      $scope.selectedRow = row;
      $scope.selectedColumn = column;
    }
  };
});

<body ng-controller="MainCtrl">
  <table border="1" cellspacing="0">
    <tbody>
      <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns" style="width: 100px; cursor: pointer"
          ng-click="select(row, column)"
          ng-style="{ background: row == selectedRow && column == selectedColumn ? 'yellow' : 'none' }">
          {{row}}{{column}}
        </td>
      </tr>
    </tbody>
  </table>

  <br>

  Selected (row, column): 
  <br>
  ({{selectedRow || 'undefined'}}, {{selectedColumn || 'undefined'}})
</body>