自己动手做Jquery easy UI Tree(涉及到拖拽、修改、增加、删除、异步加载等操作..)

原创 于 2013-06-21 11:00:31 发布 · 1.5w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JAVA #JavaScript #Jquery #UI #框架

本文介绍如何利用Jquery Easy UI库，结合JavaScript和JAVA后端，实现Tree组件的拖放、编辑、添加、删除以及异步数据加载等功能。通过实例代码展示具体实现过程，适合前端开发者参考。

这些功能是我在项目中自己总结出来的...直接上demo,代码很简单可以看看就懂了

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String CONTEXT_PATH = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树形测试</title>
 <link rel="stylesheet" type="text/css" href="<%=CONTEXT_PATH %>jquery-easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="<%=CONTEXT_PATH %>jquery-easyui/themes/icon.css">  
    <script type="text/javascript" src="<%=CONTEXT_PATH %>jquery-easyui/jquery-1.8.0.min.js"></script>  
    <script type="text/javascript" src="<%=CONTEXT_PATH %>jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">

	var contextPath ="<%=CONTEXT_PATH%>";
	var limit ="";
	var n_tree;
	var canDrop=true,canEdit=false;
	
	$(function(){
		createDataGrid();
		    
		createTree();
		
		createNewTree();
	});
	
	
	function createDataGrid(){
		$("#dg").datagrid({
			tilte: 'Rank Show',
			 width: 700, 
		     height: 500, 
		     nowrap: false, 
		     striped: true, 
		     border: true, 
		     collapsible:false,//是否可折叠的 
		     fit: true,//自动大小 
		     singleSelect:false,
		     pagination:true,
		     url:'<%=CONTEXT_PATH%>domain/CommonAction.action',
		     frozenColumns:[[ 
		                     {field:'ck',checkbox:true} 
		                 ]],  
		     toolbar: [{ 
		          text: '添加专有词', 
		          iconCls: 'icon-add', 
		          handler: function() { 
		        	  append(); 
		          }
		     	},"-",{
		     		 text: '删除', 
		             iconCls: 'icon-remove', 
		             handler: function(){ 
		            	 removeit(); 
		             }  
		     	}
		     ],
		     columns:[[
		                {field:'num',title:'排名编号',width:80},
		                {field:'term',title:'词语',width:100,formatter:formatTerm},
		                {field:'count',title:'词频',width:100},
		                {field:'field',title:'所属',width:100}
		            ]] 
		});
		
		 var p = $('#dg').datagrid('getPager'); 
		    $(p).pagination({ 
		        pageSize: 10,//每页显示的记录条数，默认为10 
		        pageList: [10,15,20,25,30],//可以设置每页记录条数的列表 
		        beforePageText: '第',//页数文本框前显示的汉字 
		        afterPageText: '页    共 {pages} 页', 
		        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
		    });
	}
	
	function createTree(){
		 $("#tt").tree({
			 url:'<%=CONTEXT_PATH %>domain/ShowTreeAction.action',
			 onClick:function(){nodeClick();}
		 });
	}
	
	function createNewTree(){
			n_tree = $("#n_tt").tree({
			url:contextPath+"domain/DepartmentShowAction.action?action=getNode",
			dnd:true,
			animate: true,  
		    onDrop: function(targetNode, source, point){  
		           var targetId = $('#n_tt').tree('getNode', targetNode).id;  
		         //  alert(targetId+"::"+source.id+"::"+point);
		           if(source.text !="其他类" && source.text != "未分类"){
			           $.ajax({  
			               url: contextPath+'domain/DepartmentShowAction.action?action=updateNode',  
			               type: 'post',  
			               dataType: 'json',  
			               data: {  
			                   id: source.id,  
			                   targetId: targetId,  
			                   point: point  
			               }  
			           });  
		           }else{
		        	   alert("其他类与未分类不可编辑");
		        	   reload();
		           }
		       },
		 onClick: function(node){  
			 if(canEdit){
	            $(this).tree('beginEdit',node.target);  
			 }
	     },
	     onAfterEdit:function(node){
	    	if(node.text !=""){
		    	$.ajax({
		    		 url: contextPath+'domain/DepartmentShowAction.action?action=updateNodeText',  
		             type: 'post',  
		             dataType: 'json',  
		             data: {  
		                  id: node.id,
		                  text: node.text
		             }  
		    	});
	    	}else{
	    		alert("编辑文本不能为空！");
	    	}
	     }
		});
	}
	
	
	 function reload(){
	        //$('#tt').tree('reload');
	    }
		
	    function changeCkeckBox(){
	    	var dropCheck = document.getElementById("isDrop").checked;
	    	var editCheck = document.getElementById("idEdit").checked;
	    	
	    	canDrop =dropCheck;
	    	canEdit = editCheck;
	    	$("#n_tt").tree({
	    		dnd: canDrop
	    	});
	    }
	    
	    function addNode(){
	    	var node = $('#n_tt').tree('getSelected');
	    	if (node){
				 $.ajax({
					 type: "POST",
					 url: contextPath+"domain/DepartmentShowAction.action?action=addNode",
					 data: "pid="+node.id,
					 success: function(msg){
						 nodes=[{
					    	 "id":msg.id,
					    	 "text": msg.text
					     }];
						 $('#tt').tree('append', {
						        parent:node.target,
						        data:nodes
						  });
					 }
				 });   		
	    	}else{
	    		alert("请先选择要添加的节点!");
	    	}
	    }
	    
	    function deleteNode(){
	    	var node = $('#n_tt').tree('getSelected');
	    	if (node){
	    		 $.ajax({
					 type: "POST",
					 url: contextPath+"domain/DepartmentShowAction.action?action=deleteNode",
					 data: "id="+node.id,
					 success: function(msg){
						 for(var index in msg){
							 if(index == "success" && msg[index] ==true )
								 $("#tt").tree("remove",node.target);
						 }
					 }
				 });     		
	    		
	    	}else{
	    		alert("请选择要删除的节点");
	    	}
	    }
	
	
	
	
	function onSearch(){
		var url =contextPath+"domain/CommonAction.action?action=rank";
		limit = document.getElementById("input_kw").value;
	 	url = getUrl(url,limit);
	 	$('#dg').datagrid({  
       		 url: url
        });
	}
	
	function nodeClick(){
		var node = $('#tt').tree('getSelected');  
		if (node){ 
			var id = node.id;
			var url = contextPath+"domain/CommonAction.action?action=rank&path="+id;
	        $('#dg').datagrid({  
	        	 url: url
	        });
		}
	}
	
	function append(){
		var valueArr = new Array();
        var rows = $('#dg').datagrid('getSelections');  
        for(var i=0; i<rows.length; i++){  
            var row = rows[i];  
            valueArr.push(row.term);
        }  
		
		addhotChange(valueArr);
	}


	function removeit(){
		var valueArr = new Array();
        var rows = $('#dg').datagrid('getSelections');  
        for(var i=0; i<rows.length; i++){  
            var row = rows[i];  
            valueArr.push(row.term);
        }  
		
		addstopChange(valueArr);
		reloadDataGrid();
	}
	
	function addstopChange(valueArr){
		var valueStr ="";
		for(var value in valueArr) 
			valueStr += valueArr[value] +",";
		
		$.ajax({
			 type: "GET",
			 url: "<%=CONTEXT_PATH%>domain/WordAction.action",
			 dataType: "json",
			 data :"action=addstopWord&"+"data="+valueStr,
			 success: function(data, textStatus){
				var stopDom  = document.getElementById("stop");
				 for(var index in data){
					 
					 for(var obj in  data[index]){
						 var option = new Option(data[index][obj],obj);
						 option.selected = true;
						 stopDom.appendChild(option);
					 }
				 }
			 }
		});
		
	}
	
	function addhotChange(valueArr){
		var valueStr ="";
		for(var value in valueArr) 
			valueStr += valueArr[value] +",";
		
		$.ajax({
			 type: "GET",
			 url: "<%=CONTEXT_PATH%>domain/WordAction.action",
			 dataType: "json",
			 data :"action=addSpecialtyWord&"+"data="+valueStr,
			 success: function(data, textStatus){
				var hotDom  = document.getElementById("hot");
				 for(var index in data){
					 
					 for(var obj in  data[index]){
						 var option = new Option(data[index][obj],obj);
						 option.selected = true;
						 hotDom.appendChild(option);
					 }
				 }
			 }
		});
	}
	
	function reloadDataGrid(){
		var grid = $('#dg');  
		var options = grid.datagrid('getPager').data("pagination").options;  
		var curr = options.pageNumber;  
		//var total = options.total;  
		var pageSize = options.pageSize;
		
		var url =contextPath+"domain/CommonAction.action?action=rank";
		url = getUrl(url,limit);
		
		$('#dg').datagrid({  
        	 url: url,
        	 queryParams :{
        		 page: curr,
        		 rows :	pageSize 
        	 }
        });
		
	}
	
	function getUrl(url,limit){
		var nodeId="";
		var node = $('#tt').tree('getSelected'); 
		if (node) nodeId = node.id;
		 
		//limit = document.getElementById("input_kw").value;
		if(nodeId != undefined && nodeId != "")
			url = url+"&path="+nodeId;
		if(limit != undefined && limit != "")
			url = url +"&limit="+ limit;
		return url;
	}
	
	function formatTerm(val,row){
		return '<a href="javascript:void(0);" onclick="searchText(this.text)">'+val+'</a>';
	}
	
	function searchText(text){
		var url =contextPath+"domain/CommonAction.action?action=searchInit";
		url=getUrl(url,text);
		window.location.href=url;
	}

