donglin6659 2014-03-18 12:52
浏览 207
已采纳

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

I want to Post data's from a handsontable ([handsontable.com][1]) spreadsheet for get them on PHP with $_REQUEST.

My page is intended to allow the input of information and then to validate them by a button. I tried for a <form> $ a. Ajax or $. Post but I wasn't able to do what I wanted.

Here is my code :

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

Could you help me with sending my jQuery spreadsheet from a button to my PHP page (which is the same page).

I'm new in this domain and I haven't been able to find this information. I found examples for Ajax but that doesn't interest me.

Thank you in advance for your help.

-- Sweet

  • 写回答

1条回答 默认 最新

  • dro80463 2014-03-20 13:08
    关注

    I finally found the solution. Using a form is not necessary. Here is the code:

    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.');
            }
        });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据