Сортируемая сетка jquery с «заменяемой» индивидуальностью и динамически сохраняемой позицией в MySQL - PullRequest
Новая
       32

Сортируемая сетка jquery с «заменяемой» индивидуальностью и динамически сохраняемой позицией в MySQL

0 голосов
/ 17 февраля 2012

Я успешно настроил jquery «сетку» квадратов, используя «sortable», и php, чтобы обновить arrayorder, используя sorttable («serialize»).Моя проблема в том, что я хочу, чтобы функция меняла положение элементов, а не «сортировала» их.Мне удалось настроить версию свопа сетки, но я не могу понять, как переписать код, который обновляет порядок в базе данных.По сути, я смешиваю две идеи - сортируемую сетку jquery и идеи изменяемой сетки.

Вот часть HTML: 

     <div class="wallgrid">
        <ul id="sortable">
          <div id="list">
            <ul id="swappable">
              <?php
                        include("./functions/connect.php");
                $query  = "SELECT * FROM walls Where Wallnum ="         .         $_GET['wn'] . " ORDER BY listorder ASC";
                        $result = mysql_query($query);
                $wn =  $_GET['wn'];
                while($row = mysql_fetch_array($result, MYSQL_ASSOC))
                {
                $id = stripslashes($row['id']);
                $wid = stripslashes($row['wid']);
                $itemnum = stripslashes($row['itemnum']);
                $costumename = stripslashes($row['costumename']);
                $vcode = stripslashes($row['vcode']);
                $price1 = stripslashes($row['price1']);
                $size1 = stripslashes($row['size1']);
                $price2 = stripslashes($row['price2']);
                $size2 = stripslashes($row['size2']);
                $price3 = stripslashes($row['price3']);
                $size3 = stripslashes($row['size3']);
                $includes = stripslashes($row['includes']);
                ?>
      <li id="arrayorder_<?php echo $id ?>"  class="ui-state-default">

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="91" rowspan="4" align="center" valign="top"><img src="images/product/<?php echo $vcode ?><?php echo $itemnum ?>.jpg" style="width:80px;height:145px;margin-top:10px;" border="0" /></td>
    <td width="75" align="center" valign="top"><a href="#" onClick="parent.location='itemeditor.php?wid=<?php echo $wid?>&wn=<?php echo $_GET['wn']; ?>&panel=<?php echo $_GET['panel']; ?>&ordernum=<?php echo $_GET['ordernum'] ?>'" style="text-decoration: none;color:#990000;font-size:10pt;cursor:pointer;position:relative;right:102px;">edit&nbsp;</a><form action="<?php echo $editFormAction; ?>" name=" witemform" method="POST"><input name="id" type="text" onchange="this.form.submit()" style="width:40px;font-size:12pt;text-align:center;margin-top:-11px;margin-right:-15px;" value="<?php echo $id?>" />
<input name="wid" type="hidden" id="wid" value="<?php echo $wid?>" />
<input name="ordernum" type="hidden" value="<?php echo $_GET['ordernum'] ?>" />
<input type="hidden" name="MM_update" value=" witemform" />
</form></td>
  </tr>
  <tr>
    <td align="left" valign="top"><span style="text-decoration: none;color:#000000;font-size:8pt;font-weight:900;line-height:7pt;"><?php echo $costumename?></span></td>
  </tr>
  <tr>
    <td align="left" valign="top" style="text-decoration: none;color:#000000;font-size:5pt;">
    <div id="cntblck" style="height:77px;overflow:hidden;"><span style="font-weight:400;font-size:8pt;"><?php echo $price1?><br /></span>
    <?php echo $size1?><br />
    <?php echo $price2?><br />
    <?php echo $size2?><br />
    <?php echo $price3?><br />
    <?php echo $size3?><br />
    <?php echo $includes?><br /></div>
    </td>
  </tr>
  <tr>
    <td align="left" valign="top">&nbsp;</td>
  </tr>
</table>


      </li>
      <?php } ?>
    </ul> 
</div>
<!-- Wall Grid End -->

Здесь приведены js для обновления заказа в базе данных: 

    $(function() {
    $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {

            var order = $(this).sortable("serialize") + '&update=update'; 
            var wwn = gup( 'wn' );
            $.post("/functions/updateList.php?wn=" + wwn, order, function(theResponse){

                ;
            });                                                              
        }                                 
        });
    });

});
...