jquery UI - сохранить содержимое таблицы в файл

Question

Я новичок в jquery ... Недавно я открыл библиотеку пользовательских интерфейсов jquery. что я до сих пор являюсь веб-страницей php, содержащей таблицу. Каждая строка в таблице показывает 3 значения: идентификатор, имя файла и содержимое файла. благодаря библиотеке пользовательского интерфейса jquery у меня также есть кнопка EDIT, которая позволяет пользователю изменять содержимое любой из ячеек. теперь я хотел бы как-то автоматически сохранить их изменения не только в ячейке в таблице, но и в исходном файле.

, основанный на некоторых других сообщениях здесь, в stackoverflow, я думаю, мне нужно использовать. $ Get to call another php page, чтобы сделать для меня сохранение. но я не знаю, как передать правильные данные из таблицы. я хотел бы передать имя файла, которое является столбцом 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'); 
    } 
}​ 

любая помощь будет оценена.

Answer 1

Учитывайте разделение данных и пользовательский интерфейс. Интерфейс (ваша таблица) должен быть репрезентацией ваших данных, которые хранятся в переменных в приложении. Когда вы меняете значения в таблице, вы должны обновить переменные, содержащие эти данные. Когда вы экономите, вы Сохраните данные, не 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.