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

Question

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

основываясь на некоторых других постах здесь на 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');
    }
}​

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

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.