gem the_sortable_tree

    TheSortableTree - a gem that implements the Drag & Drop functionality for trees built on the basis of awesome_nested_set or nested_set gems.

    In 2008, when we made our first social program on rails, I first encountered the better_nested_set gem. The gem was beautiful (I mean, in fact, not by the code, the implementation was still lame) and, perhaps, it alone was enough to convince me to forget programming in PHP, like a bad dream.

    We used the gem to form a multi-level comment tree. But there was one thing but ... At that moment there was not a single helper who could draw these trees. Because of this, I had to invent my own bikes. I made my bike too.

    No, I am not inclined to dramatize and complicate the implementation process. Each of us has his own preferences. So I did the most common recursion, which draws a tree using parshels.

    Yes, they criticized me - it’s slowly rendered, it won’t work on a tree of 10,000 elements, it needs to be different and in general ...

    However, since 2008, I have not seen anything else, more accessible, quick and simple. Maybe I was looking badly.

    And so, having looked down and nervously fingering a handkerchief in my hands, I present to you the reincarnation of my helper in the form of a gem based on Rails Engines.

    I’m sure that for drawing small trees (up to 100 elements) and creating small CMS where you want to manage the tree with a simple drag and drop, my helper is perfect.

    There are currently two rendering options:

    1. Sortable Tree (Administrative Interface)
    2. Plain Tree (User Interface)

    This is what a tree looks like for a user.

    Installing a gem and starting to use it is very simple.

    Complete your gemfile. We need HAML, Awesome nested set, and the_sortable_tree render helper itself.

    gem 'haml'
    gem 'awesome_nested_set' # gem 'nested_set'
    gem 'the_sortable_tree'

    I specifically removed the hard dependency on HAML so that ERB or SLIM fans could use the helper too, but you guys will have to convert the views from the haml yourself.

    Check that all JS libraries are connected

    app / assets / javascripts / application.js

    //= require jquery
    //= require jquery-ui
    //= require jquery_ujs

    Consider using a gem using the Page model as an example.

    Add osprey to the model

    class Page < ActiveRecord::Base
      include TheSortableTree::Scopes

    Add a tree rebuild function to the controller

    class PagesController < ApplicationController
      include TheSortableTreeController::Rebuild

    If you use a reverse tree (sometimes an inverted tree is required, for example, to form a list of news), then use a different inclusion.

    class PagesController < ApplicationController
      include TheSortableTreeController::ReversedRebuild

    Complete the routes.

    We need one action to display the tree. What you call it is not important. I have this : manage .

    rebuild - a method that moves a tree item from one position to another. This method is sewn into heme - it is required.

    resources :pages do
      collection do
        get :manage
        post :rebuild

    Finish the controller code.

    Get the whole tree (direct sampling order)

    class PagesController < ApplicationController
      include TheSortableTreeController::Rebuild
      def manage
        @pages = Page.nested_set.all

    Reverse sampling order

    class PagesController < ApplicationController
      include TheSortableTreeController::ReversedRebuild
      def manage
        @pages = Page.reversed_nested_set.all

    We draw the tree for the administrator by placing the code in the view.

    - content_for :css do
      = stylesheet_link_tag 'the_sortable_tree', :media => :screen
    - content_for :js do
      = javascript_include_tag 'jquery.ui.nestedSortable'
    = sortable_tree @pages, :new_url => new_page_path, :max_levels => 4

    Or draw a tree for the user.

    - content_for :css do
      = stylesheet_link_tag 'the_sortable_tree_min', :media => :screen
    = sortable_tree @pages, :new_url => new_page_path, :path => 'the_sortable_tree_min'

    In order for content_for: css and content_for: js to work, add yield (: js) and yield (: css) to layouts / . Of course, the way you connect js and css is up to you. All! The tree should be displayed and dragged. If something doesn’t work, download and run LiveDemo .

    Display customization

    Run the view generator and give it the name of the controller.

    rails g the_sortable_tree:views pages 

    To customize the user tree, specify the min parameter

    rails g the_sortable_tree:views pages min

    Edit the views and tell the helper where they are:

    = sortable_tree @pages, :new_url => new_page_path, :path => 'pages/the_sortable_tree'

    I assume that different models can render in different ways - therefore, the views are copied to the folder of the views of the specified controller.

    I hope this is useful to someone.

    P.S .: If you notice a spelling or syntax error, an error in the code or any other error, please let me know in PM, I will be very grateful to you. Thanks in advance!

    Also popular now: