jQuery 我正在使用我的 table 的行 sortable 不工作

Question

我正在重写我的一个项目以更好地符合 the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed 不存在（我可以在我的旧代码中看到它）。

我在这个 sheet 上复制了相关代码，但是 I'll include it here:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base target="_top">
    <?!= include('1.1 openPackV2Stylesheet'); ?>
  </head>
  <body>
    <div class="grid-container">
      <table id="awayLineup">
        <thead>
          <tr>
            <th></th>
            <th>Rtg</th>
            <th>Season</th>
            <th>Name</th>
            <th>Age</th>
            <th>Team</th>
            
            <th>OB</th>
            <th>Out</th>
            <th>Walk</th>
            <th>Single</th>
            <th>Single+</th>
            <th>Double</th>
            <th>Double+</th>
            <th>Triple</th>
            <th>Homer</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

    <?!= include('1.1 openPackV2Javascript'); ?>

  </body>
</html>

1.1 openPackV2Javascript

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
  $(function() {
    var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
      .getLineupV2();
  });

  function displayAwayLineup(awayLineup){
    // $('.loading').style.display("hidden");
    var tbody = $('#awayLineup > tbody');
    for (i in awayLineup){
      tbody.append(
        '<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
    }
  }

  // make tables sortable

  $(window).on("load", function(){
    $("table tbody").sortable({
      helper:function(e,row){
        var originalCells = row.children();
        var cloneRow = row.clone();
        cloneRow.children().each(function(index){
          
          $(this).width(originalCells.eq(index).width());
        
        })
        return cloneRow;
      }
    });
  });
</script>

Answer 1

当我看到你的脚本时，似乎 jQuery UI 没有加载。那么，下面的修改呢？

发件人：

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
  $(function() {
    var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
      .getLineupV2();
  });

收件人：

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
  $(function() {
    google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
  });

在您的脚本中，var awayLineup = google.script.run 的 var awayLineup = 可以删除。

参考：

jQuery UI

jQuery 我正在使用我的 table 的行 sortable 不工作

jQuery I'm using to make the rows of my table sortable is not working

javascript

jquery

web-applications

google-apps-script

发件人：

收件人：

参考：