gem the_sortable_tree

TheSortableTree is a heme that implements Drag & Drop functionality for trees constructed on the basis of awesome_nested_set or nested_set gems.







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

')

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



No, I am not inclined to dramatize and complicate the implementation process. Each of us has our own preferences. Therefore, I did the most common recursion, which draws a tree with parsers.



Yes, I was criticized - it is slowly drawn, it will not work on a tree of 10,000 elements, it should be different and in general ...



However, since 2008, I have not seen anything else, more accessible, fast and simple. Perhaps I was looking bad.



And here I am, looking down and nervously fiddling with a handkerchief in my hands, I present to you the reincarnation of my helper in the form of a heme based on Rails Engines.



I am sure, for drawing small trees (up to 100 elements) and creating small CMS, where you want to manage a tree by simple dragging, my helper will fit perfectly.



https://github.com/the-teacher/the_sortable_tree







At the moment, there are two options for drawing:

1. Sortable tree (Administrative Interface)
2. Normal Tree (User Interface)

This is how a tree looks like for a user.







It is very easy to install the gem and start using it



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

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

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



Check that all JS libraries are connected



app / assets / javascripts / application.js

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

Consider the use of heme on the example of the Page model.



Add an Osprey Model

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

Add a tree rebuild function to the controller.

 class PagesController < ApplicationController include TheSortableTreeController::Rebuild end 

If you use a reverse tree (sometimes you need an inverted tree, for example, to create a list of news), then use another one.

 class PagesController < ApplicationController include TheSortableTreeController::ReversedRebuild end 

Complete 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 element from one position to another. This method is sewn into heme - it is required.

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

Finish the controller code.



Get the whole tree (direct sample order)

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

Reverse sample order

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

Let's 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 we will 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' 

To make content_for: css and content_for: js work, add in layouts / application.xxx yield (: js) and yield (: css) .



Of course, how you connect js and css is your business.



Everything! The tree should be displayed and dragged.



If something does not work out - download and run LiveDemo .

Customization display

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

 rails g the_sortable_tree:views pages 

To customize a custom 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 be rendered differently - so the views are copied to the view folder of the specified controller.



I hope this is useful to someone.



https://github.com/the-teacher/the_sortable_tree



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