• 开创生态文明新时代 绘出美丽中国新图景 2018-04-26
  • 贵州桐梓:困难群众打工差点错过“移民搬迁”之后 2018-04-26
  • 国乒男女队出征第54届世乒赛“盼天晴” 2018-04-26
  • “鲶鱼”初显 “自主三强”以合作应“开放”? 2018-04-25
  • 第二批慈善组织互联网募捐信息平台遴选结果公示 2018-04-25
  • 国乒男女队出征第54届世乒赛“盼天晴” 2018-04-24
  • 崔世安会见吴政隆 双方就推进苏澳合作深入交谈 2018-04-24
  • 音乐剧《朝暮有情人》演绎港穗两地三代情 2018-04-24
  • 3月70城房价环比涨幅扩大 2018-04-24
  • 国际油价4月19日涨跌互现 2018-04-23
  • 南平市人民防空办公室成立武夷新区人防办事处 2018-04-23
  • 劳动者合法权利也不可“任性”滥用 2018-04-22
  • SKT招募绝地求生队员 网友迫切看到faker与韦神对枪! 2018-04-22
  • 送别余光中:诗人虽远行,乡愁永流传 2018-04-22
  • 连超模肯豆都“爱不释脚”的穆勒鞋 你不了解一下?|穆勒鞋|肯豆|超模 2018-04-22
  • 【jeasyui教程】jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    栏目: jeasyui 发布于: 2014-11-27 20:28:34

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    通常表示一个树节点的方式就是在每一个节点存储一个 parentid。 这个也被称为邻接列表模型。 直接加载这些数据到树形菜单(Tree)是不允许的。 但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单(Tree)数据格式。 树(Tree)插件提供一个 'loadFilter' 选项函数,它可以实现这个功能。 它提供一个机会来改变任何一个进入数据。 本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单(Tree)。

    父/子节点数据

    	[
    	{"id":1,"parendId":0,"name":"Foods"},
    	{"id":2,"parentId":1,"name":"Fruits"},
    	{"id":3,"parentId":1,"name":"Vegetables"},
    	{"id":4,"parentId":2,"name":"apple"},
    	{"id":5,"parentId":2,"name":"orange"},
    	{"id":6,"parentId":3,"name":"tomato"},
    	{"id":7,"parentId":3,"name":"carrot"},
    	{"id":8,"parentId":3,"name":"cabbage"},
    	{"id":9,"parentId":3,"name":"potato"},
    	{"id":10,"parentId":3,"name":"lettuce"}
    	]
    

    使用 'loadFilter' 创建树形菜单(Tree)

    	$('#tt').tree({
    		url: 'data/tree6_data.json',
    		loadFilter: function(rows){
    			return convert(rows);
    		}
    	});
    

    转换的实现

    	function convert(rows){
    		function exists(rows, parentId){
    			for(var i=0; i<rows.length; i++){
    				if (rows[i].id == parentId) return true;
    			}
    			return false;
    		}
    		
    		var nodes = [];
    		// get the top level nodes
    		for(var i=0; i<rows.length; i++){
    			var row = rows[i];
    			if (!exists(rows, row.parentId)){
    				nodes.push({
    					id:row.id,
    					text:row.name
    				});
    			}
    		}
    		
    		var toDo = [];
    		for(var i=0; i<nodes.length; i++){
    			toDo.push(nodes[i]);
    		}
    		while(toDo.length){
    			var node = toDo.shift();	// the parent node
    			// get the children nodes
    			for(var i=0; i<rows.length; i++){
    				var row = rows[i];
    				if (row.parentId == node.id){
    					var child = {id:row.id,text:row.name};
    					if (node.children){
    						node.children.push(child);
    					} else {
    						node.children = [child];
    					}
    					toDo.push(child);
    				}
    			}
    		}
    		return nodes;
    	}
    

    下载 jQuery EasyUI 实例

    jeasyui-tree-tree6.zip


    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jeasyui教程】jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
    IT技术书籍推荐:
    算法导论(原书第3版)
    算法导论(原书第3版)
    Thomas H.Cormen (作者), Charles E.Leiserson (作者), Ronald L.Rivest (作者), Clifford Stein (作者), 殷建平 (译者), 徐云 (译者), 王刚 (译者), 等 (译者)
    《算法导论(原书第3版)》内容简介:在有关算法的书中,有一些叙述非常严谨,但不够全面;另一些涉及了大量的题材,但又缺乏严谨性?!端惴ǖ悸?原书第3版)》将严谨性和全面性融为一体,深入讨论各类算法,并着力使这些算法的设计和分析能为各个层次的读者接受。全书各章自成体系,可以作为独立的学习单元;算法以英语和伪代码的形式描述,具备初步程序设计经验的人就能看懂;说明和解释力求浅显易懂,不失深度和数学严谨性。全书选材经典、内容丰富、结构合理、逻辑清晰,对本科生的数据结构课程和研究生的算法课程都是非常实用的教材,在IT专业人员的职业生涯中,《算法导论(原书第3版)》也是一本案头必备的参考书或工程实践手册。