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.
https://github.com/the-teacher/the_sortable_tree
There are currently two rendering options:
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.
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
Consider using a gem using the Page model as an example.
Add osprey to the model
Add a tree rebuild function to the controller
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.
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.
Finish the controller code.
Get the whole tree (direct sampling order)
Reverse sampling order
We draw the tree for the administrator by placing the code in the view.
Or draw a tree for the user.
In order for content_for: css and content_for: js to work, add yield (: js) and yield (: css) to layouts / application.xxx . 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 .
Run the view generator and give it the name of the controller.
To customize the user tree, specify the min parameter
Edit the views and tell the helper where they are:
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.
https://github.com/the-teacher/the_sortable_tree
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!
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.
https://github.com/the-teacher/the_sortable_tree
There are currently two rendering options:
- Sortable Tree (Administrative Interface)
- 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
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 an inverted tree is required, for example, to form a list of news), then use a different inclusion.
class PagesController < ApplicationController
include TheSortableTreeController::ReversedRebuild
end
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
end
end
Finish the controller code.
Get the whole tree (direct sampling order)
class PagesController < ApplicationController
include TheSortableTreeController::Rebuild
def manage
@pages = Page.nested_set.all
end
end
Reverse sampling order
class PagesController < ApplicationController
include TheSortableTreeController::ReversedRebuild
def manage
@pages = Page.reversed_nested_set.all
end
end
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 / application.xxx . 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.
https://github.com/the-teacher/the_sortable_tree
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!