添加或删除不在handontable中工作的列

问题描述 投票：0回答：1

我正在尝试使用Handsontable添加和删除列功能。但它没有用。

这是我的代码： -

我的index.html

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
        <script type="text/javascript" src="js/app.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
        <!--<script type="text/javascript" src="data/datafactory.js"></script>-->
    </head>


    <body MainCtrl as ctrl>

<hot-table col-headers="true" datarows="ctrl.data">
    <hot-column ng-repeat="column in ctrl.columns" data="{{column.data}}" title="column.title" read-only="column.readOnly"></hot-column>
</hot-table>

<button ng-click="ctrl.addColumn()">Add column</button>
<button ng-click="ctrl.removeColumn()">Remove column</button>

    </body>

</html>

我的app.js.

 function MainCtrl() {
    var items = [[]];

    this.data = items;
    this.columns = [
      {
        data: 'id',
        title: 'ID',
        readOnly: true
      },
      {
        data: 'price',
        title: 'Price',
        readOnly: false
      }
    ];

    this.addColumn = function() {
      this.columns.push({});
    };
    this.removeColumn = function() {
      this.columns.pop();
    };
  }

  angular
  .module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl);

MainCtrl.$inject = [];

当我运行代码时，它不起作用，不允许添加或删除列。我是角度和前端设计的新手。所以在这里寻求帮助。

javascript angularjs handsontable
1个回答
1
投票

我相信你需要正确地订购你的<script>标签 - 你的代码应该在最后（我想你的代码在js/app.js）：

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

也可以尝试使用箭头函数，而不是函数（）......或者设置：

let ctrl = this;

使用this可能会遇到麻烦。 this的范围可以并且有时会改变。

这是你在JS小提琴中工作的代码示例：https://jsfiddle.net/pegla/b6rj93cg/2/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.