`
忧里修斯
  • 浏览: 432453 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jQuery拖动树实例

阅读更多
1、树根节点
<ul class="simpleTree">
	<li class="root" id='root'>
		<span>所有群组</span>
		<ul>
			<%=topGroupTree%>
		</ul>
	</li>
</ul>


2、值topGroupTree

UsergroupInfo ugInfo = new UsergroupInfo();
RelationguInfo rInfo = new RelationguInfo();
//获取一级群组列表
String topGroupTree = ugInfo.getTopLevelGroup();


3、方法getTopLevelGroup

/**
 * 获取一级群组
 * @return
 */
public String getTopLevelGroup(){
	
	String group_tree = "";
	String sql = "select group_id, group_name from zl_usergroup where group_level='1'";
	ArrayList result = new DbexecuteDAO().selBizQuery(sql);
	if(null != result){
		for (int i = 0; i < result.size(); i++) {
			HashMap map = (HashMap) result.get(i);
			String group_id = "",group_name="";
			if(null != map){
				if(null != map.get("group_id")){
					group_id = map.get("group_id").toString();
				}
				if(null != map.get("group_name")){
					group_name = map.get("group_name").toString();
				}
				group_tree += "<li class='colse' id='"+group_id+"'><span>"+group_name+"</span><ul class='ajax'><li id='ajaxli'>{url:ajaxGroup.jsp?group_id="+group_id+"}</li></ul></li>";
			}
		}
	}
	return group_tree;
}


4、ajaxGroup.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@ page import="com.crm.usergroup.UsergroupInfo" %>
<%
	
	//获取参数
	String groupId = "";
	if(null != request.getParameter("group_id")){
		groupId = request.getParameter("group_id");
	}
	UsergroupInfo ugInfo = new UsergroupInfo();
	String groupString = ugInfo.getChildgroupById(groupId);
	out.write(groupString);
 %>


5、ajaxGroupUsers.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@ page import="com.crm.relationgu.RelationguInfo" %>
<%
	
	//获取参数
	String groupId = "";
	if(null != request.getParameter("group_id")){
		groupId = request.getParameter("group_id");
	}
	RelationguInfo rInfo = new RelationguInfo();
	String groupUsersString = rInfo.getGroupUsersById(groupId);
	out.write(groupUsersString);
 %>


6、方法getGroupUsersById

/**
 * 获取指定组的成员串
 * @param group_id
 */
public String getGroupUsersById(String group_id){
	
	String usersString = "";
	ArrayList result = getUserByGroupId(group_id);
	if(result != null && result.size()> 0){
		
		for (int i = 0; i < result.size(); i++) {
			HashMap map = (HashMap) result.get(i);
			String user_id = "",user_name="";
			if(null != map){
				if(null != map.get("user_id")){
					user_id = map.get("user_id").toString();
				}
				if(null != map.get("user_name")){
					user_name = map.get("user_name").toString();
				}
				usersString += "<li id='"+user_id+"'><span class='text'>"+user_name+"</span></li>";
			}
		}
	}else{
		usersString = "<li id='' style='display:none;'></li>";
	}
	return usersString;
}
分享到:
评论

相关推荐

    jquery图片拖拽实例.zip

    【jQuery图片拖拽实例】是一个基于JavaScript库jQuery实现的交互式功能,允许用户通过鼠标拖动操作来移动页面上的图片。这个实例展示了如何利用jQuery的事件处理和DOM操作能力,为用户提供直观且易于使用的界面体验...

    jquery 制作可拖拽的div实例

    在本文中,我们将深入探讨如何使用jQuery库来创建一个可拖拽的div元素实例。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。制作可拖拽的div是实现用户交互的一种常见方法,常用于创建...

    jQueryUI官方实例集

    **jQueryUI官方实例集** jQueryUI是一个基于JavaScript库jQuery的扩展,它提供了丰富的用户界面组件,如对话框、拖放功能、日期选择器、菜单、滑块等,用于创建交互性和美观的网页应用。这个实例集是jQueryUI官方...

    jquery图片拖拽实例(支持鼠标双击事件拖拽图片)

    本实例主要探讨如何利用jQuery实现图片的拖拽功能,并且特别关注鼠标双击事件来触发拖拽操作。接下来,我们将深入解析这个实例的核心知识点。 首先,我们需要引入jQuery库。在HTML文件中,可以通过添加以下代码来...

    jquery图片拖拽实例(支持鼠标双击事件拖拽图片)效果代码

    在本实例中,我们将深入探讨如何使用jQuery库实现一个图片拖拽功能,同时支持鼠标双击事件来开启拖拽操作。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务,使得创建交互式的网页变得...

    jQuery可任意拖拽排序菜单树机构树特效代码

    在这个实例中,我们使用的是`sortable-lists.min.js`,这是一个轻量级的jQuery插件,专门用于实现列表的拖拽排序功能。 在项目中,我们有以下核心组成部分: 1. **index.html**:这是整个应用的入口文件,包含了...

    备忘:jquery的一些实例

    标题中的“备忘:jquery的一些实例”提示我们,这篇内容主要关注的是jQuery库中的实际应用案例。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个备忘中,作者...

    jquery - 1.4.2 图片拖拽排序实例

    【jQuery - 1.4.2 图片拖拽排序实例详解】 在Web开发中,实现用户界面的交互性是提高用户体验的重要手段。jQuery库因其简洁的API和强大的功能,成为了JavaScript开发者常用的选择。本实例主要关注的是使用jQuery ...

    基于jQuery 的Ajax完整拖动实例

    基于jQuery 的Ajax完整拖动实例,可以动态添加一个新的拖动实例,可以无刷新切换网页风格,可以适时编辑模块内容,指定拖动区域。实例简单,易于理解,作为能考很不错。请在IIS下运行本实例,源码爱好者测试演示如上...

    jQuery拖动拖拽插件draggabilly.pkgd.js

    《jQuery拖动拖拽插件draggabilly.pkgd.js详解》 在现代网页开发中,用户交互体验的提升已经成为了一项重要的设计考量。其中,拖放(Drag and Drop)功能作为增强用户交互的一种手段,被广泛应用在各种场景,如文件...

    JQuery+easyUI实例

    **jQuery和EasyUI简介** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...提供的JQueryEasyUI实例下载将是一个很好的实践平台,帮助开发者深入理解和运用这两个库。

    JQuery树形菜单实例

    **JQuery树形菜单实例详解** 在Web开发中,树形菜单是一种常见的用户界面元素,它以层次结构显示数据,方便用户浏览和操作。JQuery,一个轻量级且功能强大的JavaScript库,提供了构建此类菜单的便利。在这个实例中...

    jquery dtree 实例 动态实现无限树形菜单(增删改查)

    这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单,并实现基本的数据操作功能,包括添加、删除、修改和查询。下面我们将深入探讨这个主题。 首先,jQuery dTree是一个轻量级的插件,它基于...

    JQuery 模式对话框实例

    "JQuery 模式对话框实例"是指使用 jQuery 创建的一种特殊的对话框,它在页面上弹出时,会将背景变暗,使用户无法与背景中的其他元素交互,直至对话框关闭。这种模式对话框常用于警告、确认、输入信息等场景。 在 ...

    jQuery炫酷实例

    本篇文章将深入探讨jQuery的几个炫酷实例,包括Tab效果、拖动效果以及网络相册的实现,帮助你更好地理解和运用jQuery。 ### Tab效果 Tab效果是一种常见的网页交互设计,允许用户在多个内容区域之间切换,常用于展示...

    jQuery拖动滑块时间轴选择日期代码.zip

    总结而言,"jQuery拖动滑块时间轴选择日期代码"是一个结合了jQuery、ECMAScript特性和前端UI设计的实例,它展示了如何利用JavaScript技术构建交互式的日期选择工具。通过学习和理解这段代码,开发者可以提升自己的...

    jstree-实用的jQuery目录树插件

    **jstree:jQuery的强力目录树插件** 在网页开发中,为了更好地展示层级结构的数据,目录树组件是不可或缺的工具。jstree是一款基于jQuery的开源插件,它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款...

    PHP jQuery 可拖动的Ajax购物车实例.rar

    PHP jQuery 可拖动的Ajax购物车实例,带有提示功能的商品展示 ,用鼠标拖动商品到购物车中,即可选中商品,购物车程序可根据 拖入的产品数量进行统计,自动给出价格。同时对不满意的商品, 可随时从购物车中移除...

Global site tag (gtag.js) - Google Analytics