标签: handsontable

我发现ngHandsontable非常令人满意.

http://handsontable.com/

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

提前致谢.

我试图将handontable下拉列表的宽度设置为根据查找数据宽度,而不是列宽.怎么能实现这一目标？

请看下面的图片.下拉范围太窄,无法容纳查找数据.

使用Handsontable时,似乎很难从上下文菜单中检索行的标题.

请考虑以下数据源:

var data = function () {
 return [["1212", "roman", "i", "ii", "iii"],
         ["3121", "numeric", 1, 2 ,3],
         ["4126", "alpha", 'a', 'b', 'c']];
};

可以创建一个Handsontable实例,显示除前两个"列"之外的所有数据,并且具有如下的上下文菜单:

// Settings to display all columns but the first two
var dataCols = []
for(var i=2; i<data()[0].length; i++) {
  dataCols.push({ data: i })
}

// Instance creation
var hot = new Handsontable(container, {
  data: data(),
  height: 396,
  colHeaders: true,
  rowHeaders: false,
  columns: dataCols,
  stretchH: 'all',
  columnSorting: true,
  contextMenu: {
    callback: function(key, options) …

我rhandsontable在Shiny应用程序中使用该软件包,该应用程序应具有以下功能:

• 计算中使用的数据可以随机生成,由actionButton(由应用程序启动时)调用
• 用户可以通过掌上电脑手动编辑数据
• 在手动编辑之后,应该可以重新生成随机数据,调用新的计算

以下应用程序完全符合我的要求,但我无法弄清楚如何摆脱全局变量did_recalc.这是一个最小的例子,其中数据由两个总结的数值组成.

library(shiny)
library(rhandsontable)

did_recalc <- FALSE

ui <- fluidPage(
  rHandsontableOutput('table'),
  textOutput('result'),
  actionButton("recalc", "generate new random vals and calculate")
)

server <- function(input,output,session)({

  dataset_generator <- eventReactive(input$recalc, {
    df <- as.data.frame(runif(2))
    output$table <- renderRHandsontable({rhandsontable(df)})
    did_recalc <<- TRUE
    df
  }, ignoreNULL = FALSE)

  output$result <- renderText({ 
    df <- dataset_generator()
    if (!is.null(input$table) && !did_recalc) 
      df <- hot_to_r(input$table)
    did_recalc <<- FALSE
    sum(df)
  })
}) 

shinyApp(ui = ui, server = server)

如果我删除!did_recalc条件output$result <- …

我想了解这个JSON编辑器的代码并进行修改.

在directives.js中,有一段代码试图构建模板:

var switchTemplate = 
    '<span ng-switch on="getType(val)" >'
        ... ...
        + '<span ng-switch-when="Boolean" type="boolean">'
            + '<input type="checkbox" ng-model="val" ng-model-onblur ng-change="child[key] = val">'
        + '</span>'
        ... ...
    + '</span>';

// display either "plus button" or "key-value inputs"
var addItemTemplate = 
'<div ng-switch on="showAddKey" class="block" >'
    + '<span ng-switch-when="true">';
        if (scope.type == "object"){
           // input key
            addItemTemplate += '<input placeholder="Name" type="text" ui-keyup="{\'enter\':\'addItem(child)\'}" '
                + 'class="form-control input-sm addItemKeyInput" ng-model="$parent.keyName" /> ';
        }
        addItemTemplate += 
        // value type dropdown …

我正在尝试使用div id获取填充的数据,但它正在抛出$container.data(...) is undefined.

<!-- ... -->
    <div id="app" style="width: 500px; height: 200px;"></div>   
</div>
<button id="app_id" onclick="json()">Json</button>

我尝试了以下代码来获取填充数据:

var rowHead = colAr;
var colHead = dataObj[idname].col;
var data = [[]],
    container = document.getElementById("app"),
    selectFirst = document.getElementById('selectFirst'),
    rowHeaders = document.getElementById('rowHeaders'),
    colHeaders = document.getElementById('colHeaders'),
    hot;

hot = new Handsontable(container, {
    minRows:rowHead.length,
    minCols:colHead.length,
    startRows: 5,
    startCols: 5,
    rowHeaders: rowHead,
    colHeaders: colHead,
    contextMenu: false,
    outsideClickDeselects: false,
    removeRowPlugin: true
});
hot.loadData(data);

function json() {
    var $container = $("#app");
    var handsontable = $container.data('handsontable').getData();
    console.log(handsontable); …

我使用struts2-json插件生成JSON数据和Ajax,用来自该JSON的数据(根据源)填充表(handsontable ).

现在,我需要使用JSON的Ajax从表中检索数据到Struts2 Action.首先,我已经使用JSON从Struts2 Action传递给Handsontable的数据实现了填充表,这非常简单且有效.但为什么保存不起作用,你可以在下面的附加代码中看到？

正如我在firebug中看到的那样发送了POST,并且在调试中,我的JSONSaveAction操作中检索到了请求,但是字段数据没有填充JSON数据,为什么？不应该通过struts2-json插件自动将数据绑定到java对象？我究竟做错了什么？

在handontable部分,该函数handsontable.getData()负责从表中获取整个数据.所以我这样使用它但没有成功:

$.ajax({
        url: "../json/saveJSONDataAction.action",
        data: {data: handsontable.getData()}, //returns all cells' data
        dataType: 'json',
        type: 'POST',
        success: function (res) {
            if (res.result === 'ok') {
                $console.text('Data saved');
            }
            else {
                $console.text('Save error');
            }
        }
    });

该函数handsontable.getData()实际上检索了我检查的所有数据,但是List<Report> data在我的JSONSaveAction操作中数据没有绑定到java对象.你知道为什么吗？

这是POST请求后我的表和firebug信息的屏幕截图:

将JSON发送到handontable的动作(正常工作):

@ParentPackage("json-default")
@Action(value="getJSONDataAction")
@Result(name="success", type="json")
public class JSONDataAction extends ActionSupport {
    private static final long serialVersionUID = 1L;

    private List<Report> data = new ArrayList<Report>();

    public JSONDataAction(){
        data.add(new Report(1, "Chris", …

首先,有一个众所周知的错误handsontable(无论如何都是一段很棒的代码),例如用户tezhm在官方github问题列表中提到的handontable:

在表格的最后一行上选择单元格并在行下方拖动选择到表格外的区域时,会触发滚动视口,从而导致视图出现故障.这可以使用演示表重新创建.

因此,我决定完全关闭滚动条或禁用添加新的行/列.

但是如何禁用添加新的行/列handsontable？

或者,如何禁用滚动handsontable？

"客户ID"列设置为使用自动完成.自动完成值将各种客户信息连接在一起,以帮助用户选择正确的信息.选择后,客户ID将被放入网格中.

我无法弄清楚如何使自动完成弹出窗口更宽,以便它适合连接的信息.

这就是它需要的样子,这是我通过在渲染后修改元素来实现的.理想情况下,它的宽度足以适应内容.

我正在努力实施handsontable.根据我的要求,我想handsontable通过更改下拉列值重新渲染,但是在下拉选择中,handsontable不能正确更新.以下是我的代码:

Handsontable.vue:

<template>
  <div id="hot-preview">
    <HotTable :settings="settings" :ref="referenceId"></HotTable>
    <div></div>
  </div>
</template>

<script>
import { HotTable } from '@handsontable-pro/vue';

export default {
  components: {
    HotTable
  },
  props: ['settings', 'referenceId'],
}
</script>

<style>
#hot-preview {
  max-width: 1050px;
  height: 400px;
  overflow: hidden;
}
</style>

父组件:

<template>
  <div id="provisioning-app">
    <v-container grid-list-xl fluid>
      <v-select
          :items="selectList"
          item-text="elementName"
          item-value="elementName"
          label="Standard"
          v-model="selected"></v-select>
        <handsontable :settings.sync="settings" :referenceId="referenceId"></handsontable>
     </v-container>
  </div>
</template>

<script>
import Handsontable from '@/components/Handsontable';
import PrevisioningService from '@/services/api/PrevisioningService';

export default {
  components: …