</script>
</head>
<body>
	<!-- 
	<div>
		<input type="text" name="input_kw" id="input_kw" > <input type="button" value="搜索" onclick="onSearch();">	
	</div>
	 -->
	<div class="easyui-accordion" style="width:250px;height:300px;">
		<div title="新生成类型" style="padding:10px;">
			<input type="checkbox" id="isDrop" checked="checked" onchange="changeCkeckBox()">可拖动   
    		<input type="checkbox" id="idEdit" onchange="changeCkeckBox()">可编辑<br />
    		<input type="button" id="addNode" onclick="addNode()" value="添加节点">  
    		<input type="button" id="deleteNode" onclick="deleteNode()" value="删除节点">
			<ul id="n_tt"></ul>
		</div>
		<div title="原本类型" style="padding:10px;">  
			 <ul id="tt" class="easyui-tree"></ul>  
		</div>
	</div>
	
	<div style="border: solid 1px; width: 700px; height:300px; float: left; ">
		<table id="dg" class="easyui-datagrid" ></table> 
	</div>
	<br />
	<hr />
	
	<div style=" width: 100%;" >
		<div style="float: right;">
			停用词库:<br />
			<select id="stop" multiple="multiple" style="width: 200px;" size="10" >
				<s:iterator value="stopList" var="stop">
					<option value='<s:property value="stop_id" />'><s:property value="stop_term" /> </option>
				</s:iterator>
			</select>
		</div>
		<div  style="float: right; margin-left: 200px; ">
			热词词库:<br />
			<select id="hot" multiple="multiple" size="10" style="width: 200px;" >
				<s:iterator value="useList" var="use">
					<option value='<s:property value="use_id" />'><s:property value="use_term" /> </option>
				</s:iterator>
			</select>
		</div>
	</div>
	<!-- 
	<input type="button" value="获取分页数据" onclick="getPagerInfo();">
 	-->
