jquery plugin: fancytree tree view

  1. https://github.com/mar10/fancytree
  2. https://github.com/mar10/fancytree/wiki/TutorialExtensions
  3. http://wwwendt.de/tech/fancytree/demo/#sample-3rd-jQuery-contextMenu.html
    實作網站: 三國, topeak
function init(){
	$c = $("#c-tabs-1");

	$("#tree").fancytree({
		checkbox: true,//show checkbox
		source: {
			url: base_url + 'admin/ajax/child_nodes?parent_id=1'
		},
		lazyLoad: function(event, data){
			var node = data.node;
			data.result = $.ajax({
				url: base_url + 'admin/ajax/child_nodes',
				data: {parent_id: node.key}, 
				dataType: "json"
			});
		}, 
		click: function(event, data){
			var node = data.node;
			node_detail(node.key);
		}, 
		//Add custom class name
		createNode: function(event, data){
			var node = data.node;
			var member_type = node.data.member_type;
			//console.log(node.data.member_type);
			if(member_type == 1){
				node.addClass('is_agent');
			}else if(member_type == 2){
				node.addClass('is_member');
			}
		},
		//Get selected node
		select: function(event, data) {
			var selNodes = data.tree.getSelectedNodes();
			selected = $.map(selNodes, function(node){
				return node.key;
			});

			names = $.map(selNodes, function(node){
				return node.title;
			});
			//console.log(selected);
		},
		//Source data is loaded and ready to get all nodes
		init: function(event, data) {
			var tree = $("#cat_tree").fancytree("getTree");

			//Follow script will do, too.
			//var node = tree.getNodeByKey("40");
			//node.setActive(true);
			//node.setSelected(true);

			// Expand all tree nodes
			tree.visit(function(node){
				if(node.key == '40'){
					node.setActive(true);
					node.setSelected(true);
				}
			});
		}
	});

	$.contextMenu({
		selector: "#tree span.fancytree-title",
		items: {
			"edit": {name: "修改", icon: "fa-edit"},
			"normal": {name: "正常", icon: "fa-thumbs-up"},
			"sep2": "----",
                        "display setting": {
                           "name": "display setting",
                          "items": {
                            "enable": { "name": "enable",icon: "fa-circle-o"},
                            "disable": { "name": "disable" ,icon: "fa-times"}
                          }
                        },
			"new_agent": {name: "新增代理", icon: "fa-check-circle"},
			"new_member": {name: "新增會員", icon: "fa-check-square"}
		},
		callback: function(itemKey, opt) {
			console.log(opt);
			var node = $.ui.fancytree.getNode(opt.$trigger);
			alert("select " + itemKey + " on " + node);
		}
	});
}

function node_detail(node_id){
	var params = {
		member_id: node_id
	}
	//console.log(params);
	//return;

	$.get(base_url + 'admin/ajax/node_detail', params, function(data){
		if(typeof data.status == 'undefined'){
			alert(data);
		}else if(data.status == 'fail'){
			alert(data.message);
		}else{
			//console.log(data);
			var node = data.data;
			var $t = $('#detail_table');
			$t.find('.id').html(node.id);
			$t.find('.username').html(node.username);
		}
	});
}

function selected_nodes(){
    var tree = $("#cat_tree").fancytree("getTree");
    var nodes = tree.getSelectedNodes();
    //console.log(nodes);
    var values = [];
    for(var i = 0; i < nodes.length; i++){
        var node = nodes[i];
        values.push(node.key);
    }
    return values;
}

jquery-ui-contextmenu

https://github.com/mar10/jquery-ui-contextmenu

You can use icons in your framework or theme.

public\assets\admin\css\styles.min.css

Ajax (Model)

    static function tree($lang='en'){
        $list = [];
        $nodes = self::direct_children(0, $lang);
        //dd($nodes);
        foreach ($nodes as $key => $node) {
            $node_data = [
                'title' => $node->name, 
                'key' => $node->id, 
                'parent' => $node->parent_id, 
                'children' => self::children($node->id, $lang),
                'expanded' => true
            ];

            if($node_data['children'] != false){
                $node_data['folder'] = true;
            }

            $list[] = $node_data;
        }

        return $list;
    }

    static function direct_children($parent_id, $lang='en'){
        $result = self::where('parent_id', $parent_id)
            ->get();
        return $result;
    }

    static function children($parent_id, $lang, $data=[]){
        $children = self::direct_children($parent_id, $lang);
        //dd($children);
        if(count($children) == 0){
            return $data;
        }else{
            foreach($children as $key => $child){
                //logg(self::direct_children($child->id));
                $node_data = [
                    'title' => $child->name, 
                    'key' => $child->id, 
                    'parent' => $child->parent_id, 
                    'children' => self::children($child->id, $lang)
                ];

                if($node_data['children'] != false){
                    $node_data['folder'] = true;
                }

                $data[] = $node_data;
            }
        }

        return $data;
    }

Reference: