レイアウト：「展開」ボタンがある行のあるテーブル。展開ボタンには、その行のすべての子が表示され、そのすべてが親行といくつかの共通データを共有します。
目標：親の間で子供を引きずります。つまり、データの特定のサブセットを別のセットに移動し、新しい親のデータに基づいて特定のフィールドを自動的に編集します。
これまでのところ、サブ行が拡張されたテーブルがありますが、子供を親の間でドラッグできるようにする方法に頭を悩ませることはできません。親行も並べ替えることができたくありません。静的である必要があります。テーブルは動的に作成され、データベースからデータがフェッチされます。
テーブル：
<table id="loot-table" class="table table-striped">
<thead>
<tr>
<th>Min Level Required</th>
<th>Min Tokens Required</th>
<th>Type of Loot Dropped</th>
<th>Loot Group</th>
<th>Name of Loot Dropped</th>
<th>Quantity of Loot Dropped</th>
<th>Weight of Loot Dropped</th>
<th>Loot Is Available:</th>
</tr>
</thead>
<tbody>
<?php $loot_group_count=-1; foreach($event['lockbox_loot'] as $lockbox_loot){ $loot_group_count++; ?>
<tr class="loot-header-row">
<td><input type="number" value="<?php echo $lockbox_loot['min_level_required']; ?>"></td>
<td><input type="number" value="<?php echo $lockbox_loot['min_tokens_required']; ?>"></td>
<td><input name="loot_group_id[<?php echo $loot_group_count; ?>]" type="text" value="<?php echo $lockbox_loot['loot_group_id']; ?>"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="loot-table-expand-btn" data-group-id="<?php echo $loot_group_count; ?>">Expand</a></td>
</tr>
<?php if($loot){ $i=-1; foreach($loot as $lootitem){
if($lockbox_loot['loot_group_id'] === $lootitem['loot_group_id']){ $i++; ?>
<tr class="loot-row-<?php echo $loot_group_count; ?> hide">
<td></td>
<td></td>
<td><input name="item_loot_group_id[<?php echo $loot_group_count; ?>][<?php echo $i; ?>]" type="text" value="<?php echo $lootitem['loot_group_id']; ?>" disabled="disabled"></td>
<td>
<select name="loot-type[<?php echo $i; ?>]">
<option value="money" <?php if($lootitem['loot_type']==="money"){echo "selected";}; ?>>Money</option>
<option value="respect" <?php if($lootitem['loot_type']==="respect"){echo "selected";}; ?>>Respect</option>
<option value="item" <?php if($lootitem['loot_type']==="item"){echo "selected";}; ?>>Item</option>
<option value="mafia" <?php if($lootitem['loot_type']==="mafia"){echo "selected";}; ?>>Mafia</option>
</select>
</td>
<td><input name="loot_id[<?php echo $i; ?>]" type="text" value="<?php echo $lootitem['loot_id']; ?>"></td>
<td><input name="quantity[<?php echo $i; ?>]" type="number" min="0" value="<?php echo $lootitem['quantity']; ?>"></td>
<td><input name="loot_weight[<?php echo $i; ?>]" type="number" min="0" value="<?php echo $lootitem['loot_weight']; ?>"></td>
<td><input name="is_available[<?php echo $i; ?>]" type="checkbox" value="<?php echo $lootitem['is_available']; ?>" <?php if($lootitem['is_available']){echo "checked";}; ?>></td>
</tr>
<?php }}}} ?>
</tbody>
</table>
非表示のセルを拡張するためのJQueryコード：
$(".loot-table-expand-btn").each(function() {
$(this).on('click', function(){
var group_id = $(this).attr('data-group-id');
$('.loot-row-' + group_id).each(function(){
if($(this).is(":visible")) {
hidden = true;
$(this).hide();
} else {
hidden = false;
$(this).show();
}
});
if(hidden) {
$(this).html('Expand');
} else {
$(this).html('Collapse');
}
return false;
});
});