添加或删除列在handsontable中不起作用

Posted

技术标签:

【中文标题】添加或删除列在handsontable中不起作用【英文标题】：Add or remove column not working in handsontable 【发布时间】：2018-06-09 18:33:02 【问题描述】：

我正在尝试使用 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 = [];

当我运行代码时它不起作用并且不允许添加或删除列。我对角度和前端设计都很陌生。所以在这里寻求帮助。

【问题讨论】：

【参考方案1】：

我相信您需要正确订购 &lt;script&gt; 标签 - 您的代码应该放在最后（我想您的代码在 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>

还可以尝试使用箭头函数代替 function()... 或设置：

let ctrl = this;

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

这是您在 JS fiddle 中工作的代码示例： https://jsfiddle.net/pegla/b6rj93cg/2/

【讨论】：

以上是关于添加或删除列在handsontable中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

ng-show 在可操作的列中不起作用

Ag 网格：在运行时自动调整列在 chrome/IE 11 中不起作用

HandsonTable setDataAtCell 不起作用

在按下actionButton后在表格中添加行时，删除行在闪亮的应用程序中不起作用

如何在 Handsontable 的 afterChange 中使用 getCellMeta？

滑动删除 UITableView 单元格动画在 swift 2 中不起作用