标签: handsontable

在我的一个项目中,我尝试在表格中显示Angular Components(如自动完成下拉搜索).由于我的要求(比如用ctrl+点击多选不同的单元格),我决定给它一个动手的去.

我使用了handontable渲染器并动态添加组件.

代码看起来像这样

matrix.component.ts

       this.hot = new Handsontable(this.handsontable.nativeElement, {
            data: this.tableData,
            colWidths: [80, 300],
            colHeaders: ['Id', 'Custom Component'],
            columns: [
                {
                    data: 'id',
                },
                {
                    data: 'id',
                    renderer: (instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) => {
                        if (cellProperties.hasOwnProperty('ref')) {
                            (cellProperties.ref as ComponentRef<CellContainerComponent>).instance.value = row;
                        } else {
                            cellProperties.ref = this.loadComponentAtDom(
                                CellContainerComponent,
                                td,
                                ((component: any) => {
                                    component.template = this.button4Matrix;
                                    component.value = row;
                                }));
                        }
                        return …

我正在尝试扩展handsontable插件以支持其下拉列表中的多个选择.我已经尝试通过按照建议https://github.com/trebuchetty/Handsontable-select2-editor/issues/7修改'dropdownEditor'来扩展内置到库中的基本编辑器 .我花了几个小时阅读和搜索关键字的来源,但我没有想出任何真正的用途.

我不介意使用Angular扩展或其他原生ECMA5或扩展https://github.com/handsontable/handsontable插件的方式来解决这个问题.

到目前为止,我唯一的想法是使用这些代码按照存在的模式实际扩展框架.我在下面添加了指向的所有LOC:multiselect或者Handsontable.MultiselectDropdownCell复制了dropdown方法,称为新名称,一切正常,但仍无法看到我可以在哪里开始找到我要找的东西.

Handsontable.MultiselectDropdownCell = {
  editor: getEditorConstructor('multiselectdropdown'),
  renderer: getRenderer('autocomplete')
};

Handsontable.cellTypes = {
  text: Handsontable.TextCell,
  date: Handsontable.DateCell,
  numeric: Handsontable.NumericCell,
  checkbox: Handsontable.CheckboxCell,
  autocomplete: Handsontable.AutocompleteCell,
  handsontable: Handsontable.HandsontableCell,
  password: Handsontable.PasswordCell,
  dropdown: Handsontable.DropdownCell,
  multiselect: Handsontable.MultiselectDropdownCell
};

Handsontable.cellLookup = { validator: {
    numeric: Handsontable.NumericValidator,
    autocomplete: Handsontable.AutocompleteValidator
}};

我有一个修改版的下拉编辑器,它看起来像:

import {getEditor, registerEditor} from './../editors.js';
import {AutocompleteEditor} from './autocompleteEditor.js';

/**
 * @private
 * @editor MultiSelectDropdownEditor
 * @class MultiSelectDropdownEditor
 * @dependencies AutocompleteEditor
 */
class MultiSelectDropdownEditor extends …

我希望能够在Handsontable中编辑列标题的文本,但我似乎无法弄清楚是否可以使它们可编辑.我想我可以把标题换成另一行,但是如果可能的话,我想避免这样做.

澄清一下:我实际上正在寻找一种允许用户编辑标题值的方法(因为它们是正常的表格单元格)

我有动手,我希望将数据输入到掌上电脑的服务器端.我试图在代码下面运行,但数据不是预期的格式.我期望以纯json格式获取数据作为列标题作为键.

Html代码

<div class="handsontable" id="example"></div>
<input type="button" name="submit" value="submit" onclick="submitForm()" />

创建handontable的代码

   $(document).ready(function () {
       $('#example').handsontable({
           startRows: 2,
           startCols: 2,
            rowHeaders: true,
            colHeaders: true,
            contextMenu: true,
       });
   });

用于从掌上电脑中提取信息的代码

   function submitForm(){
        var $container = $('#example');
        var htContents = JSON.stringify($container.handsontable('getData'));
        alert(htContents);
    }

目前,handsontable有2行2列.现在如果按下单元格值(1,1)= 11,(1,2)= 12,(2,1)= 21和(2,2)= 22的按钮,我得到的结果是在警告窗口

[["11","12"],["21","22"]]

但我期待的结果是

 [{"A":"11","B":"12"},{"A":"21","B":"22"}] 

其中A和B是列标题.

我正在使用HandsOnTable在我的网站上使编辑数据库表更具交互性.

HandsOnTable几乎满足了我的所有要求,只是我的数据库中的某些列实际存储了外键而不是本地字符串值.

在UI中,我希望这些列显示为下拉菜单,其中用户选择映射到前面提到的外键的可读值(即类似HTML名称/值select).

不幸的是,HandsOnTable没有这样的细胞类型.最接近它的是autocomplete.这允许我创建一个下拉列表,但它只包含值; 没有相应的钥匙.以下是它的创建方式:

"source": ["Jebediah", "Bob", "Bill", "Buzz"]

所以我计划从服务器发送两个Json字符串:

一个包含HandsOnTable渲染表所需的参数:

{
    "data": [
        { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
        { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
        { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
        { "ID": 4, "Description": "Wood", "Volume": '513',  "Customer": "Buzz" }
    ],
    "columns": [
        { "data": "ID", "type": "numeric" },
        { "data": "Description", "type": "text"},
        { "data: "Volume", "type": "numeric" },
        { …

每当我在第一个单元格中输入一个值时,相同的值就会自动复制到同一个名称标题单元格中.我们怎么能阻止这个？我试图谷歌这个问题,但没有找到任何合适的解决方案.

这是代码:

$.ajax({
    type: "POST",
    async: false,
    url: url,
    data: data,
    success: function (res)
    {
        grid = new Handsontable(container, {
            data: [],
            rowHeaders: true,
            autowidth: false,
            autoRowSize:true,
            maxRows: 100,
            minRows: 15,
            width: 'auto',
            height: 420,
            stretchH: 'all', //this is used to cover the full div
            overflow: 'hidden',

        colHeaders: res.data.header,
            columns: res.data.renderer,
            fillHandle: {
                autoInsertRow: false
            },
        minSpareRows: 1,               
        });        
    }
});

更新 这里是用于创建标题和列表的json

<iframe src="https://pastebin.com/embed_iframe/ind7Savd" style="border:none;width:100%"></iframe>

Handsontable为选择单元格时提供了一些很好的钩子,但是我似乎无法想办法让它在选中单元时强制进入编辑模式.

我可以像这样检测细胞选择:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );
});

从那里我甚至可以获得被选中的细胞元素.但是从那里我似乎无法触发单元格进入编辑模式(其中有一个主动选择的textarea字段).这通常是通过双击触发的.做显而易见似乎不起作用:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );

    $(current_td).dblclick();
});

有没有人做过这个或者想过如何让它工作？

我发现ngHandsontable非常令人满意.

http://handsontable.com/

但是,它不支持插入Handsontable支持的列.所以我想知道是否有任何其他类似于ngHandsontable的解决方案,但也支持动态列.

提前致谢.

我目前正在尝试在handsontable的列上添加搜索过滤器.我可以使用callback搜索插件来隐藏带有css的行但是会中断滚动.搜索插件似乎也只查看表的前100个左右.是否存在可以将行过滤添加到handsontable的插件？

我在Shiny App中使用rhandsontable,我想知道在这种情况下如何使用Handsontable的getSelected()方法,因为我打算在data.frame上应用更改.谢谢!