javascriptjexcelapijexceljs

How do I know which cell is highlighted in jexcell javascript library?


I want to merge the cells marked with jexcel. I don't know how to do that. More specifically, I want to merge cells into a dynamic state and write them into merged cells in MySQL. How to do it

<div id="example"></div>
<script>

var data = [
  ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
  ['2017', 10, 11, 12, 13],
  ['2018', 20, 11, 14, 13],
  ['2019', 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true,
  contextMenu: true
});

</script>

Solution

  • Your Question is not clear but I'll try to answer it to the best of my ability.

    if I ignore the example you provided and focus on jExcel, we can merge cells using setMerge and for that we need to know:

    we can extract this info from:

    $("#spreadsheet").jexcel("getSelectedRows", true);
    $("#spreadsheet").jexcel("getSelectedColumns", true);
    

    in theory this alone should work, but jExcel deselects cells when it loses focus (ie when user clicks a button) that's why I used a workarround to store the selection of cells in an object, and later used that object to merge cells.

    HTML:

    <div id="spreadsheet"></div>
    <br>
    <input id="myB" type="button" value="Merge Selected" />
    

    Javascript:

    var mySlection = {};
    var options = {
      minDimensions: [10, 10],
      onselection: storeSelection
    };
    
    $(document).ready(function() {
      var mySpreadsheet = $("#spreadsheet").jexcel(options);
    
    
      $("#myB").click(function() {
        //Merge Cells using the stored selection
        $("#spreadsheet").jexcel("setMerge", mySlection.firstcell, mySlection.colspan, mySlection.rowspan)
        /*
        you may now store the following values to your MySQL
        mySlection.firstcell
        mySlection.colspan
        mySlection.rowspan
        */
      });
    });
    
    
    function storeSelection() {
      var sRows = $("#spreadsheet").jexcel("getSelectedRows", true);
      var sCols = $("#spreadsheet").jexcel("getSelectedColumns", true);
    
      mySlection.firstcell = [sCols[0], sRows[0]];
      mySlection.colspan = sCols.length;
      mySlection.rowspan = sRows.length;
    }
    

    Requirements: jQuery, jExcel and jSuites v3

    Here's a Working Example at CodePen