Встроенное редактирование Javascript, как отменить редактирование, чтобы иметь исходные данные? - PullRequest
Новая
       6

Встроенное редактирование Javascript, как отменить редактирование, чтобы иметь исходные данные?

0 голосов
/ 15 июня 2009

У меня есть данные 

<tr id="row_1">
  <td id="td_1_1">Text 1</td>
  <td id="td_2_1">Text 2</td>
  <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr>

тогда в javascript 

function editRow(row_id) {
   //some ajax to retrieve html in the format
   //<td><input type="text" name="td_1" value="Text 1"></td>
   //<td><input type="text" name="td_2" value="Text 2"></td>
   //<td><input type="submit" name="submit" value="submit"></td>
}

в функции editRow я делаю ajax и извлекаю TD и заменяю [$(row_id).html(html)] TD строки. Все это прекрасно работает. Но мне нужно иметь одну кнопку отмены, нажатие которой возвращает исходные ТД (то есть ... без полей ввода). Есть идеи, как добиться этой функциональности? Нужно ли копировать html строки перед редактированием в переменную, а затем отменить заменить поля ввода html? Спасибо за вашу помощь.

EDIT

Кроме того, если пользователь щелкает где-то еще на странице, он должен это отменить и вернуть исходные данные. Как связать это действие?

Ответы [ 2 ]

1 голос
/ 15 июня 2009

Я думаю, чтобы получить начальную функциональность с помощью jQuery, вы можете посмотреть на плагин jEditable . Это очень функциональный плагин, который позволяет вам нажимать на некоторый текст, создавать редактируемую область, отменять и т. Д. Я предполагаю, что как только пользователь нажимает кнопку ОК или Сохранить, вам не нужно возвращаться к оригиналу, это только в середине редактирования, что это это проблема. jEditable позаботится об этом.

1 голос
/ 15 июня 2009

Прежде всего - загляните в рамки Javascript. Тип функционала, о котором вы говорите, достаточно продвинут, и если вы действительно хотите, чтобы ваш код работал во всех браузерах правильно, вы не должны делать это самостоятельно. Это также позволит вам сохранить ваш HTML свободным от уродливого встроенного Javascript и тому подобного, что считается плохой практикой. Как говорится, вот мысль:

Рассматривали ли вы наличие двух строк на элемент: одну в «режиме редактирования» и одну в «обычном режиме»? Вы можете назначить строки «режим редактирования» скрытыми по умолчанию, а когда кто-то нажимает на ссылку редактирования, вы можете скрыть эту строку и отобразить ее для редактирования. Это было бы действительно проще, чем сделать AJAX-вызов для получения формы редактирования.

EDIT

Вот код, с которого можно начать : 

function editRow(row_id, callback) {
   // you would get this dynamically through ajax, thus why we need the callback
   var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>';
   callback(html);
}

$('a.edit', '#data').click(function() {
    var $tr = $(this).closest('tr');
    var id = $tr.attr('id').split('_').pop();
    var edit_row = '#edit_' + id;
    if($(edit_row).length == 1) { // edit row already exists
        $tr.hide();
        $(edit_row).show();
    } else { // doesn't exist, fetch it
        editRow(id, function(html) {
            $tr.hide();
            $tr.after(html);
        });
    }
    return false;
});

$(window).click(function(e) {
    $('tr.edit:visible').each(function() {
        var $tr = $(e.target).closest('tr');
        var id = $(this).attr('id').split('_').pop();
        console.log(e.target, $tr, this);
        if($tr.attr('id') != this.id) {
            $(this).hide();
            $('#row_' + id).show();
        }
    });
});

Я, вероятно, должен отметить, что существует множество плагинов jQuery, которые делают это за вас, и в зависимости от потребностей вашего приложения вам может быть лучше просто извлекать строки каждый раз, а не извлекать их вообще, и т.д. Это просто приблизительное представление о том, что вам, возможно, придется сделать, чтобы достичь того, чего вы хотите, а остальное зависит от вас. :)

...