树形结构,根据父子ID生成树形节点

说明:因项目需要,根据父子ID建树的树形控件,要生成对应的树形节点。


  1. 原始数据
    var treejson = [{"id":"1", "pid":"", "name":"node1", "node":""},
    						{"id":"2", "pid":"1", "name":"node2", "node":""},
    						{"id":"3", "pid":"1", "name":"node3", "node":""},
    						{"id":"4", "pid":"1", "name":"node4", "node":""},
    						{"id":"5", "pid":"2", "name":"node5", "node":""},
    						{"id":"6", "pid":"2", "name":"node6", "node":""},
    						{"id":"7", "pid":"2", "name":"node7", "node":""},
    						{"id":"8", "pid":"7", "name":"node8", "node":""},
    						{"id":"9", "pid":"7", "name":"node9", "node":""},
    						{"id":"10", "pid":"7", "name":"node10", "node":""},
    						{"id":"11", "pid":"10", "name":"node11", "node":""},
    						{"id":"12", "pid":"10", "name":"node12", "node":""},
    						{"id":"13", "pid":"10", "name":"node13", "node":""},
    						{"id":"14", "pid":"1", "name":"node14", "node":""},
    						{"id":"15", "pid":"2", "name":"node15", "node":""},
    						{"id":"16", "pid":"10", "name":"node16", "node":""}];
    如图树形结构:

    树形结构,根据父子ID生成树形节点_第1张图片
  2. 格式化结束后数据
    var formatjson = [{"id":"1","pid":"","name":"node1","node":"001"},
    					{"id":"2","pid":"1","name":"node2","node":"001001"},
    					{"id":"5","pid":"2","name":"node5","node":"001001001"},
    					{"id":"6","pid":"2","name":"node6","node":"001001002"},
    					{"id":"7","pid":"2","name":"node7","node":"001001003"},
    					{"id":"8","pid":"7","name":"node8","node":"001001003001"},
    					{"id":"9","pid":"7","name":"node9","node":"001001003002"},
    					{"id":"10","pid":"7","name":"node10","node":"001001003003"},
    					{"id":"11","pid":"10","name":"node11","node":"001001003003001"},
    					{"id":"12","pid":"10","name":"node12","node":"001001003003002"},
    					{"id":"13","pid":"10","name":"node13","node":"001001003003003"},
    					{"id":"16","pid":"10","name":"node16","node":"001001003003004"},
    					{"id":"15","pid":"2","name":"node15","node":"001001004"},
    					{"id":"3","pid":"1","name":"node3","node":"001002"},
    					{"id":"4","pid":"1","name":"node4","node":"001003"},
    					{"id":"14","pid":"1","name":"node14","node":"001004"}];

    如图:
    树形结构,根据父子ID生成树形节点_第2张图片
  3. 详细代码清单如下:

    var treejson = [{"id":"1", "pid":"", "name":"node1", "node":""},
    						{"id":"2", "pid":"1", "name":"node2", "node":""},
    						{"id":"3", "pid":"1", "name":"node3", "node":""},
    						{"id":"4", "pid":"1", "name":"node4", "node":""},
    						{"id":"5", "pid":"2", "name":"node5", "node":""},
    						{"id":"6", "pid":"2", "name":"node6", "node":""},
    						{"id":"7", "pid":"2", "name":"node7", "node":""},
    						{"id":"8", "pid":"7", "name":"node8", "node":""},
    						{"id":"9", "pid":"7", "name":"node9", "node":""},
    						{"id":"10", "pid":"7", "name":"node10", "node":""},
    						{"id":"11", "pid":"10", "name":"node11", "node":""},
    						{"id":"12", "pid":"10", "name":"node12", "node":""},
    						{"id":"13", "pid":"10", "name":"node13", "node":""},
    						{"id":"14", "pid":"1", "name":"node14", "node":""},
    						{"id":"15", "pid":"2", "name":"node15", "node":""},
    						{"id":"16", "pid":"10", "name":"node16", "node":""}];
    
    		
    
    		//格式化数据,建立多叉树
    		function formatTreeData(treejson)
    		{
    			if(!treejson)return;
    			var formatTreeJson = {};
    			for(var i = 0; i < treejson.length; i++)
    			{
    				if(formatTreeJson[treejson[i].pid])
    				{
    					var x = formatTreeJson[treejson[i].pid].i * 1 + 1;
    					formatTreeJson[treejson[i].pid].i = x;
    
    					//node数以三位递增,不足补0
    					treejson[i].node = x*1 < 10 ? ("00" + x):( x*1 > 100 ? x : ("0" + x));
    					formatTreeJson[treejson[i].pid].child.push(treejson[i]);
    				}
    				else
    				{
    					formatTreeJson[treejson[i].pid] = {};
    					formatTreeJson[treejson[i].pid].i = 1;
    					formatTreeJson[treejson[i].pid].child = [];
    					treejson[i].node = "001";
    					formatTreeJson[treejson[i].pid].child.push(treejson[i]);
    				}
    			}
    			return formatTreeJson;
    		}
    
    		
    		var formatJson = null;
    		function generateNode()
    		{
    			formatJson = formatTreeData(treejson);
    			var nodeArr = [];
    			node(formatJson[""], "", nodeArr);
    			
    			// 其中nodeArr就是生产后的数据
    			console.log(JSON.stringify(nodeArr));
    		}
    
    		function node(json, pnode, arr)
    		{
    			if(!json) return;
    
    			for(var i = 0, len = json.child.length; i < len; i++)
    			{
    				json.child[i].node = pnode + json.child[i].node;
    				arr.push(json.child[i]);
    				2015-4-9
    				node(formatJson[json.child[i].id], json.child[i].node, arr);
    			}
    		}
  4. 执行generateNode()得到结果。






你可能感兴趣的:(树形结构,根据父子ID生成树形节点)