Question

下面我已经包含了一个我正在尝试构建的库存/生产数据库的小片段。我的实际站点上的HTML表将从数据库表中提取。

正如您在jQuery中看到的，您可以单击一个正方形，它变得可编辑。编辑完成后（单击另一个td或坐在已编辑的编辑器上而不键入2.5秒）ajax将更改推回到数据库。当我将新值推送到数据库时

我还必须推送旧值，因为数学函数是对值进行的，并在对新值进行相同的数学函数之前从多个表中减去并添加到那些相同的表中（简而言之，减去旧信息和然后加入新的）。

我的问题：如果用户在td单元格之间点击过快地编辑值，我当前记录旧值的方法就不起作用。我希望有人可以帮助我提出更好的逻辑，以便始终拥有正确的“旧价值”。

＆＃13;

$(document).ready(function() {

  var old;

  $('td').click(function() {
    
    if ($(this).data().old === undefined) {
      $(this).data({ old: $(this).text() });
    }
    $(this).prop('contenteditable', true);
    
  });

  var saveTimeout;
  
  // Remove the "saved" class on keydown
  $('td').on('keydown', function(e) {
    $(this).removeClass("saved");
  });

  $('td').on('input blur', function(e) {

    var timeoutDelay = 2500;
    if (e.type == "blur") {
      timeoutDelay = 1;
    }

    // If NOT already saved...
    if (!$(this).hasClass("saved")) {
      
      var _this = $(this); // preserve reference to the input field here
      // Add the "saved" class to prevent other saving
      _this.addClass("saved");

      clearTimeout(_this.data('saveTimeout'));
      _this.data('saveTimeout', setTimeout(function() {
        console.log("Saving " + _this.text()) + "...";
        $.ajax({
            method: "POST",
            url: "updatedatabase.php",
            data: {
              content: _this.text(),
              date: _this.siblings().first().text(),
              prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
              old: _this.data().old
            }
          })
          .done(function(msg) {
            alert(msg);
          });

        toastr.options = {
          "positionClass": "toast-top-center",
          "onclick": null,
          "timeOut": "2500",
        }
        
        toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:');
                
        _this.data({});
        
        _this.prop('contenteditable', false);

      }, timeoutDelay));
    }
  });

  $("td").hover(function() {

    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr:eq(1) th:eq(' + $(this).index() + ')').addClass('highlight');

  }, function() {

    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr:eq(1) th:eq(' + $(this).index() + ')').removeClass('highlight');

  });
});

＆＃13;

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th,
td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}
td:click {
  background-color: blue;
}
.highlight {
  background-color: #E0E0E0;
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>1234567</th>
    <th>7654321</th>
    <th>5678945</th>
  </tr>
  <tr>
    <th>Product</th>
    <th><u>22 ounce Dark</u>
    </th>
    <th><u>12count 4oz Dark</u>
    </th>
    <th><u>24count 6oz TJ</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td>13587</td>
    <td>2203</td>
    <td>4111</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td>14111</td>
    <td>3247</td>
    <td>4332</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td>13212</td>
    <td>3101</td>
    <td>3911</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td>16335</td>
    <td>3299</td>
    <td>4001</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td>15421</td>
    <td>3100</td>
    <td>4078</td>
  </tr>
</table>

＆＃13;

编辑： 12/22：以下是我最新的JavaScript：

$(document).ready(function () {

var old;

$('td').click(function(){

    if ($(this).data().old === undefined) {
        $(this).data({ old: $(this).text() });
    }

    $(this).prop('contenteditable', true);


});

var saveTimeout;

// Remove the "saved" class on keydown
$('td').on('keydown', function(e) {
    $(this).removeClass("saved");
});

$('td').on('input blur', function(e) {

    var timeoutDelay=2500;

    if( e.type == "blur"){
        timeoutDelay=1;
    }

    // If NOT already saved...
    if( !$(this).hasClass("saved") ){
        var _this = $(this); // preserve reference to the input field here

        // Add the "saved" class to prevent other saving
        _this.addClass("saved");

        clearTimeout(_this.data('saveTimeout'));
        _this.data('saveTimeout', setTimeout(function() {
        console.log(_this.data().old);
            $.ajax({
                method: "POST",
                url: "tester.php",
                data: { 
                    content: _this.text(), 
                    date: _this.siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                    old: _this.data().old
                }
            })
            .done(function( msg ) {
                alert( msg );
            });

            toastr.options = {
                "positionClass": "toast-top-center",
                "onclick": null,
                "timeOut": "2500",
            }

            toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:');

            _this.data({});

            _this.prop('contenteditable', false);

        }, timeoutDelay));
    }
});


$("td").hover(function(){



    $(this).addClass('highlight').siblings().first().addClass('highlight');

    $('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');


},function(){



    $(this).removeClass("highlight").siblings().first().removeClass('highlight');

    $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');


});

}）;

Answer 1

您可以使用.data()在其所属的节点上存储旧值。其次，如果已经有旧值，则应确保不要覆盖旧值，并且只有在将其发送到服务器时才清除它。

所以删除旧变量，然后更改：

old=$(this).text();

要：

if ($(this).data().old === undefined) {
    $(this).data({ old: $(this).text() });
}

并将旧值传递给服务器，如下所示：

$.ajax({
    method: "POST",
    url: "updatedatabase.php",
    data: { 
        content: _this.text(), 
        date: _this.siblings().first().text(),
        prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
        old: _this.data().old
    }
})

同样适用于toastr：

toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:');

在此之后，删除该数据，以表明它已发送到服务器：

_this.data().old = undefined;

问题保持正确的价值

1 个答案: