Question

I'm trying to create a navigation menu editor comprised of multiple nested, sortable forms that will ultimately be submitted en masse as one giant nested JSON data blob containing all of the form data.

The two libraries I'm examining are nestableSortable (https://github.com/mjsarfatti/nestedSortable) and Nestable (https://github.com/dbushell/Nestable). These two libraries seem to be the most commonly used projects for this type of work, however neither seems to have built-in functionality for serializing and nesting these forms. Right now I'm under the assumption that either library will require me to somehow build this functionality myself.

Nestable appears to be a bit newer and doesn't depend on JQuery-UI, while nestableSortable appears to be a bit more feature-rich. I'm also wondering if anyone has had a similar issue with nested forms and whether they have any tips on how to get either of these libraries to easily serialize nested forms into a JSON structure, and whether either of these libraries is better suited for such a project.

Was it helpful?

Solution 2

I started with nestedSortable and then switched to nestable. I am now switching back to nestedSortable because it is compatible down to IE7 (a project requirement). Yes, it is easy to appreciate the more minimalistic structure of nestable, however, be sure to test with your target browser(s) before committing to either of these (excellent) utilities.

BTW, both have the ability to serialize their data (nestable has one, nestedSortable has multiple).

OTHER TIPS

If anyone is interested, after further inspection I found that Nestable requires this format in order to work:

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
    </ol>
</div>

I wasn't particularly pleased with the idea that the JS library would be so strict regarding required element attributes, as I felt that the Javascript should handle this somewhat independently of the markup. Because of this, I wound up choosing nestedSortable over the Nestable library.

Further, nestedSortable appears to have useable properties for left/right/parent attributes for nodes in the tree, which may be helpful on the server side when performing tree manipulations.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top