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.
Related
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
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
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.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.
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).