标签: handsontable

我正在尝试动态地将列添加到handontable.我没有在任何地方看到样本,也没有在API中看到这样做的方法.有没有人想出办法克服这个问题,或者有一些我能看到的示例代码会有所帮助.

谢谢.

我正在尝试使用AngularJS重写JS/jQuery SPA.SPA是使用惊人的Handsontable的项目编辑网格.我很高兴看到有一个AngularJS版本正在开发中,并且在大多数情况下,它的工作方式与预期一致.

但是,我很难搞清楚如何在AngularJS中的jQuery中做一些事情.网格具有(其中)3列,其中一列依赖于另外两列.三列是成本,售价和保证金(即(1 - (成本/价格))*100).我可以在控制器中进行数学运算并将边距传递到初始加载的$ scope.items变量中,但是当您更改成本或价格列时,它显然不会更新.它似乎是进行双向数据绑定的理想场所,但我无法弄清楚如何将margin的datacolumn值绑定到另外两行的值.我觉得有一种明显的方法可以做到这一点,但由于我是AngularJS的新手,我想我可能会把它扔给社区.

提前致谢!

编辑:

因此,在讨论了一些答案后,我想稍微改进一下我的问题,以了解问题的核心.我有一个REST API,用于提供JSON文档,其中包含来自在线销售点服务的项目数组.这是一个带有虚拟数据的示例:

{ '@attributes': {'count':10}, 'Item': [
  { 'customSku':'sampleItem1'
  , 'description':'Sample Item, first'
  , 'defaultCost':'10.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'17.99', 'useType':'Default'}
    , {'amount':'19.99', 'useType':'MSRP'}
    ]}
  }
, { 'customSku':'sampleItem2'
  , 'description':'Item, Sample, 2nd'
  , 'defaultCost':'20.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'29.99', 'useType':'Default'}
    , {'amount':'39.99', 'useType':'MSRP'}
    ]}
  }
]}

我不是在开玩笑说数据的结构是这样的,它完全是.无论如何.

现在,我在我的控制器像这样通过这个来的观点:$scope.items = JSON.parse(request.responseText);.如何将功能传递$scope.getMargin = function() { return (1 - (cost / price)) * 100 }给视图:成本和价格的范围是正确的项目？我觉得我真的很接近它,但我还没有到达那里.感谢回答者到目前为止!

编辑2:

根据要求,这里有 …

我想在handsontable的每一行的末尾添加一个自定义保存按钮.我在laravel 4中使用handontable包.

按钮显示如下:

<button>Save</button>

看起来像一个简单的任务,但我还没有找到一个简单的解决方案.我的数据有时作为一个空数组,以便用户可以开始处理空表(除了标题).该表有一个minSpareRows:1所以我希望表格会显示该备用行而没有别的,但它完全是空白.

有关如何使用备用行和列标题实例化表的任何想法？

我尝试过的事情包括如果数据数组为空则手动插入一行,但这会导致空行和备用行.

我想要销毁并重新创建我的excel表格,我正在使用Handsontable,因为对象被破坏并创建了新的,但行内的数据对于新表格和旧表格都是相同的

