Multilevel menu administration using js drag an drop - javascript

I'm looking for some input on a certain element of a project I'm developing. I want to include multilevel menus that easily manageable in the back end. I really like the structure wordpress uses in their back end to let users create menu's intuitively by dragging the menu items around. I'm looking for a bit of guidance with the multilevel part. I have made sortable lists before using jquery ui, but I'm a bit lost on the multilevel functionality (the js part)
I'd appreciate any input (plugins, examples, concepts) on this.
Thanks.

jsTree is a plugin designed to do this. It's a good bet that there are others -- try searching the jQuery plugins.

Related

How i can create drag and drop functionality over html doc?

I have html something like that. I want to make it editable like form builder.
Example:
https://app.pandadoc.com/a/#/documents/BQ8wx4gSwrtETmVvFnWoXC/widgets?widget=XFWXJPW7gpJVzZEnYZFGoh
Want functionality something like example.
This is a very broad question that's going to be hard to answer, but at the very least, you're going to need JavaScript and probably something like jQueryUI for some of the UI interactions.
Start with some of the resources below and go from there. When you run into specific problems, come back and ask specific questions with code that we can use to recreate and troubleshoot the problem with:
jQueryUI Droppable for drag and drop.
jQueryUI Sortable for functionality similar to form builder.
Drag and Drop File Uploading example from CSS Tricks. (this is just one implementation. There are many ways to do this.
DropzoneJS Another drag and drop file uploader.

How to create Sortable, drag and drop multi-level list in Javascript

I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.
You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.
I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
It seems to work pretty well.
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
Hope this is helpful.
So while you can use https://github.com/dbushell/Nestable or http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.
I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm

Radiobutton Tree Control

I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.

what is the best way to create javascript menu?

What is the best way or an easy way to create a javascript menu. When I say best, I mean there are many softwares that help in creating menus, for eg. Sothink DHTML menu. Isnt there a menu control available in javascript?
There is no reason to buy or even just install a program solely for the purpose of constructing a JavaScript menu.
First of all, the menu itself should not contain any JavaScript code. It should just be a nested list. You shouldn't need a program to write that code for you. If you do, then you're probably using a WYSIWYG editor anyways, and any WYSIWYG HTML editor will create an unordered list for you.
Once you've created the menu structure, you just need to add the display style and behavior to make it look/behave like a dropdown or flyout menu. This can be done either in pure CSS or with CSS + JavaScript. Some people prefer to use JavaScript to turn a regular list into a dropdown/flyout menu because they think using display: none is bad for SEO, and if you style items like that to begin with, then people without JavaScript will not be able to see the hidden menu items. However, there are ways around both of those problems using pure CSS.
If you're using jQuery, then there are a number of jQuery plugins that let you create your menus with just 1-2 lines of code. Otherwise, there are standalone scripts and that can do the same.
https://stackoverflow.com/questions/4177888/what-is-the-best-way-to-create-javascript-menu-closed
You just asked this question a couple of minutes ago?
Here is JQuery cool menus that you can reference.Anyway Javascript is client side script language.There is no control at all.

jQuery Scrollable, Sortable, Filterable table

I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).

Categories

Resources