Question

我是jquery的新手...我刚刚发现了jquery UI库。到目前为止我所拥有的是一个包含表格的php网页。表中的每一行显示3个值：id，文件名和文件内容。感谢jquery UI库，我还有一个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。

jquery UI - 将表内容保存到文件中

1 个答案: