extjs tree 树

21 篇文章 1 订阅
8 篇文章 0 订阅

从数据库中,获取数据,生成树,效果图:

设计表:id,name,topId(根节点),preId(父节点),path(当前节点路径),isLeaf(是否有子节点)

树生成的逻辑:判断父节点是否存在,不存在,则是根节点,否则就是子节点,再根据父节点Id是否等于ID,判断子节点所属的父节点,最后拼接json,传送到前台。

java:

	public String findTree(){
		List<Classification> list=service.findByExample(new Classification(),null);
		StringBuilder json = new StringBuilder("{success:true,children:[");

		List topList = findTopDeviceType(list);
		for (int i = 0, l = topList.size(); i < l; i++) {
			Classification topInfo=(Classification) topList.get(i);
			findSubDeviceType(topInfo, list);//添加子节点
		}
		for (int i = 0, l = topList.size(); i < l; i++) {
			Classification topInfo = (Classification) topList.get(i);
			String jsonStr = buildDeviceTypeTreeJson(topInfo);
			json.append(jsonStr);
			if (i < l - 1) {
				json.append(",");
			}
		}
		
	
		json.append("]}");
		this.setJsonStr(json.toString());
		return SUCCESS;
	}
	private void findSubDeviceType(Classification info, List<Classification> list) {
		for (int i = list.size() - 1; i >= 0; i--) {
			Classification subInfo = (Classification) list.get(i);
			String preId=subInfo.getPerId();
			if (preId!=null&&preId.equals(info.getId())) {
				info.addChildren(subInfo);
				findSubDeviceType(subInfo, list);
			}
		}
	}
	private String buildDeviceTypeTreeJson(Classification info) {
		List childList = info.getChildren();
		StringBuilder jsonStr = new StringBuilder("{");
		jsonStr.append("id:").append("'").append(info.getId())
				.append("',");
		jsonStr.append("name:").append("'").append(info.getClassification())
				.append("',");
		jsonStr.append("preId:").append("'").append(info.getPerId())
				.append("',");
		jsonStr.append("topId:").append("'").append(info.getTopId())
				.append("',");
		jsonStr.append("path:").append("'").append(info.getPath())
				.append("',");
		jsonStr.append("isLeaf:").append("'").append(info.getIsLeaf())
				.append("',");
		if (childList != null && !childList.isEmpty()) {
			jsonStr.append("expanded: true,children:[");
			for (int i = childList.size() - 1; i >= 0; i--) {
				Classification child = (Classification) childList.get(i);
				String childJson = buildDeviceTypeTreeJson(child);
				jsonStr.append(childJson);
				if (i > 0) {
					jsonStr.append(",");
				}
			}
			jsonStr.append("]}");
		} else if("0".equals(info.getIsLeaf())){
			jsonStr.append("expanded: true,children:[]}");
		}else{
			jsonStr.append("expanded: true,children:[],leaf:true}");
		}

		return jsonStr.toString();
	}
	private List findTopDeviceType(List<Classification> list) {
		List<Classification> topList = new ArrayList<Classification>();
		for (int i = list.size() - 1; i >= 0; i--) {
			Classification info = (Classification) list.get(i);
			String preId = info.getPerId();
			if (preId == null || preId.isEmpty()||preId.equals("null")||preId.equals("root")) {
				topList.add(info);
				list.remove(i);
			}
		}
		return topList;
	}
js:
Ext.define('businesWholeTreeModel', {
	extend : 'Ext.data.TreeModel',
	fields : [ {
		name : 'classification',
		mapping : 'classification'
	}, {
		name : 'catalog',
		mapping : 'catalog'
	}, {
		name : 'categories',
		mapping : 'categories'
	}, {
		name : 'isLeaf',
		mapping : 'isLeaf'
	}, {
		name : 'id',
		mapping : 'id'
	}, {
		name : 'name',
		mapping : 'name'
	}  ],
	proxy : {
		type : 'ajax',
		api : {
			read : 'findTree.action'
		}
	}
});

var businesWholeTreeStore = Ext.create('Ext.data.TreeStore', {
model : 'businesWholeTreeModel',
root : {
	name : 'root',
	expanded : true
}
});

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

function initPanel() {
 Ext.create('Ext.tree.Panel', {
		store : businesWholeTreeStore,
		width : 300,
		height: 350,
		columns : [{
					xtype : 'treecolumn',
					width : 300,
					dataIndex : 'name',
					flex : '1'
				}],
		rootVisible : false,
		renderTo: Ext.getBody()
	});
};





  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值