Question

我想从一个动态的（[handsontable.com] [1]）电子表格发布数据，以便用 $ _ REQUEST 来获取PHP。

我的页面旨在允许输入信息，然后通过按钮验证它们。我尝试了<form> $ a. Ajax或$. Post，但我无法做我想做的事。

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script data-jsfiddle='common' src='add/jquery.handsontable.full.js'></script>
 <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery.handsontable.full.css'>
 <script data-jsfiddle='common' src='add/jquery.handsontable.removeRow.js'></script>
 <script data-jsfiddle='common' src='add/numeral.de-de.js'></script>
 <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery.handsontable.removeRow.css'>
 <!-- the below is only needed for DateCell (uses jQuery UI Datepicker) -->
 <script data-jsfiddle='common' src='add/jquery-ui.custom.min.js'></script>
 <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery-ui.custom.css'>

<script type="text/javascript">
$(document).ready(function(){
 $("#spreadsheet").submit( function () {    
   $.post(
    'index.php',
  $(this).serialize(),
  function(data){
    alert(data);// alert the data from the server
  }
   );
   return false;   
 });   
});
</script>

 <body>
    <div id="container">
      <div class="columnLayout">

     <div class="rowLayout">
       <div class="descLayout">
      <div class="pad" data-jsfiddle="tablecompt">
        <h2>Compta</h2>

        <div id="tablecompt"></div>
      </div>
       </div>

       <div class="codeLayout">
      <div class="pad">
      <FORM NAME='spreadsheet' class='formulaire' ID='spreadsheet' METHOD='POST'>

         <style data-jsfiddle="common">
        .handsontable .currentRow {
          background-color: #E7E8EF;
        }

        .handsontable .currentCol {
          background-color: #F9F9FB;
        }
         </style>
         <script data-jsfiddle="tablecompt">

        var container = $("#tablecompt");

        var people = [
          {ctopextract: false}
        ];

        var email_validator_fn = function (value, callback) {
          setTimeout(function(){
         if (/.+@.+/.test(value)) {
           callback(true);
         }
         else {
           callback(false);
         }
          }, 1000);
        };

        container.handsontable({
          columnSorting: true,
          manualColumnResize: true,
          manualColumnMove: true,
          currentRowClassName: 'currentRow',
          currentColClassName: 'currentCol',
          removeRowPlugin: true,
          rowHeaders: true,
          data: people,
          minSpareRows: 10,
          fixedRowsTop: 1,
          contextMenu: true,
          beforeChange: function (changes, source) {
          },
          afterChange: function (changes, source) {
         if (source !== 'loadData') {
           $("#tablecomptconsole").text(JSON.stringify(changes));
         }
          },
          colHeaders: ['Société', 'TETAB', 'TNUMINT', 'TDOCU', 'CTOPEXTRACT', 'Date comptable', 'Journal', 'Tiers', 'Compte', 'Libellé', 'Débit (€)', 'Crédit (€)', 'Nature', 'TCI', 'TCI1', 'TCI2', 'TCI3', 'TCI4'],
          columns: [
         {data: 'societe'},
         {data: 'tetab'},
         {data: 'tnumint', type: 'numeric'},
         {data: 'tdocu'},
         {data: 'ctopextract', type: 'checkbox'},
         {data: 'date', type: 'date'},
         {data: 'tjournal', type: 'dropdown', source: ["8A", "8B", "8E", "8F", "8M"]},
         {data: 'ttiers'},
         {data: 'tcptg'},
         {data: 'tlibecr'},
         {data: 'debit', type: 'numeric', format: '0,0.00 $', language: 'de-de'},
         {data: 'credit', type: 'numeric', format: '0,0.00 $', language: 'de-de'},
         {data: 'nature'},
         {data: 'tci'},
         {data: 'tci1'},
         {data: 'tci2'},
         {data: 'tci3'},
         {data: 'tci4'}
          ]
        });
         </script>
        <button class='formulaire' type='submit' class='action' NAME='action' id="action" VALUE='M'>Mise à jour</button>
        <button class='formulaire' onClick=\"javascript:document.location.href='index.php'\" />Annuler</button>
       </FORM>
      </div>
       </div>
     </div>
      </div>
    </div>
 </body>

你能帮我把我的jQuery电子表格从一个按钮发送到我的PHP页面（这是同一页面）。

我是这个领域的新手，但我还没有找到这些信息。我找到了Ajax的例子，但这并不让我感兴趣。

提前感谢您的帮助。

- 甜

Answer 1

我终于找到了解决方案。使用表单不是必需的。这是代码：

var handsontable = $container.data('handsontable');

$parent.find('button[name=save]').click(function () {
    $.ajax({
        url: "link.php",
        data: {"data": handsontable.getData()}, //returns all cells' data
        type: 'POST',
        success: function (data) {
            alert(data);
        },
        error: function () {
            $console.text('Erreur de sauvegarde.');
        }
    });
});

使用Handsontable Spreadsheet将数据从jQuery表发布到PHP

1 个答案: