easyui tree 实现类似ztree的数据格式

这几天鼓捣easyui的tree感觉太伤不起了,那格式数据多了直接醉了于是借鉴网络上的一下例子重写了他的loadFilter<要不是知道有这方法估计就得研究源代码了>

不说那么多,几步搞定直接上代码


第一:重写easyui tree的loadFilter

$.fn.tree.defaults.loadFilter = function (data, parent) {
		    var opt = $(this).data().tree.options;
		    var idFiled,textFiled,parentField;
		    if (opt.parentField) {
		        idFiled = opt.idFiled || 'id';
		        textFiled = opt.textFiled || 'text';
		        parentField = opt.parentField;
		        var i,l,treeData = [],tmpMap = [];
		        for (i = 0, l = data.length; i < l; i++) {
		            tmpMap[data[i][idFiled]] = data[i];
		        }
		        for (i = 0, l = data.length; i < l; i++) {
		            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
		                if (!tmpMap[data[i][parentField]]['children'])
		                    tmpMap[data[i][parentField]]['children'] = [];
		                data[i]['text'] = data[i][textFiled];
		                tmpMap[data[i][parentField]]['children'].push(data[i]);
		            } else {
		                data[i]['text'] = data[i][textFiled];
		                treeData.push(data[i]);
		            }
		        }
		        return treeData;
		    }
		    return data;
		};
不用在意什么意思,copy就行(其实就是自己拿到数据用js组装成他想要的,好在哪里呢,耗费的是用户的性能,减轻了后台的压力)


第二:在初始化tree的时候增加几个属性

$('#tree').tree({    
		    url:'system/user/getMenu',
		    parentField:"pid",
			textFiled:"text",
			idFiled:"id",
			onClick : function(node) {
				if($(this).tree('isLeaf',node.target)){
					addTab(node.text, node.url);
				}else{
					$(this).tree('toggle',node.target);
				}
			}
		}); 
ps:
textFiled:你要用来显示的文本字段
<pre name="code" class="javascript">parentField:父节点的字段
<pre name="code" class="javascript">idFiled:自己的id字段

 
 
 
 
写这些主要是记录一些自己以后会用到的,也希望能帮助他人提高一点效率。

你可能感兴趣的:(数据结构,ztree,easyui,tree,数据格式)