Как изменить вывод формы колбы с помощью JavaScript - PullRequest
Новая
       60

Как изменить вывод формы колбы с помощью JavaScript

0 голосов
/ 13 сентября 2018

Я создаю простое приложение для колб, которое генерирует выходные данные на основе данных, добавленных в форму колб. Я пытаюсь добиться возможности редактировать этот вывод и в то же время обновлять другие значения на основе этих изменений. Приложение рассчитывает рабочее время, поэтому мне нужно разрешить редактирование полей, таких как начало работы и так далее. Затем эти изменения должны отражать сумму часов в день. Вот выходная страница:

enter image description here

В приведенном выше примере я хотел бы изменить, например, начало работы на 10:00 и ожидать, что общее количество часов сократится с 8 до 7. Надеюсь, вы понимаете, о чем я, ребята.

Вот пример таблицы div, которую я использую: 

<div class="rTableRow" align="center">
  <div class="rTableCell">{{ day['day'].strftime("%d") }}</div>
  <div class="rTableCell">{{ day['day'].strftime("%a") }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['absence'] }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['start-hour'] }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['end-hour'] }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['additional-break'] }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['overtime'] }}</div>
  <div class="rTableCell" contenteditable="true">{{ day['daily-total'] if day['daily-total'] != 0 else '-' }}</div>

Есть ли способ сделать это с помощью JavaScript? Все данные обрабатываются на уровне просмотра и передаются в шаблон.

Большое спасибо за помощь.

1 Ответ

0 голосов
/ 13 сентября 2018

TL; DR: ссылка на jsFiddle: http://jsfiddle.net/bkjwgy10/36/

Вот пример того, как сделать это через javascript. Я предположил, что некоторые предположения были

  • вы проверили данные на входе
  • Вы включили jQuery. Вы также можете сделать это только через javascript, но затем вам нужно будет добавить eventListeners. Документацию по jQuery можно найти здесь .
  • у вас был свой собственный CSS для создания таблиц - jsFiddle покажет формат сверху вниз, поскольку я не включал CSS.

Некоторые соображения:

  • вместо того, чтобы писать собственные расчеты часов, вы можете использовать moment.js - документация для этого здесь .
  • рассмотрите возможность использования другого атрибута, называемого value, который содержит информацию, которая будет использоваться Flask, но не достаточно отформатирована для отображения для зрителей. Зрители увидят что-то другое, но значение будет одинаковым.
  • Я использовал $().closest() вместо $().parent(). Оба дают одинаковый результат, но поскольку вы указали class="rTableCell" и class="rTableRow" вместо <tr> и <td>, я решил, что это уместно.
  • Вы можете легко добавить больше столбцов; Я предположил, что это было исправлено и написал вычисления таким образом.

Так javascript, вы можете добавить это в document.ready или DOMContentLoaded

$('.rTableCell').focusout(function(e) {
    /* insert validation here */

    // yield selected row
    var row = $(this).closest('.rTableRow');
    //alternative: console.log($(this).parent())

    // get children (cells in row)
    var rcells = $(this).closest('.rTableRow').children();

    // set HTML to this
    rcells.last().html(calculate_hours(rcells));
})
...