Category tree with jQuery checkboxes

Begin

We make a catalog. It was necessary to create a tree of product categories / firms / services with infinite nesting. Each category can be marked with a checkbox, so that later you can get a list / array of all marked categories (for example, to search through them).

I wrote such a tree . Implemented as a plugin to your favorite jQuery)

What can:

• If an empty div is specified, it loads all categories from the specified script, and subcategories (nested ul, if li has a folder class and does not have a nested list (ul) - the tree will automatically load this list from the specified script with the specified recursion depth (this is a script concern requested data with the required parameters).
• If a ready list is specified, then you can collapse / expand subcategories, mark the necessary ones, which will be highlighted by the specified class
• Get selected category numbers (value of checkboxes) in an array
• The ability to search all downloaded tree branches, display the search result in the specified div (specify the div for the search, in which the line to enter the query + div (empty) to display the results)
• The number of search results can be limited (in the parameters)
• When you click on one of the results found, the tree opens to display the specified branch and it is highlighted by the class (specified in the parameters)
• You can specify that when you click on the parent category - internal also stand out
• You can set a message that appears when you try to select an extra checkbox if their number is limited.

It seems to have forgotten nothing)

Parameters:

• _loadPath - path to the file from where the categories will be loaded.
• _loadLvl - default number of subcategories - 0 - load all nested
• _selectChildren - whether or not to select child subcategories when selecting the parent
• _liminSelected - limit the number of marked categories
• _limitMessage - message when exceeding the number of marked categories
• _searchDiv - container for searching (should be a string and div)
• _showResult - how many search results found show 0-all.
• _hlClass - the class by which the found categories will be highlighted
• _checkedClass - class highlighting marked categories.

Using:

$('.sp-tree-container').tree({_loadPath: 'php/li.html'});

* This source code was highlighted with Source Code Highlighter.

Let me explain a little: the li element that has nested lists must have the folder class, all ul that should be visible have the expanded class. The category name is pushed into the span, just by clicking on it and the sub-branch is minimized / expanded.

Well, everything seems to be ... I

haven’t brought much beauty yet, so don’t judge. I will accept constructive criticism;)