在 Handsontable 中单击 contextMenu 'Bold' 时，如何让选定的单元格文本变为粗体

Question

我正在使用 jquery 最新版本开发 handsontable.js。 我想在handsontalbe contextMenu 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; ?>

    });

更新

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

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

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

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

提前致谢。

Answer 1

如果你看到 getSelected() 方法的文档，它会说：

getSelected(){数组}
以数组 [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 的类名，因此您可以定位这些单元格，正如您在上面的代码中看到的那样，并尝试下面添加的 sn-p。

$(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>

Answer 2

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

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

jsFiddle