2

我正在handsontable.js使用jquery最新版本。我想添加新功能以添加到 handontalbecontextMenu bold和normal text. 我已将这两个菜单选项添加到contextMenu. 但是我怎样才能使所有选定cell的文本粗体和正常。

这是我的 handsontable 的 jquery 代码：

$("#A_tabledata").handsontable({
        data: data,
        startRows: 1,
        startCols: 2,
        minRows: 1,
        minCols: 2,
        maxRows: 400,
        maxCols: 200,
        rowHeaders: false,
        colHeaders: false,
        minSpareRows: 1,
        minSpareCols: 1,
        mergeCells: true,
        cells: function (row, col, prop) {
            var cellProperties = {};
            cellProperties.renderer = "defaultRenderer"; //uses lookup map
            return cellProperties;
        },
        contextMenu: {
            callback: function(key, options) {
                if(key == 'bold'){
                    //Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
                    var sel = this.getSelected() ;
                    var boldValues = ''; //How can i get cell value?
                    // How can i set value back to in the cell?    
                }

                if(key == 'normalText'){
                    //Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
                    var sel = this.getSelected();
                    var normalValues = ''; //How can i get cell value?
                    // How can i set value back to in the cell?    

                }
            },
            items: {
                "row_above": {},
                "row_below": {},
                "col_left": {},
                "col_right": {},
                "hsep2": "---------",
                "remove_row": {name:'Remove row(s)'},
                "remove_col": {name:'Remove columns(s)'},
                "hsep3": "---------",
                "alignment" : {},
                "mergeCells" : {},
                "hsep4": "---------",
                "undo": {},
                "redo": {},
                "hsep5": "---------",
                "bold": {"name": "Bold"},
                "normalText": {"name": "Normal Text"}
            }
        },
        cell: <?php echo $metadata; ?>,
        mergeCells:  <?php echo $metadata; ?>

    });

更新

有关我想要的更多信息，我在此处添加图像：

在此处输入图像描述

在此图像中，您可以看到蓝色区域。当我从上下文菜单中单击“粗体”时，我希望所有这些单元格都是粗体。当我从上下文菜单中单击“普通文本”时恢复正常。

我如何获得单元格值？如何将值设置回单元格中？

我在许多论坛和帖子中搜索过，但没有得到答案：

提前致谢。

4

2 回答 2

0

getSelected()如果您看到它说 的方法的文档：

getSelected(){Array}以数组
形式返回当前选定单元格的索引[startRow, startCol, endRow, endCol]。
开始行和开始列是活动单元格的坐标（选择开始的地方）。
返回：{Array} 选择的索引数组。

您的情况不需要此方法，请参阅下面的演示或使用我添加的代码示例。

所以按照这个你只需要这个： 

callback: function(key, options) {
    if (key === 'bold') {
      $('.area').html(function() {
        return $('<strong>', {
          text: this.textContent
        });
      });
    } else if (key === 'normal') {
      $('.area').html(function() {
        return this.textContent
      });
    }
  },

我发现选定的单元格有一个名为的类名，area因此您可以定位这些单元格，如您在上面的代码中所见，并尝试下面添加的代码段。 

$(document).ready(function() {

  var container = document.getElementById('basic_example');

  var data = function() {
    return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: {
      callback: function(key, options) {
        if (key === 'bold') {
          $('.area').html(function() {
            return $('<strong>', {
              text: this.textContent
            });
          });
        } else if (key === 'normal') {
          $('.area').html(function() {
            return this.textContent
          });
        }
      },
      items: {
        "bold": {
          name: 'Make bold'
        },
        "normal": {
          name: 'Make normal'
        }
      }
    }
  });

});
body {
  background: white;
  margin: 20px;
}
h2 {
  margin: 20px 0;
}
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet" />
<link href="http://handsontable.com//styles/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<div id="basic_example"></div>

于 2015-12-15T13:08:40.343 回答
0

我知道这不是最好的解决方案，但如果没有其他办法，你可以这样做：

var sel = this.getSelected(), row = sel[0] + 1, col = sel[1];
$('table tr:eq(' + row + ') td:eq(' + col + ')').css('font-weight', 'bold');

jsFiddle

于 2015-12-15T13:30:55.650 回答