我正在重寫我的一個專案，以更好地與最佳實踐檔案保持一致。我大部分時間都在那里，但似乎我用來使表中的行可排序的 jQuery 不起作用。當我在異步呼叫之后加載表時檢查表的原始 HTML 時，我注意到jQuery 可排序小部件應該嵌入的可排序類不存在（我可以在我的舊代碼中看到它）。
我在此表上復制了相關代碼，但我將在此處包含它：
<!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>
uj5u.com熱心網友回復：
當我看到你的腳本時，似乎沒有加載 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 =ofvar awayLineup = google.script.run可以被洗掉。
參考：
- jQuery 用戶界面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/466574.html