редактировать ячейку таблицы в pug и сохранять отредактированные данные в базу данных - PullRequest
Новая
       7

редактировать ячейку таблицы в pug и сохранять отредактированные данные в базу данных

2 голосов
/ 27 сентября 2019

У меня есть таблица, созданная с использованием pug или jade, я хочу отредактировать ячейку своей таблицы и сохранить отредактированные данные в базу данных. 

    div(class="",style="max-width:60%;display:flex;flex-flow:row wrap;flex-basis:auto;")
    -var columnList = ["Source", "Keyword", "Status", "Description"]

    div(class="tbl_")
      div(class="tblHeader_ fourColumn_")
        each item in columnList
          div(class="tblCell_") #{item}
      div(class="tblBody_")
        each keyword in keywords
          div(class="tblRow_ fourColumn_")
            div(class="tblCell_") #{keyword.Source}
            div(class="tblCell_") #{keyword.Keyword}
            if keyword.Status == 0
              div(class="tblCell_") None
            else if keyword.Status == 1
              div(class="tblCell_") Data Collection
            else if keyword.Status == 2
              div(class="tblCell_") Data Processing
            else if keyword.Status == 3
              div(class="tblCell_")DataCollecton/Processing
            div(class="tblCell_") #{keyword.Description}



    $(function () {
      $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal") {
          e.stopPropagation();
          var currentEle = $(this);
          var value = $(this).html();
          updateVal(currentEle, value);
        }
      });
    });

    function updateVal(currentEle, value) {
      $(document).off('click');
      $(currentEle).html('<input class="thVal" type="text" value="' + value + '"/>');
      $(".thVal").focus();
      $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val());
        }
      });

      $(document).click(function () {
        if($(event.target).attr('class')!="thVal") {
          $(currentEle).html($(".thVal").val());
          $(document).off('click');
        }
      });
    }

Я пробовал приведенный выше код js, нобесполезно, и я также предоставил код таблицы в pug, пожалуйста, предоставьте мне правильный код java-скрипта, который может редактировать ячейку таблицы и сохранять отредактированные данные в базу данных.

1 Ответ

0 голосов
/ 30 сентября 2019

Я не очень знаком с Pug, но вы можете проверить jeditable JS для встроенного редактирования.Это может сработать для вас.

https://appelsiini.net/projects/jeditable/

...