我正在尝试通过MySQL数据库填充虚拟架子类型的东西。 shelfPos列保留该项目在货架上的位置。每行/“架子”均以<div class="shelfRow">开头,显然以</div>结尾,因此其样式和位置均正确。货架上的物品可以使用jQuery UI拖放式交互方式移动。

总体布局是这样的:http://jsfiddle.net/aRA5D/
每个书架可容纳5个物品(从左到右)。

我在摆架子时遇到麻烦。目前,我得到了这一点:(这代替了HTML)

<?php
$sql="SELECT * FROM shelf WHERE userID='$userID'";
$result=mysql_query($sql);

if (mysql_num_rows($result) == 0) {
    // Show a message of some sort? (No items)
}
else {
    $tries = 1;
    $times = 10; // How many shelves. (10 = 2 shelves)

    while(($row = mysql_fetch_array($result)) && ($tries <= $times)) {
        while ($tries <= $times) {
            if ($tries == $row['shelfPos']) {
                echo '<div class="drop" id="drop'.$tries.'"><div class="boxArt" id="'.$row['gameID'].'">'.$row['gameID'].'</div></div>';
            }
            else {
                echo '<div class="drop" id="drop'.$tries.'"></div>';
            }

            $tries = $tries + 1;
        }

        $times = $times + 5;
    }
}
?>


它有几处错误。它不包含<div class="shelfRow"> html(不知道如何/在何处放置它,因为它需要在每5个“空白”和真实项目后回显-可能是for循环?),它需要我输入架子数(在这种情况下为2)。是否可以根据物品的位置确定需要多少个架子?这样做很尴尬,因为它还需要在它们之前和之后回显“空白” .drop div,以便可以左右移动项目。

希望这一切都有道理。谢谢您的帮助!

最佳答案

首先,您需要按ShelfPos顺序获取数据

"SELECT * FROM shelf WHERE userID='$userID' order by shelfPos asc"


并尝试以下代码:

...
$i = 0;

while($row = mysql_fetch_array($result)) {

      //Each 5
      if($i % 5 == 0) echo '<div class="shelfRow">';

        if ($i == $row['shelfPos']) {
            echo '<div class="drop" id="drop'.$i.'"><div class="boxArt" id="'.$row['gameID'].'">'.$row['gameID'].'</div></div>';
        }
        else {
            echo '<div class="drop" id="drop'.$i.'"></div>';
        }

        //close shelfrow div
        if($i % 5 == 4) echo '</div>';

        $i++;
    }

 //to complete the loop
 $shelv_left = 5 - ($i % 5);
 if($shelv_left < 5) {
 for($j=0; $j < $shelv_left; $j++) {
    echo '<div class="drop" id="drop'.($i+$j).'"></div>';
 }
 echo '</div>'; // end shelfrow div
}
...

10-06 07:56