javascript - How to create Tree with checkboxes using JSON data with Parent Child Relation? -

javascript - How to create Tree with checkboxes using JSON data with Parent Child Relation? -

i have json info , json info has parent kid relation . want create tree construction it. found many plugins , libraries can't found requirement . getting json info using php script.

here image has tree construction want create . i'm stuck @ it.i know json not displayed in image want show tree should .how create tree in image.all want javascript code handle , create type of construction of tree . working illustration must & much appreciated.

you can utilize json format , tree should collapsible.also provide required json format it.

and json info follows :

{ "2": { "5": "wrist watch" }, "5": { "9": "men's" }, "18": { "3": "clothing" }, "28": { "1": "perfumes" }, "29": { "7": "laptop", "10": "tablets" }, "30": { "8": "mobile" }, "31": { "2": "books" }, "33": { "6": "electronics" }, "34": { "4": "home & kitchen\n" } }

if want roll own, keyword in "trees" recursion. needs back upwards depth of info , code , info should both back upwards recursion.

this means json info should recursive structure, each node looks same (and looks this):

{ id: 1, // info id title: "title", // display title children: [ // list of children, each same construction // list of kid nodes ] }

note: i have changed sample info contain more depth 2 levels never shows recursion problems.

e.g.:

{ id: 0, title: "root - not displayed", children: [{ id: 1, title: "option 1", children: [{ id: 11, title: "option 11", children: [{ id: 111, title: "option 111" }, { id: 112, title: "option 112" }] }, { id: 12, title: "option 12" }] }, { id: 2, title: "option 2", children: [{ id: 21, title: "option 21" }, { id: 22, title: "option 22" }] }, { id: 3, title: "option 3", children: [{ id: 31, title: "option 31" }, { id: 32, title: "option 32" }] }] }

the recursive function looks this:

function additem(parentul, branch) { (var key in branch.children) { var item = branch.children[key]; $item = $('<li>', { id: "item" + item.id }); $item.append($('<input>', { type: "checkbox", name: "item" + item.id })); $item.append($('<label>', { for: "item" + item.id, text: item.title })); parentul.append($item); if (item.children) { var $ul = $('<ul>').appendto($item); $item.append(); additem($ul, item); } } }

jsfiddle: http://jsfiddle.net/trueblueaussie/0s0p3716/20/

the code recurses structure, adding new uls , lis (with checkbox etc ) goes. top level phone call provides initial root starting points of both display , data.

additem($('#root'), data);

the end result looks this:

if want toggle visiblity, based on checked state, utilize this:

$(':checkbox').change(function () { $(this).closest('li').children('ul').slidetoggle(); });

if want labels toggle checkboxes, utilize this:

$('label').click(function(){ $(this).closest('li').find(':checkbox').trigger('click'); });

note: i have provided basic of styling typically "to taste". examples in links shown in answer.

-- updated:

amended: possible wrong ids items 31 & 32?

function improve selection , de-selection(for parents cascading kid nodes):

$(function () { additem($('#root'), data); $(':checkbox').click(function () { $(this).find(':checkbox').trigger('click'); var matchingid = $(this).attr('id'); if ($(this).attr('checked')) { $('input[id*=' + matchingid +']').each(function() { $(this).removeattr('checked'); $(this).prop('checked', $(this).attr('checked')); }); } else { $('input[id*=' + matchingid +']').each(function() { $(this).attr('checked', 'checked'); $(this).prop('checked', $(this).attr('checked')); }); } }); $('label').click(function(){ $(this).closest('li').children('ul').slidetoggle(); });

-- update fiddle shown here(jsfiddle) , work improve , allow click text expand without selecting @ same time - know find far more useful. help (and personal preference) see values , options available without having select first.

javascript jquery html json tree