jQuery UI - 將表內容保存到文件

我是jquery的新手...我剛剛發現了jQuery UI界面庫。我到目前爲止是一個包含表格的php網頁。表中的每一行顯示3個值：一個id，一個文件名以及該文件的內容。感謝jquery UI庫，我還有一個編輯按鈕，可以讓用戶更改任何單元格的內容。現在我想以某種方式自動保存它們的更改，而不僅僅是表格中的單元格，還包括原始文件。jQuery UI - 將表內容保存到文件

基於一些其他帖子在這裏stackoverflow，我想我需要使用。$ get來調用另一個php頁面爲我做保存。但我不知道如何從表格中傳遞正確的數據。我想通過文件名，這是第2列，和文件內容，第3列，但我不知道我會怎麼做。

這裏是jQuery代碼我迄今（基於從WWW樣本）

$(document).ready(function() { 
    TABLE.formwork('#configs'); 
}); 

var TABLE = {}; 

TABLE.formwork = function(table) { 
    var $tables = $(table); 

    $tables.each(function() { 
     var _table = $(this); 
     _table.find('thead tr').append($('<th class="edit">&nbsp;</th>')); 
     _table.find('tbody tr').append($('<td class="edit"><input type="button"   value="Edit"/></td>')) 
    }); 

    $tables.find('.edit :button').live('click', function(e) { 
     TABLE.editable(this); 
     e.preventDefault(); 
    }); 
} 

TABLE.editable = function(button) { 
    var $button = $(button); 
    var $row = $button.parents('tbody tr'); 
    var $cells = $row.children('td').not('.edit'); 

    if ($row.data('flag')) { // in edit mode, move back to table 
     // cell methods 
     $cells.each(function() { 
      var _cell = $(this); 
      _cell.html(_cell.find('input').val()); 
     }) 

     $row.data('flag', false); 
     $button.val('Edit'); 
     // i think this is where i need to do something like $.get("savefile.php", {filename: '', datatosave: ''}); 
    } 
    else { // in table mode, move to edit mode 
     // cell methods 
     $cells.each(function() { 
      var _cell = $(this); 
      _cell.data('text', _cell.html()).html(''); 

      var $input = $('<input type="text" />').val(_cell.data('text')).width(_cell.width() - 16); 

      _cell.append($input); 
     }) 

     $row.data('flag', true); 
     $button.val('Save'); 
    } 
}

任何幫助，將不勝感激。

來源

2012-02-14 dot

考慮將數據和用戶界面分開。接口（你的表）應該是你的數據的表示，存儲在應用程序中的變量中。當您更改表中的值時，應該更新包含該數據的變量。當你保存時，你保存數據,而不是HTML表。

您的表格只是一個應該從您的數據填充的容器。 JSON是一個很好的結構喲用它來表示和存儲你的數據：

[ 
    { id: "1" , file: "something.txt" , content: "Hello", row: "1", col: "1" }, 
    { id: "2" , file: "happyfile.txt" , content: "I am so happy", row: "1", col: "2" } 
]

然後，您可以藉此JSON數據，循環通過它，並填寫在表格中。

當您更新表時更新關聯的JSON值。將JSON保存在服務器上，而不是HTML。

來源

2012-02-14 16:42:34

jQuery UI - 將表內容保存到文件

回答

相關問題