Создание многопольного редактора на месте с помощью JavaScript / JQuery - PullRequest
Новая
       14

Создание многопольного редактора на месте с помощью JavaScript / JQuery

2 голосов
/ 06 июля 2010

Я ищу способ создания редактора на месте в JavaScript, например JEditable или аналогичных плагинов. Однако разница в том, что мой редактор будет многопольным, а не отдельным полем.

Поскольку одна и та же форма будет использоваться в разных частях, т. Е. При редактировании существующих элементов и создании новых элементов, я хотел бы иметь возможность указать функцию обратного вызова для каждого случая без необходимости дублирования общих функций (например, проверка, отмена кнопка и т. д.).

В настоящее время я пытался реализовать это наивно, и код выглядит ужасно, поскольку обработчики событий разбросаны по исходному коду, а не вместе как компонент.

Итак, мой вопрос: каков рекомендуемый способ реализации этого? Если есть плагин jQuery, который обеспечивает функциональность, это может быть самый простой маршрут. Иначе как бы я правильно структурировал свой код?

Ответы [ 2 ]

0 голосов
/ 06 июля 2010

Разделите определение ваших обратных вызовов и выполните поиск в редактируемом обратном вызове желаемого обратного вызова 

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});
0 голосов
/ 06 июля 2010

Проблема в том, что вам нужно отделить данные от отображаемого текста.Для каждого фрагмента данных, который вы отображаете, свяжите json dict (записанный на странице или извлеченный с помощью ajax) с текстом для каждого поля в форме.

Например, если вы работаете с именамипервый, средний, последний), вы отображаете имя следующим образом: 

<span class="editable">Colin M. Hansen</span>

и пишете форму следующим образом: 

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

, и у вас есть подобный дикт, сопоставленный свходные данные в форме: 

name1 = {
    first: 'Colin',
    mi: 'M',
    last: 'Hansen'
};

Общий код, который вы пишете, переключает форму для текста на onclick элемента span и заполняет каждое поле ввода данными из dict.Код отправки сохраняет новые данные на name1 и на сервер и возвращает новый отображаемый текст.

...