⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 tree.jsp

📁 EXTJS ＴＲＥＥ　的各功能实现 拖曳　等
💻 JSP
字号:
🔍 
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="basePath"
	value="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${basePath }">
    <title>产品分类管理</title>
    
    <link rel="stylesheet" type="text/css" href="${basePath}system_admin/ext/resources/css/ext-all.css" />
	<script type="text/javascript" src="${basePath}system_admin/ext/ext-base.js"></script>
	<script type="text/javascript" src="${basePath}system_admin/ext/ext-all.js"></script>
	<script type="text/javascript" src="${basePath}system_admin/ext/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="${basePath}system_admin/product_ext/loadTree.js"></script>
  	
  	<script type="text/javascript">
		
		var basePath ='${basePath}';
		
		Ext.onReady(function(){
		
		Ext.QuickTips.init();

		var beforeEditName="";
		
		
		
		
		var viewPort = new Ext.Viewport({
		   		title:'产品属性和分类',
		   		layout:'border',
		   		items:[
		   			{
			   			title:'产品分类',
			   			html:'<div id="productCategoryTree" style="height:750px; width:200px;"></div>',
			   			region:'west',
			   			width:300,
			   			ayoutConfig:{ 
							animate:true 
							} 
		   			},
					{
						title:'管理操作',
						html:'<div id="ctrlPanel" style="height:100%; width:100%;"></div>',
						region:'center'
					}
		   		]
		   
		   });
		
		var tabPanel = new Ext.TabPanel({
			id:'parentTab',
			renderTo:"ctrlPanel",
			height:1000,
			width:window.document.width,
			activeTab :0,
			animScroll:true,
			enableTabScroll:true
		});
		
		
		
		
		var root = new Ext.tree.TreeNode({
		
			text:"产品分类",
			id:"root",
			draggable : false
		});
		
		<c:forEach items="${productCategoryList}" var="productCategory" varStatus="loop">
			
		
	 			var node1 = new Ext.tree.AsyncTreeNode(
				{
					text:'${productCategory.name}',
					id:'${productCategory.categoryId}',
					level:'${productCategory.level}',
					isTip:'${productCategory.isTip}',
					isNew:'0',
					isCommend:'${productCategory.isCommend}',
					draggable : true
				}
	 			);
	 			
	 			root.appendChild(node1);
		</c:forEach>
		
		var tree = new Ext.tree.TreePanel({
			id:"productCategoryTree",
		///	el:"productCategoryTree",
			root:root,
			renderTo:'productCategoryTree',
			autoScroll:true,
			enableDD:true,
			rootVisible:true,
			border:false,
			height:665,
			width:300,
			loader: new Ext.tree.TreeLoader
  		 	(
  		 		{
  		 			dataUrl: '${basePath}product/loadTree.html'
  		 		}
  		 		
  		 	)
		});
				
//		tree.setRootNode(root);
//		tree.render();
		root.expand();
		
		var treeEditor = new Ext.tree.TreeEditor(tree,{
			id:'tree-Manage',
			allowBlank : false
		});
		
		tree.on('click', function(node) {
		    if (node.id != 'root') {
		    beforeEditName = node.text;
		     
	     	var itemsLength = tabPanel.items.length;

			for(var i=0;i<itemsLength;i++)
			{
				tabPanel.remove(tabPanel.items.get(0));
				
			}
	     	
	     	var src_brand = basePath+"product/loadbindforcategory.html?categoryId="+node.id+"+&chotp=brand";
	     	var src_cat = basePath+"product/throughToBindCat.html?categoryId="+node.id;
	     
	     	var tabPage = tabPanel.add({
			id:node.id+'_cat',
			html:'<div id="cat_div"><iframe style="width:1078px;height:738px"  id=cat_iframe src='+src_cat+'></iframe><div>',
			title:node.text+'--绑定属性'
			//closable:true
		
			});
			tabPanel.setActiveTab(tabPage);
			
			var tabPage1 = tabPanel.add({
			id:node.id+'_brand',
			html:'<div id="brand_div"><iframe style="width:1078px;height:738px;"  id=brand_iframe src='+src_brand+'></iframe><div>',
			title:node.text+'--绑定品牌'
			//closable:true
		
			}); 
		     
		     
		     
		    }
		});
		
		var rightClick = new Ext.menu.Menu({
		    id : 'rightClickCont',
		    items : [{
		       id : 'addNode',
		       text : '添加',
		       
		       menu : [{
		          id : 'insertNode',
		          text : '添加同级节点',
		          handler : function(tree) {
		           
		           insertNode();
		          }
		
		         }, {
		          id : 'appendNode',
		          text : '添加子节点',
		          handler : function(tree) {
		           
		           appendNodeAction();
		          }
		         }]
		      }, '-', {
		       id : 'delNode',
		       text : '删除',
		       handler : function(tree) {
		
		        delNodeAction();
		       }
		      }, {
		       id : 'modifNode',
		       text : '修改',
		       handler : function() {
		
		        modifNodeAction()
		       }
		      }
		      ]
		   });
		   
		   function chooseIsCommend()
		   {
		   		var isCommend_ck = Ext.getCmp('isCommend_ck');
		   		var isCommend_value = "0";
		   		if(isCommend_ck.checked)
		   		{
		   			isCommend_value = "1";
		   		}
		   		var selectedNode = tree.getSelectionModel().getSelectedNode();
				var requestConfig = {
					url:basePath+"product/addCat.html",
					params:{categoryId:selectedNode.id,isCommend:isCommend_value,actionType:'edit'},
					callback:function(options,success,response){
						if(success)
						{
							if(response.responseText=="1")
							{
								selectedNode.attributes.isCommend = isCommend_value;
							}
							else
							{
								Ext.MessageBox.alert("提示","很遗憾,设置失败!!!!");
							}
						}
						else
						{
							Ext.MessageBox.alert("提示","服务器忙,发送设置请求失败!");
						}
					}
				
				}
				initRequest(requestConfig);
		   }
		   
		   tree.on('move',function(tree,node,oldParent,newParent,index){
		   
		   		///alert(node.id+"@@@"+oldParent.id+"@@@"+newParent.id);
		   		if(oldParent.id==newParent.id)
		   		{
		   			return;
		   		}
		   		
		   		Ext.MessageBox.wait('请等待,正在执行操作...','提示');
		   		
		   		var requestConfig = {
					url:basePath+"product/changelevel.html",
					params:{nodeId:node.id,oldParentId:oldParent.id,newParentId:newParent.id},
					callback:function(options,success,response){
						if(success)
						{
							if(response.responseText=="1")
							{
								Ext.MessageBox.alert("提示","恭喜,移动成功!!!");
							}
							else
							{
								Ext.MessageBox.alert("提示","很遗憾,移动失败!!!!");
							}
						}
						else
						{
							Ext.MessageBox.alert("提示","服务器忙,发送移动请求失败!");
						}
					}
				}
		   		initRequest(requestConfig);
		   });

		   tree.on('contextmenu', function(node, event){
			    event.preventDefault();
			   	if(node.id=='root')
			   	{
			   		return;
			   	}
			   	node.select();
			   	
			   if(Ext.getCmp('isCommend_ck')!=null)
			   {
			   		rightClick.remove(Ext.getCmp('isCommend_ck'));
			   }
			   
			   var ck_item = new Ext.menu.CheckItem({
			   		text:'是否推荐显示在首页',
			   		checked:false,
			      	id:'isCommend_ck',
			      	checkHandler:chooseIsCommend
				   	});
				   	
				   	if(node.attributes.isCommend=="1")
				   	{
				   		ck_item.checked = true;
				   	}
				   	else
				   	{
				   		ck_item.checked = false;
				   	}
				   	
				   	rightClick.add(ck_item);
				   	
			   	rightClick.showAt(event.getXY());
			});
		   
		   function delNodeAction()
		   {
  			  var selectedNode = tree.getSelectionModel().getSelectedNode();
  			  Ext.MessageBox.confirm('提示','确定删除该节点(包括该节点下的子节点)吗??',function(id){deleteCallback(id,selectedNode);});  
  			  
		   }
		   
		   function deleteCallback(id,selectedNode)
		   {
		   		if(id=='yes')
		   		{
		   			Ext.MessageBox.wait('请等待,正在执行操作...','提示');
		   			
		   			var requestConfig = {
					url:basePath+"product/delCat.html",
					params:{categoryId:selectedNode.id},
					callback:function(options,success,response){
						if(success)
						{
							if(response.responseText=="1")
							{
								selectedNode.remove();
								Ext.MessageBox.alert("提示","恭喜,删除成功!!!");
							}
							else
							{
								Ext.MessageBox.alert("提示","很遗憾,删除失败!!!!");
							}
						}
						else
						{
							Ext.MessageBox.alert("提示","服务器忙,发送删除请求失败!");
						}
					}
				
				}
				initRequest(requestConfig);
		   		
		   		}
		   }
		   
		 function modifNodeAction()
		 {
		 	 var selectedNode = tree.getSelectionModel().getSelectedNode();
		 	 beforeEditName = selectedNode.text;
		 	  treeEditor.editNode = selectedNode;
			  treeEditor.startEdit(selectedNode.ui.textNode);
		 }
		
		treeEditor.on("complete", function(treeEditor){
			if(treeEditor.editNode.attributes.isNew=='1')
           	{
           		Ext.MessageBox.wait('请等待,正在执行操作...','提示');
           	
           		var requestConfig = {
					url:basePath+"product/addCat.html",
					params:{categoryId:treeEditor.editNode.attributes.upId,actionType:'add',productCategoryName:treeEditor.editNode.text},
					callback:function(options,success,response){
						if(success)
						{
							if(response.responseText!="0")
							{
								var categoryId_new = response.responseText;
								treeEditor.editNode.id = categoryId_new;
								Ext.MessageBox.alert("提示","恭喜,添加新节点成功!!!");
							}
							else
							{
								treeEditor.setValue(beforeEditName);
								beforeEditName="";
								Ext.MessageBox.alert("提示","很遗憾,添加新节点失败!!!!");
							}
						}
						else
						{
							treeEditor.setValue(beforeEditName);
							beforeEditName="";
							Ext.MessageBox.alert("提示","服务器忙,发送添加请求失败!");
						}
					}
				
				}
				initRequest(requestConfig);
           	}
           	else if(treeEditor.editNode.attributes.isNew=='0')
           	{
           		if(beforeEditName == treeEditor.editNode.text)
           		{
           			return;
           		}
           		Ext.MessageBox.wait('请等待,正在执行操作...','提示');
           		var requestConfig = {
					url:basePath+"product/addCat.html",
					params:{categoryId:treeEditor.editNode.id,actionType:'edit',productCategoryName:treeEditor.editNode.text},
					callback:function(options,success,response){
						if(success)
						{
							if(response.responseText!="0")
							{
								Ext.MessageBox.alert("提示","恭喜,修改成功!!!");
							}
							else
							{
								treeEditor.setValue(beforeEditName);
								beforeEditName="";
								Ext.MessageBox.alert("提示","很遗憾,修改失败!!!!");
							}
						}
						else
						{
							treeEditor.setValue(beforeEditName);
							beforeEditName="";
							Ext.MessageBox.alert("提示","服务器忙,发送修改请求失败!");
						}
					}
				
				}
				
				initRequest(requestConfig);
           	}
           	else
           	{}
           	
           	
       	});
		   
		   function initRequest(requestConfig)
		   {
			  Ext.Ajax.request(requestConfig);
		   }
		   
		   function insertNode() {

			  var selectedNode = tree.getSelectionModel().getSelectedNode();
			  var selectedParentNode = selectedNode.parentNode;
			  var newNode = new Ext.tree.AsyncTreeNode({
			     text : '新建节点',
			     isNew:'1',
			     upId:''
			    });
			  if (selectedParentNode == null) {
			  	selectedNode.appendChild(newNode);
			  } else {
			   	selectedParentNode.insertBefore(newNode, selectedNode);
			   	newNode.attributes.upId = selectedParentNode.id;
			  }
			
			  setTimeout(function() {
			     treeEditor.editNode = newNode;
			     treeEditor.startEdit(newNode.ui.textNode);
			    }, 10);
			 }
			 
			 function appendNodeAction()
			 {
			 	var selectedNode = tree.getSelectionModel().getSelectedNode();
				  if (selectedNode.isLeaf()) {
				   selectedNode.leaf = false;
				  }
				  var newNode = selectedNode.appendChild(new Ext.tree.AsyncTreeNode({
				     text : '新建节点',
				     isNew:'1',
				     upId:selectedNode.id
				    }));
				    
				  newNode.parentNode.expand(false, false, function() {
				     tree.getSelectionModel().select(newNode);
				     
				     setTimeout(function() {
				        treeEditor.editNode = newNode;
				        treeEditor.startEdit(newNode.ui.textNode);
				       }, 10);
				    });
			 }
		   
		   
		   
		
	});
	</script>
  </head>
  <body>
  </body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -