A Pen by isratmir.

Categories tree with jqTree.markdown

Categories tree with jqTree

UI for creating categories and subcategories example.

index.html

<p>Можно создавать категории и подкатегории перетаскиванием</p>
<div class="content">
		<div class="block left">
			<button class="addCat">Add Category</button>
			<button class="delCat">Delete Category</button>
			<div id="tree"></div>
		</div>
		<div class="block right">
			<input type="text" class="title" placeholder="Rename"/>
      
      <input type="text" class="nodeId" placeholder="Set ID"/>
      <button class="save">Save</button>
			<div class="control">
				
			</div>
		</div>
	</div>

script.js

var Tree = function(){
	var $this = this;
	$this.catTree = $('#tree');
	$this.ctrlBlock = $('.control');
	$this.data =[ {
	        label: 'node1',
	        children: [
	            { label: 'child1' },
	            { label: 'child2' }
	        ]
	    },
	    {
	        label: 'node2',
	        children: [
	            { label: 'child3' }
	        ]
	    }
	];

	this.initTree = function(){
		$this.catTree.tree({
    		data: $this.data,
    		dragAndDrop: true,
    		onCreateLi: function(node, $li){
      			$li.find('.jqtree-element').attr('data-id', node.id);
    		}
	 	});	
	}

	this.editTreeNodes = function(event){
		$('.title').val(event.node.name);
    $('.nodeId').val(event.node.id);
		$this.ctrlBlock.html('<a href="#">Edit ' + event.node.name + ' category settings</a><br><a href="#">Edit category Fields</a>');
	}

	this.rename = function(){
		var selected = $this.catTree.tree('getSelectedNode');
		var nameInput  = $('.title');
    var idInput = $('.nodeId');
    $this.catTree.tree('updateNode', selected, {label:nameInput.val(), id: idInput.val()});
		nameInput.val('');
    idInput.val('');
	}

	this.addNode = function(){
		var parentCat = $this.catTree.tree('getSelectedNode');
    $this.catTree.tree('appendNode', {label: 'New Category', id: 'CategoryId'}, parentCat);
		if(parentCat) $this.catTree.tree('openNode', parentCat);
    //$this.selectCreated(parentCat);
	}

  this.selectCreated = function(parentCat){ 
    var childrens= parentCat.children.length;
    var lastChild = parentCat.children[childrens];
    $this.catTree.tree('selectNode', lastChild);
  }
  
	this.delNode = function(){
		var selectedCat = $this.catTree.tree('getSelectedNode');
		$this.catTree.tree('removeNode', selectedCat);

	}

	this.init = function(){
		$this.initTree();
		
		$this.catTree.bind('tree.select', function(event){
			$this.editTreeNodes(event);
		});

		$('.save').click(function() {
			$this.rename();
		});

		$('.addCat').click(function(){
			$this.addNode();
		});

		$('.delCat').click(function(){
			$this.delNode();
		});
	}

	this.init();
}

$(document).ready(function(){
	var catTree = new Tree();
});

style.css

html, body{ min-height: 100%; }
		.content{}
		.block{
			width: 45%;
			float: left;
		}
		.right{ padding: 20px 0 0 20px; }
		.left{ padding: 20px 0 0 40px; }
		.control{ 
			width: 300px;
			height: 200px;
			border: 1px solid #ccc;
			background: #e9e9e9;
			margin-top: 50px; 
			padding: 20px 0 0 15px;
			font: 14px Arial;
			line-height: 25px;
		 }
		#tree{
			width: 300px;	
		}
p{
  font-style: italic;
}