既然标题类似于SO QUESTION 我已经实现了之前SO问题的答案,但我还是卡住
JSFIDDLE

     <div id="example1" class="hot handsontable"></div>
    <select class="client_class">
    <option value="">Select client</option>
    <option value="DEFGH">DEFGH</option>
    </select>


    var autosaveNotification;
    var hotInstance;
    var setting1 = {
    data: [],
    colHeaders: ['InvoiceNo', 'InvoiceDate', 'Supplier'],
    columns: [{
        data: 'InvoiceNo'
    }, {
        data: 'InvoiceDate'
    }, {
        data: 'Supplier'
    }],
    rowHeaders: true,
    minSpareRows: 1,
    minRows: 5,
    manualColumnResize: true,
    manualRowResize: true,
    fixedColumnsLeft: 1,
    manualColumnMove: true,
    manualRowMove: true,
    };
     hotInstance = new Handsontable(jQuery("#example1")[0], setting1);

   jQuery('.client_class').on('change', function () {
    var selected = $(this).find("option:selected").val();
    console.log(hotInstance.getData());
    hotInstance.destroy();
    hotInstance = new …

我有一个handontable对象(实际上是两个对象,都在一个bootstrap模式中),在构建页面后加载了数据.这是一个重复问题的jsfiddle https://jsfiddle.net/mtbdeano/w7dofbyy/

即使有stretchH: all选择,这些表的尺寸也太窄了.点击内容后,他们会像魔术一样调整到正确的列宽.我错过了一些初始化参数吗？加载新数据后,如何将其大小设置为正确的宽度？

  /* these tables are in the modal */
  $('#keyword_table').handsontable({
    data: keyword_data,
    rowHeaders: true,
    colHeaders: ['Keywords'],
    columnSorting: true,
    contextMenu: true,
    height: 256,
    stretchH: "last",
    enterBeginsEditing: false,
    minSpareRows: 1
  });

我正在使用此代码加载数据,该代码在成功的ajax调用时调用:

function load_table_from_ajax(tbl, data) {
  var $tbl = $(tbl);
  var hot = $tbl.handsontable('getInstance');
  // this formats my data appropriately
  var new_data = _.map(data, function (kw) {
    return new Array(kw);
  });
  hot.loadData(new_data);
  /* I have tried also doing a: hot.render(); */
}

所有代码看起来都是正确的教程,任何想法为什么表不能正确拉伸/调整大小？

在与Handsontable交互之前,它看起来像这样: 但点击标题或添加值后:

我的 R 程序按预期工作。它显示了一个包含我的数据帧的表，并让我编辑这些值。

如何捕获这些值并将它们保存到我的数据帧或我的数据帧的副本？

require(shiny)
library(rhandsontable)

    DF = data.frame(val = 1:10, bool = TRUE, big = LETTERS[1:10],
                    small = letters[1:10],
                    dt = seq(from = Sys.Date(), by = "days", length.out = 10),
                    stringsAsFactors = F)

    rhandsontable(DF, rowHeaders = NULL)

编辑：上面的代码生成一个包含行和列的表。我可以编辑任何行和列。但是当我查看我的数据框时，这些编辑不会出现。我想弄清楚的是我需要更改什么才能捕获已编辑的新值。

我开始反应并尝试在我的反应应用程序中设置动手表: 反应 - 动手

// import React...
import React from 'react';
import ReactDOM from 'react-dom';

// ... Handsontable with its main dependencies...
import moment from 'moment';
import numbro from 'numbro';
import pikaday from 'pikaday';
import Zeroclipboard from 'zeroclipboard';
import Handsontable from 'handsontable';

// ... and HotTable
import HotTable from 'react-handsontable';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handsontableData = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2016", 10, 11, 12, 13],
      ["2017", 20, 11, 14, 13],
      ["2018", 30, 15, 12, …

我需要创建一个函数来执行一些数据更新并重新渲染到 handsontalbe ( var ht = new Handsontable(el,options)) 的渲染实例。在我的例子中我可以轻松得到的是el（用作实例容器的元素）。ht只知道就可以得到吗el？或者我必须“记住”ht某个地方才能稍后访问它？

（我已经尝试过Handsontable(el)，它创建了一个新表，它不返回已创建的实例）

我正在使用handontable js插件.我想在afterChange钩子中使用getCellMeta函数但不能正常工作.我在使用函数outChange hook后,函数正常工作.但是没有在afterChange挂钩工作.

var container = document.getElementById('t1'),
  options = document.querySelectorAll('.options input'),
  table,
  hot; 

hot = new Handsontable(container, {    
  autoWrapRow: true,
  startRows: 81,
  startCols: 206,
  autoColumnSize : true,  
  stretchH: 'all', 
  afterChange : function(change,source) { 
      if (source === 'loadData') {
        return;
      }   
      var test = this.getCellMeta(change[0],change[1]); // not working, not return "id" meta
      console.log(test);  
  }
});

$.ajax({
  url: 'path',
  type: 'GET',
  dataType: 'json',
  success: function (res) { 
    var data = [], row, pc = 0; 
    for (var …