</body>
</html>


后台对应代码: 

package com.talkweb.search.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ActionSupport;
import com.talkweb.domain.service.DirLevelRelationService;
import com.talkweb.domain.service.WorkformService;
import com.talkweb.jfts.bean.DirLevelRelation;
import com.talkweb.jfts.bean.TreeBuild;

@Controller("departmentShowAction")
public class DepartmentShowAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	@Autowired
	private WorkformService workformService;
	@Autowired
	private DirLevelRelationService dirLevelRelationService;
	
	@Override
	public String execute() throws Exception {
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		String action = request.getParameter("action");
		String forward = null;
		if(action == null || action.isEmpty()) action ="init";
		
		if("init".equalsIgnoreCase(action))forward = init(request,response);
		else if("getNode".equalsIgnoreCase(action)) forward = getNode(request,response);
		else if("updateNode".equalsIgnoreCase(action))forward = updateNode(request,response);
		else if("addNode".equalsIgnoreCase(action))forward = addNode(request,response);
		else if("updateNodeText".equalsIgnoreCase(action))forward = updateNodeText(request,response);
		else if("deleteNode".equalsIgnoreCase(action))forward = deleteNode(request,response);
		
		return forward;
	}



	private String deleteNode(HttpServletRequest request,
			HttpServletResponse response) {
		String id = request.getParameter("id");
		PrintWriter pw = null;
				
		try {
			dirLevelRelationService.deleteInfoById(id);
			response.setContentType("text/json; charset=UTF-8");
			pw= response.getWriter();
			pw.write("{\"success\":true}");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return ERROR;
		}
		
		return null;
	}



	private String updateNodeText(HttpServletRequest request,
			HttpServletResponse response) {
		String id = request.getParameter("id");
		String text = request.getParameter("text");
		
		try {
			TreeBuild tb = dirLevelRelationService.selectInfoById(id);
			tb.setPath(tb.getPath().replace(tb.getText(), text));
			tb.setText(text);
			dirLevelRelationService.updateInfo(tb);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return ERROR;
		}
		
		return null;
	}



	private String addNode(HttpServletRequest request,
			HttpServletResponse response) {
		String baseText ="新建节点";
		String pid = request.getParameter("pid");
		
		try {
			TreeBuild tb = dirLevelRelationService.selectInfoById(pid);
			String text="";
			TreeBuild news_dir = new TreeBuild();
			for(Integer i=0 ;i< Integer.MAX_VALUE;i++){
				text= baseText+i;
				Integer count = dirLevelRelationService.selectHasText(text);
				if(count == null || count == 0){
					news_dir.setPid(pid);
					news_dir.setText(text);
					news_dir.setPath(tb.getPath()+text+">");
					dirLevelRelationService.insertTreeLevelInfo(news_dir);
					break;
				}
			}
			
			response.setContentType("text/json; charset=UTF-8");
			String jsonStr = JSON.toJSONString(news_dir);
			
			response.getWriter().write(jsonStr);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return ERROR;
		}
		
		return null;
	}



	private String updateNode(HttpServletRequest request,
			HttpServletResponse response) {
		String id = request.getParameter("id");
		String targetId = request.getParameter("targetId");
		String point = request.getParameter("point");
		treeNodeOpera(id, targetId, point);
		
		return null;
	}
	
	private void treeNodeOpera(String id,String targetId,String point){
		TreeBuild idTb = dirLevelRelationService.selectInfoById(id);
		TreeBuild targetIdTb = dirLevelRelationService.selectInfoById(targetId);
		if(idTb == null || targetIdTb == null) return;
		
		if("append".equals(point))	appendNode(idTb, targetIdTb);
		else if("top".equals(point)) topNode(idTb, targetIdTb);
		else if("bottom".equals(point))bottomNode(idTb, targetIdTb);
				
	}
	
	private void appendNode(TreeBuild idTb,TreeBuild targetIdTb){
		idTb.setPid(targetIdTb.getId());
		idTb.setPath(targetIdTb.getPath()+idTb.getText()+">");
		dirLevelRelationService.updateInfo(idTb);
		
		//获取其是否还有叶子节点..有,则需要修改叶子节点下的路径
//		List<TreeBuild> tbList = dirLevelRelationService.selectChildsMyPid(idTb.getId());
//		for(TreeBuild tb : tbList){
//			appendNode(tb, idTb);
//		}
		
	}
	
	private void topNode(TreeBuild idTb,TreeBuild targetIdTb){
		idTb.setPid(targetIdTb.getPid());
		idTb.setPath(idTb.getPath().replace(targetIdTb.getPath(), ""));
		dirLevelRelationService.updateInfo(idTb);
		
//		List<TreeBuild> tbList = dirLevelRelationService.selectChildsMyPid(idTb.getId());
//		for(TreeBuild tb : tbList){
//			topNode(tb, idTb);
//		}
	}
	
	private void bottomNode(TreeBuild idTb,TreeBuild targetIdTb){
		idTb.setPid(targetIdTb.getId());
		idTb.setPath(targetIdTb.getPath()+idTb.getText()+">");
		dirLevelRelationService.updateInfo(idTb);
		
//		List<TreeBuild> tbList = dirLevelRelationService.selectChildsMyPid(idTb.getId());
//		for(TreeBuild tb : tbList){
//			bottomNode(tb, idTb);
//		}
	}
	


	private String getNode(HttpServletRequest request,
			HttpServletResponse response) {
		String path = request.getParameter("id");
		String forwar = null;
		if(path == null || path.isEmpty())
			 forwar = initDepartInfo(request, response);
		else 
			forwar = getChildNode(request, response);
		
		return forwar;
	}

	
	private String initDepartInfo(HttpServletRequest request,
			HttpServletResponse response){
		//假设登录进来的为网络部门
		String depart ="网络部门";
		request.getSession().setAttribute("depart",depart);
		depart +=">" ;		
		
		try {
			initTree(depart);
			
			TreeBuild tb = getNodeInfo(depart);
			findNodeisLeaf(tb);
			
			String jsonStr = JSON.toJSONString(tb);
			
			response.setContentType("text/json; charset=UTF-8");
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write("["+jsonStr+"]");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return ERROR;
		}
		return null;
	}
	
	private String getChildNode(HttpServletRequest request,
			HttpServletResponse response){
		String id = request.getParameter("id");
		
		try {
			List<TreeBuild> tbList = dirLevelRelationService.selectChildsMyPid(id);
			for(TreeBuild tb : tbList) findNodeisLeaf(tb);
			
			String jsonStr = JSON.toJSONString(tbList);
			
			response.setContentType("text/json; charset=UTF-8");
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write(jsonStr);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return ERROR;
		}
		return null;
	}


	private String init(HttpServletRequest request, HttpServletResponse response) {
		//初始化后台数据参数
		
		
		return SUCCESS;
	}
	
	
	
	private void initTree(String depart){
		//部门作为根目录
		if_exists(depart , "-1");
		//默认的两个子节点	未分类	
		String[] default_leafNodes = {depart+"未分类"+">",depart+"其他类"+">"};
		for(String default_leafNode : default_leafNodes){
			TreeBuild tb= dirLevelRelationService.selectTreeByPath(depart);
			if_exists(default_leafNode, tb.getId());
		}
	}
	

	private void if_exists(String path,String pid){
		TreeBuild tb = dirLevelRelationService.selectTreeByPath(path);
		if(tb == null){
			DirLevelRelation news_dir = new DirLevelRelation();
			news_dir.setPid(pid);
			news_dir.setVal(getVal(path));
			news_dir.setPath(path);
			dirLevelRelationService.insertDirLevelInfo(news_dir);
		}
	
	}
	
	private static String getVal(String path){
		String[] childs = path.split(">");
		return childs[childs.length-1];
	}
	
	
	private TreeBuild getNodeInfo(String path){
		TreeBuild tb = dirLevelRelationService.selectTreeByPath(path);
		return tb;
	}
	
	private void findNodeisLeaf(TreeBuild tb){
		Integer size  = dirLevelRelationService.findCountByPath(tb.getId());
		 if(size != null && size > 0)
			 tb.setState("closed");
	}
	
	
	
	
	
	
}

 显示效果:




一部分数据格式:



评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值