用extjs将指定路径的文件夹以树的形式显示出来，且文件夹在上文件在下

文件目录树加载与展示

最新推荐文章于 2025-04-27 20:01:32 发布

原创最新推荐文章于 2025-04-27 20:01:32 发布 · 859 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #生成树 #操作文件夹

Java技术专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用Java后台代码结合ExtJS前端框架实现文件目录树加载与展示的方法。该方法通过递归读取指定文件夹内的所有子文件夹及文件，并将其转化为JSON格式的数据，供前端树形组件展示。当用户点击树中的叶子节点时，会触发相应的事件处理，进行路径检查等操作。

后台代码：

<span style="white-space:pre">			</span>String fid = request.getParameter("fid");
			if("Root".equals(fid)){
				fid = Tools.getFilePath()+"MBXM/ZYDL/";
			}
			JSONArray array = new JSONArray();
			JSONArray array1 = new JSONArray();
			JSONArray array2 = new JSONArray();
			File file = new File(fid);
			//List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
			if(file.exists()){
				if(file.isDirectory()){
					File [] filelist = file.listFiles();
					if(filelist!=null&&filelist.length>0){
						for (File files : filelist) {
							//Map<String, Object> map = new HashMap<String, Object>();
							JSONObject obj1 = new JSONObject();
							JSONObject obj2 = new JSONObject();
							//是否有下一级
							obj1.put("fid",files.getAbsolutePath());
							obj1.put("text", files.getName());
							obj2.put("fid",files.getAbsolutePath());
							obj2.put("text", files.getName());
							if(files.list() !=null && files.list().length >=0){
								obj1.put("leaf", false);
								array1.add(obj1);
							}else {
								obj2.put("leaf", true);
								array2.add(obj2);
							}
						}
					}
				}
			}
			
			for(int i=0;i<array1.size();i++){
				array.add(array1.get(i));
			}
			for(int i=0;i<array2.size();i++){
				array.add(array2.get(i));
			}
			msg = array.toString();

前台页面：

var left_fs = new Ext.tree.TreePanel({
		//height : 100,
		id:'menuTree',
		height : 440,
		columnWidth : 0.5, 
		useArrows : true,
		animate : true, 
		autoScroll:true, 
		//enableDD : false,
		root :new Ext.tree.AsyncTreeNode({
			fid : 'Root',
			text:'选择个性化页面(单击刷新)',
			expanded : true,
			draggable : false,
			listeners:{
				click:function(node){
					node.reload();
				}
			}
		}),
		loader : new Ext.tree.TreeLoader({
			dataUrl:basePath+'servlet/back/CZZDglS?type=cxZYDLTree&KHID='+KHID+'&check=false',
			listeners : {
				beforeload : function(TreeLoader, node) {
				    var fid = node.attributes.fid;
					this.baseParams.fid = fid;
				}
			}
		}),
		listeners : {
			click : function(node){
					if(node.isLeaf()){
						var GXHYMLJ = node.attributes.fid;
						//var start = 'D:/ITAPWH/files/MBXM/ZYDL/';
						var start = filePath +'MBXM/ZYDL/';
						GXHYMLJ = GXHYMLJ.substring(start.length-1,GXHYMLJ.length);
						var array = GXHYMLJ.split('\\');
						var GXHYMLJ_new ='';
						for(var i=0;i<array.length;i++){
							GXHYMLJ_new = GXHYMLJ_new + array[i];
							GXHYMLJ_new = GXHYMLJ_new + '/';
						}
						GXHYMLJ_new = GXHYMLJ_new.substring(0,GXHYMLJ_new.length-1);
						
						var Plant = gxhym_store.recordType;
						var p = new Plant({
							YMLJ: GXHYMLJ_new
						});
						
						var data=gxhym_store.data;
						var array = [];
						var all_ymlj ='';
						
						var flag = false;
						if (data.length > 0) {
							for (var i = 0; i < data.length; i++) {
								var rec = data.get(i);
								var YMLJ = rec.get('YMLJ');
								if(YMLJ !=undefined){
									all_ymlj = all_ymlj + "," + "'"  + YMLJ + "'";
									
								}
								if(all_ymlj.indexOf("'" + GXHYMLJ_new + "'") != -1){
									flag = true;
								}
							}
						}
						if(flag){
							Ext.Msg.show({
								title : '提示',
								msg : "页面路径[" + GXHYMLJ_new + "]重复,请重新选择",
								buttons : {
									"ok" : "确定"
								},
								icon : Ext.MessageBox.INFO
							});
							return;
						}
						gxhym_store.insert(gxhym_store.data.length-1, p);
						
					}
			}

		}
	});