Symfony 1.4 Drag&Drop Nested Set Editor for Admin Generator

Most of my web application have some kind of hierarchical structure in their models. It gives my users the ability to categorize their data in a pleasant way. The only problem is that its hard to create a user interface for editing these hierarchies. I made a prototype which adds nested set support to the symfony (1.2) generator. This extension allows for full drag&drop nested set support! See for yourself by clicking the image:




click for a real demo of the nested set editor

The editor uses the

treeTable

jQuery plugin with added D&D support.

Full source is available

Today I created the

redotheoffice

github repository. Right there you can find the full source of the project.

If you want to join the development or extend it, please send me an email or leave a reply to this entry.

Explanation

As I’m quite short on time right now, so I’ll only do a brief explanation and give you hints where to look in the source.


The editor is based on a really simple model, using Doctrine’s actAs NestedSet (see

config/doctrine/nested.yml

):

---
Tree:
actAs:
NestedSet:
hasManyRoots: true
rootColumnName: root_id
columns:
name:
type: string(255)

Next step is creating a default admin generator for the ‘Tree’ model. How to do this is clearly explained in Jobeet day 12: the Admin Generator. I think I did something like:

./symfony generate:app backend
./symfony doctrine:generate-admin backend Tree --module=tree

jQuery treeTable plugin

First enhancement is to implement the

treeTable

plugin. This turns the normal generated table into a collapsible tree.

Download the treeTable code, I copied the

.js

and

.css

to the

web/js

and

web/css

and added them to the

apps/backend/config/view.yml

. Also make sure to load

jQuery

:

default:
http_metas:
content-type: text/html

metas: ~

stylesheets:
- jQuery.treeTable.css
- main.css

javascripts:
- http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js - http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js - jquery.treeTable.js

TreeTable is then enabled by overwriting the

apps/backend/modules/tree/templates/_list.php

template with some code that writes the correct classes to the individual rows. Also the table needs an

id

for easy finding the object:

...
<table id="main_list" cellspacing="0">
...
<tbody>
<?php foreach ($pager->getResults() as $i => $tree): $odd = fmod(++$i, 2) ? 'odd' : 'even' ?>
<tr id="node-<?php echo $tree['id'] ?>" class="sf_admin_row <?php echo $odd ?><?php
// insert hierarchical info
$node = $tree->getNode();
if ($node->isValidNode() && $node->hasParent())
{
echo " child-of-node-".$node->getParent()->getId();
}
?>">
<?php include_partial('tree/list_td_batch_actions', array('tree' => $tree, 'helper' => $helper)) ?>
<?php include_partial('tree/list_td_tabular', array('tree' => $tree)) ?>
<?php include_partial('tree/list_td_actions', array('tree' => $tree, 'helper' => $helper)) ?>
</tr>
<?php endforeach; ?>
</tbody>
...
<script type="text/javascript">
function checkAll()
{
var boxes = document.getElementsByTagName('input'); for(index in boxes) { box = boxes[index]; if (box.type == 'checkbox' && box.className == 'sf_admin_batch_checkbox') box.checked = document.getElementById('sf_admin_list_batch_checkbox').checked } return true;
}
$(document).ready(function()  {
$("#main_list").treeTable({
treeColumn: 2,
initialState: 'expanded'
});
}
</script>

Doing this should give you a collapsible tree right inside your Admin Generator table.

Adding Drag&Drop support

Adding drag & drop on the client side is done by adding some javascript to the end of the

_list.php

template, see github. After dropping the item on a new parent the

treeTable

plugin takes care of updating the client visual interface. It’s up to us to send the data back to the server.

For this I added a hidden select on each row of the table:

<td>
<input type="checkbox" name="ids[]" value="<?php echo $tree->getPrimaryKey() ?>" class="sf_admin_batch_checkbox" />
<input type="hidden" id="select_node-<?php echo $tree->getPrimaryKey() ?>" name="newparent[<?php echo $tree->getPrimaryKey() ?>]" />
</td>

To clarify a little I added the screenshot below, in which the input element is still shown. After dropping the javascript seeks the id of the parent dropped on and types it into the input of the dragged item. Sending this to the server will enable the server to update the parent of the item. The code resides in the ‘executeBatchOrder’ function in

apps/backen/modules/tree/actions/actions.class.php

.

TreeForm implementation

The implementation of the TreeForm is also noteworthy. It removes all nested set columns (

root_id

,

lft

,

rgt

and

level

) and adds a fully functional dropdown for selecting the parent. This code can easily be dropped into your project and doesn’t depend on jQuery or any other external library. After submitting the form makes sure all columns for the nested set are properly updated to the new parent. See the image below, and the

TreeForm.class.php

file at github.

Further enhancements

Things can always become better:

Add a

serialize

function to treeTable which enables the possibility to get rid of the hidden input element on each row.

Make it possible to edit the order of children from the same parent (now it always inserts asFirstChild). Possible solution could be an interface like

nestedSortable

Move the

Update tree order

batch action from the dropdown to the table footer (next to the

New

link)

Change this prototype into a Plugin

Thanks for reading!

From: http://redotheoffice.com/?tag=doctrine-drag-drop-admin-generator-symfony-nestedset

Other: http://halestock.wordpress.com/2010/02/03/symfony-implementing-a-nested-set-part-one/

http://symfonyguide.wordpress.com/2009/10/29/quick-doctrine-nestedset-reference/