Редактирование JavaScript на месте для одновременного редактирования нескольких полей

Может ли кто-нибудь порекомендовать библиотеку JavaScript или пример кода для встроенного редактирования нескольких полей одновременно? Я ищу что-то похожее на Flickr, где, когда вы нажимаете на любое имя или описание фотографии, они оба превращаются в текстовые поля, а когда пользователь нажимает "сохранить" оба спасены.

Я использую jQuery, поэтому плагин jQuery был бы хорош, но не обязателен. Я уже просмотрел https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery, но не нашел ни одного, поддерживающего несколько полей.


javascript jquery inline-editing edit-in-place
person EMP    schedule 04.05.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете отказаться от использования плагина. У вас может быть что-то вроде: HTML:

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

Затем вы можете написать аналогичный jQuery в $(document).ready():

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

Вы, конечно, можете стилизовать их так, как вам нравится.

(P.S. Код протестирован и РАБОТАЕТ!)

person Alex R.    schedule 04.05.2011
comment
Спасибо. В конце концов я написал это сам, просто надеялся, что кто-то уже сделал работу за меня. Это было немного сложнее, так как у меня было много строк в таблице, и я хотел редактировать все столбцы в строке сразу, а не все на странице. - person EMP; 05.05.2011
comment
@EMP: Не уверен, как вы на самом деле это сделали, поскольку код не был предоставлен. В моем примере у вас может быть скрипт jQuery, чтобы сделать редактируемой всю строку ввода, когда вы щелкаете по одному из них. ХТН - person Alex R.; 06.05.2011

arrow_upward
0
arrow_downward

редактор Джозефа Скотта работает достаточно хорошо. Довольно настраиваемый также из-за того, что все делается с помощью шаблонов и классов CSS. См. демонстрацию здесь. (Он смоделировал это после FLickr.)

Другой встроенный редактор также выглядит многообещающе, хотя я сам не пробовал.

person JasCav    schedule 04.05.2011
comment
Спасибо, я просмотрел оба из них, но не смог найти способ редактировать несколько полей одновременно. - person EMP; 05.05.2011
comment
@EMP - я только что увидел в вашем комментарии к ответу Алекса, что вы редактируете столбцы и строки в таблице. Вы смотрели jqGrid? Он предоставляет такую ​​функциональность (и целое многое другое). Конечно, он специально разработан для структуры сетки (таблицы). - person JasCav; 05.05.2011
comment
Я думал о jqGrid, да, но он не совсем соответствовал тому, что мне нужно (хотя он очень хорош, я использовал его раньше). - person EMP; 06.05.2011