SpreadJS 14
Getting Started / Quick Start / Save Spreadsheet Changes to Database
In This Topic
    Save Spreadsheet Changes to Database
    In This Topic

    The following section describes the steps to save spreadsheet changes to database.

    You can perform the following steps in the sample created in the topic Store Changes Made to Spreadsheet.

    Note: SpreadJS does not update the database directly, but you can get the changed data by the following method and update the database accordingly.

    Step 1: Get Dirty Cell Information and Convert it to JSON String

    1. Create saveToDB function and use getDirtyCells method to get information of changed cells, known as dirty cells.
    2. Use JSON.stringify method to convert dirty cell information to JSON string.
      JavaScript
      Copy Code
      //1: Create saveToDB()
      function saveToDB() {
          // Get the activesheet from the DOM element "ss"
          var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
          var sheet = ss.getActiveSheet();
          // Store the dirty cells information in the dirtyCells variable
          var dirtyCells = sheet.getDirtyCells();
          // Get the HTML <div> element "msg" by id, this will be created in Step 2
          var div = document.getElementById("msg");
          // Display the JSON string in the div element to visualize the changed cell information
          div.innerHTML = JSON.stringify(dirtyCells, null, 4);
          // Note: Post changes to your database
      }
      

    Step 2: Save Changes to Database

    1. Create an HTML <div> element with msg id after SpreadJS <div> element to display JSON string.
    2. Create an input button Save to DB where the saveToDB function is invoked. The changes captured and converted to JSON string will be displayed in the <div> with id msg when the Save to DB button is clicked.

      The new HTML <body> with all buttons and <div> elements will look like below:
      JavaScript
      Copy Code
      <body>
          <h1>Save changes made to the spreadsheet to a database</h1>
          <p>
              During this section we will create a Save to DB button and a DIV to
              display the changes as a JSON string when the Save to DB button is
              clicked.
          </p>
          <!-- Create a refresh button -->
          <input type="button" value="Refresh" onclick="refresh()" />
          <!-- Create Save to DB <div> and button -->
          <input type="button" value="Save to DB" onclick="saveToDB()" />
          <br />
          <br />
          <div id="ss" style="height:400px;width:900px"></div>
          <!-- Changes <div> -->
          <div class="options-container">
              <h4> Changes saved to database: </h4>
              <div id="msg" style="width: 100%; height: 260px; border: 1px solid grey;"></div>
          </div>
      </body>
      

    The JSON string which contains the changes and will be posted to database is displayed in the output as shown below: