隐藏javascript中的handsontable列 [英] Hiding columns of handsontable from javascript

问题描述

有什么方法可以隐藏javascript中的HOT列吗? 要求是要隐藏的列将作为javascript中的参数出现，并且基于此，相应的列将相应地显示hide.

HOT具有rowHeaders和colHeaders以及具有20列的数据.

请告知.

解决方案

过时的解决方案

好吧，我找到了一个可能的解决方案.我在自己的系统上进行了测试，但实际上非常简单.

您应该在columns选项中使用customRenderer.如果还没有，请阅读有关此内容的信息.这个想法是，您要为每个单元提供自己的渲染器.在此自定义函数中，您可以执行以下操作:

var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns

function getCustomRenderer() {
  return function(instance, td, row, col, prop, value, cellProperties) {
    if (colsToHide.indexOf(col) > -1) {
      td.hidden = true;
    } else {
      td.hidden = false;
    }
  }
}

此渲染器的作用是隐藏var colsToHide指定的单元格.您现在要做的就是添加一个DOM元素，用户可以选择该元素，因此每次渲染表时(基本上发生在任何更改之后，或者需要手动触发)，指定列中的单元格都将被隐藏，并保持data数组完好如您所述.而且当不在colsToHide中时，它们会被重新渲染，因此请确保您也能正常工作.

在这里，我用非常基本的功能来实现它.只需在输入字段中输入列的索引，然后观察魔术的发生.

http://jsfiddle.net/zekedroid/LkLkd405/2/

更好的解决方案: handsontable :隐藏一些列而不更改数据数组/对象

Is there any way i can hide HOT columns from javascript? The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.

The HOT has rowHeaders and colHeaders and the data with 20 columns.

Please advise.

解决方案

OUTDATED SOLUTION

Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.

You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:

var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns

function getCustomRenderer() {
  return function(instance, td, row, col, prop, value, cellProperties) {
    if (colsToHide.indexOf(col) > -1) {
      td.hidden = true;
    } else {
      td.hidden = false;
    }
  }
}

What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.

Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.

http://jsfiddle.net/zekedroid/LkLkd405/2/

Better Solution: handsontable: hide some columns without changing data array/object

这篇关于隐藏javascript中的handsontable列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！