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 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决