extjs tree 树

从数据库中,获取数据,生成树,效果图:extjs tree 树_第1张图片

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

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

java:

	public String findTree(){
		List 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 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 list) {
		List topList = new ArrayList();
		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()
	});
};





你可能感兴趣的:(extjs,树形图,java,json)