JS / Ajax sortable
Using csDoctrineActAsSortablePlugin
https://github.com/bshaffer/csDoctrineActAsSortablePlugin
schema.yml
UllShopProduct: ... actAs: ... Sortable: uniqueBy: [ull_shop_category_id] columns: ... ull_shop_category_id: type: integer relations: ... UllShopCategory:
Build model and add a migration which's adds a "position" column (integer, length=8)
HTML Markup
<div class="ull_shop_product_list_by_category"> <table> <tbody> <tr class="ull_shop_product" id="ull_shop_product_3"> <td class="ull_shop_product_list_by_category_quantity"> <select> <option value="0" selected="selected">0</option> <option value="5">5</option> </select> </td> </tr> </tbody> <tbody> ... </tbody> ... </table> </div>
JS
/* * Products sortable */ $(".ull_shop_product_list_by_category tr").css("cursor", "pointer"); // Those children are "tbody" elements $(".ull_shop_product_list_by_category table").each(function() { // .sortable is JQuery UI function $(this).sortable({ axis: "y", stop: function(event, ui) { var id = ui.item.find("tr.ull_shop_product").attr("id"); id = id.replace("ull_shop_product_", ""); var position = ui.item.index() +1; $.ajax({ type: "get", url: "<?php echo url_for('ullShopProduct/sortAjax') ?>?id=" + id + "&position=" + position, }); }, }); });
Update Action
Drag'n'Drop to reorder the items. The following ajax call occurs:
/ullShopProduct/sortAjax?id=10&position=1
- id = the ullShopProduct id = primary key
- position = the new position counting from 1
Action code:
function executeSortAjax(sfRequest $request) { $product = Doctrine::getTable('UllShopProduct') ->find($request->getParameter('id')); //Note: this is provided by a doctrine behavior of csDoctrineActAsSortablePlugin $product->moveToPosition((int) $request->getParameter('position')); return $this->renderText('ok'); }
Nested Sortable
http://johnny.github.io/jquery-sortable/#home
http://mjsarfatti.com/sandbox/nestedSortable/
...