easyui扁平Json生成树形菜单

最新推荐文章于 2016-12-23 11:28:56 发布

转载最新推荐文章于 2016-12-23 11:28:56 发布 · 2.9k 阅读

easyui 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用EasyUI中的树控件（Tree）来展示和操作ZTree的扁平PID结构数据集。通过自定义加载过滤函数，实现了数据的层次化展示，并通过实例演示了如何获取节点信息。

/**
 *  {@link} http://easyui.btboys.com/post-77.html
 *  ztree的简单数据结构（扁平pid结构数据集，也就是id，text,pid形式
 *  <ul class="easyui-tree" data-options="url:'${pageContext.request.contextPath}/menuAction!allTreeNode.action',parentField:'pid' "></ul>
 *  @param parentField:pid 
 */
$.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;
};