2015-06-09 70 views
1

我是一個JavaScript的初學者,我有點迷失在所有的東西。Handsontable的數據到sql數據庫

我想從我的sql數據庫中推送我的所有數據。我遵循handontable給出的例子,但它不起作用。

下面是代碼,在那裏我創造我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代碼file:

<?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發送$ _REQUEST到testGetData.php。所以,我可以訪問$ _GET超全球。考慮到這個變量是許多數組的數組,foreach中的$值與其中一個數組重合。但我不明白爲什麼沒有推動。 我修改了我的sql數據庫的getConnection()函數。

回答

0

我不知道你想用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

請注意,此解決方案將只適用於$data陣列與正好 3列。您前端的手錶可能會提供任意數量的列。因此,在您使用INSERT數據之前,請確保列數是正確的。

+0

在當前情況下,函數'createTableBDD()'是必需的。用戶可以創建多個人格網格,併爲一個網格創建一個數據庫,現在更簡單。我沒有任何選擇,它是該項目的一個組成部分。每一列都與數據庫中的表格匹配,用戶需要能夠合併單元格(數據庫的一個大問題),所以我認爲這不夠。 – arkodath

+0

我可以看到你來自哪裏,但我強烈建議不要用每個ajax調用創建新表。如果不再需要他們,誰將再次「放棄」他們? – cars10m

+0

我重新組織了我的類圖,我認爲它可以與我需要的只有一個數據庫匹配。我會做一些測試,然後我會更新這個主題 – arkodath