Handsontable数据到sql数据库

Posted 2023-03-22

【中文标题】Handsontable数据到sql数据库

【英文标题】：Handsontable's datas to sql database

【发布时间】：2015-08-23 23:48:50

【问题描述】：

我是 javascript 的初学者，我对所有这些东西有点迷茫。

我希望我的掌上电脑中的所有数据都推送到我的 sql 数据库中。我按照handsontable给出的例子，但它不起作用。

这是我创建handsontable的代码：

`

$(document).ready(function () 

var container = document.getElementById('Grille_competences');

var headerRenderer = function (instance, td, row, col, prop, value,
cellProperties) 
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.textAlign = 'center';
td.style.backgroundColor = '#B0C4DE';
;

//Initialisation des données de la grille.
var data = [["Compétences","Description","Code",""],
        ["", "", "",""],
        ["","", "",""],
        ["","", "",""],
        ["","", "",""],
        ["","", "",""]];

//Création de la grille
hot = new Handsontable(container, 
data: data,
height: 800,
width: 1183,
colWidths: [35,200,25,80],
manualRowResize: true,
colHeaders: true,
rowHeaders: true,
mergeCells: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true,    
contextMenuCopyPaste: 
  swfPath: './zeroclipboard/dist/ZeroClipboard.swf'
,


//Fonctionnalités lors d'un clic droit dans la grille.

 contextMenu:     

   items: 
    "row_above": 
        name: 'Insérer ligne au dessus',
      disabled: function ()             
        return hot.getSelected()[0] === 0;
      
    ,
    "row_below": 
        name: 'Insérer ligne en dessous',
        disabled: function()             
        return hot.getSelected()[0] === 0;
    
  ,
    "hsep1": "---------",
    "col_left": 
        name: 'Insérer colonne à gauche',
        disabled: function () 
          return hot.getSelected()[0] === 0;
        
    ,
    "col_right": 
        name: 'Insérer colonne à droite',
        disabled: function() 
          return hot.getSelected()[0] === 0;
        
    ,
    "hsep2": "---------",
    "remove_row": 
      name: 'Supprimer la ligne',
      disabled: function () 
        return hot.getSelected()[0] === 0;
      
    ,

    "remove_col": 
      name: 'Supprimer la colonne',
      disabled: function () 
        return hot.getSelected()[0] === 0;
      
    ,
    "hsep3": "---------",
    "copy": 
      name:'Copier',
      disabled: function () 
        return hot.getSelected()[0] === 0;
      
    ,
    "paste": 
      name: 'Coller',
      disabled: function()
        return hot.getSelected()[0] === 0;
      
    ,
    "hsep4": "---------",
    "undo": 
      name:'Précédent',
      disabled: function()
        return hot.getSelected()[0] === 0;
      
    ,
    "redo": 
      name: 'Suivant',
      disabled: function()
        return hot.getSelected()[0] === 0;
      
    ,
    "hsep5": "---------",
    "make_read_only": 
      name: 'Lecture seule',
      disabled: function() 
        return hot.getSelected()[0] === 0;
      
    ,
    "alignment": 
      name: 'Alignement du texte',
      disabled: function () 
        return hot.getSelected()[0] === 0;        
                
    ,
    "mergeCells": 
      name: 'Fusionner les cellules',
      disabled: function () 
        return hot.getSelected()[0] === 0;
      
    ,


    ,
,


//Entetes de la grille en lecture seule. 
cells: function(row, col, prop) 
var cellProperties = ;
if(row===0)
cellProperties.renderer = headerRenderer;
   
if(row === 0 && col <3)
       cellProperties.readOnly = true;
       
return cellProperties;

);

//Lors d'un clic sur le bouton valider, transmission des données de la grille.


);

 $('#save').click(function()
   $.ajax(
   url: "testGetData.php",
   dataType: 'json',
   data: data: hot.getData() , 
   type: 'GET',
   success: function () 
   $console.text('Saved !');
   
  );  
);

`

这里是 testGetData.php 文件的代码：

<?php

session_start();
require_once('./lib/demo/php/functions.php');


$db = getConnection();
createBDD($db);

if($db)


$db = new PDO('mysql:host=localhost; dbname=bdd'.$_SESSION['login'],'root', 'passwd');


  createTableBDD($db);


    foreach ($_GET['data'] as $value)
        $query = $db->prepare('INSERT INTO Competences(libelle) VALUES('.$value[0].')');
        $query->execute();

    



?>

如果我理解的话，handsontable 会向 testGetData.php 发送一个 $_REQUEST。所以，我可以访问 $_GET 超全局。考虑到这个变量是一个由许多数组组成的数组，foreach 中的 $value 与其中一个数组重合。但我不明白为什么什么都没有推送。 我为我的 sql 数据库修改了 getConnection() 函数。

【参考方案1】：

我不知道你想用createTableBDD($db); 做什么。每次调用此页面时，您是否都尝试创建一个新表？您应该只创建一次表（可能在 phpmyadmin 中），例如

CREATE TABLE cm (id int auto_increment primary key, a int NULL, b int NULL, c int NULL )

然后在 .php 文件中执行以下操作：

// connect to the database:
$p=new PDO("mysql:host=localhost; dbname=$dbname",$uname,$DBpassword);

// in order to demonstrate the back-end without the handson front-end
// I just generate some sample data (6 rows, 3 columns) into array $data:
for ($i=100;$i<700;$data[]=$b,$i+=100) for ($b=array(),$j=1;$j<4;$j++) $b[]=$i+$j;
// this would otherwise come from: $data=$_GET['data'];

// prepare the INSERT statement ONLY ONCE:
$ins=$p->prepare("INSERT INTO cm(a,b,c) VALUES(?,?,?)");

// and run it for each line of the $data array:
foreach ($data as $a) $ins->execute($a);

您可能会发现本教程对 PDO 入门很有帮助：http://wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers#Running_Simple_INSERT.2C_UPDATE.2C_or_DELETE_statements

请注意，此解决方案仅适用于 恰好 3 列的 $data 数组。您在前端的动手表可能会提供任意数量的列。因此，您需要在INSERT 数据之前确保列数正确。

【讨论】：

当前情况下需要createTableBDD()函数。用户可以创建多个个人网格，一个网格一个数据库，现在更简单。我没有任何选择，这是项目不可分割的一部分。每一列都匹配数据库中的一个表，并且用户需要能够合并单元格（数据库的一个大问题）所以我认为这还不够。

我可以看到您来自哪里，但我强烈建议不要在每次 ajax 调用时创建新表。如果他们不再需要，谁会再次drop他们？

我已经重新组织了我的类图，我认为它可以匹配我只需要一个数据库的内容。我会做一些测试，之后我会更新这个话题