Как я могу позволить выделенному тексту ячейки быть полужирным, если щелкнуть contextMenu 'Bold' в Handsontable

Question

Я работаю над handsontable.js с последней версией jquery. Я хочу добавить новые функции для добавления на handsontalbe contextMenubold и normal text. Я добавляю эти оба параметра меню в contextMenu. Но как я могу сделать все выделенное cell полужирным шрифтом и нормальным.

Вот мой JQuery код handsontable:

$("#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() {Array}
Возвращает индексы выбранных в данный момент ячеек как массив [startRow, startCol, endRow, endCol].
Стартовая строка и начало координат col - это координаты активной ячейки (где был выбран выбор).
Возврат: {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>

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