jquery-ui 使用总结

最新推荐文章于 2022-10-11 15:59:56 发布
最新推荐文章于 2022-10-11 15:59:56 发布
阅读量1.2k 收藏
点赞数
分类专栏： java 文章标签： string exception function stylesheet attributes object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zsw2zkl/article/details/8076088
版权
本文介绍了一个使用jQuery UI实现拖拽功能，并在拖拽前后与后台进行数据同步的技术实现，包括数据更新、父子节点关系调整及前端与后台数据一致性维护。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jquery-ui支持拖拽 本文贴的重点是拖拽后同步后台并维护前台数据一与后台数据致的代码

js代码

<!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>categoryList</title>
<link rel="stylesheet" type="text/css" href="media/css/easyui.css">
<link href="media/css/icon.css" rel="stylesheet" type="text/css" />    
<link href="media/css/tree.css" rel="stylesheet" type="text/css" />    
<script type="text/javascript" src="media/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="media/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="media/js/jquery.form-new.js"></script>
<script type="text/javascript">
	$(function(){		
		$('#root').tree({
					url:'category.jhtml?event=childrenName',
					method:"post",
					animate:true,
					dnd:true,
					onClick:function(node){	
								$.ajax({
									url:"category.jhtml",
									data: {"event":"detail","UUID":node.id},
							        type: "post",
							        success: function (datas) {
							        	$("#indexRight").html(datas);
							        	var nodeParent = $('#root').tree('getParent', node.target);
							        	$("#categoryInfoParentName").val(nodeParent.text);
							        	var date = new Date();
							        	var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
							        	$("#categoryInfoUpdateTime").val(dateStr);
							        	$("#categoryInfoForm").submit(function() { $(this).ajaxSubmit(function(data){
							        						alert(data);
							        						$('#root').tree('reload', nodeParent.target);
							        					});return false;
							        	})
							          }	 
							      });
								$('#root').tree('expand',node.target);
							},
					onDrop:function(target, source, point){
								var targetNode = $('#root').tree('getNode', target);
								var targetParentNode = $('#root').tree('getParent', target);
								var sourceParentNode = $('#root').tree('find', source.attributes.parentUUID);
								var targetParentUUID = targetNode.attributes.parentUUID;
								var sourceParentUUID = source.attributes.parentUUID;
								var targetOrd = targetNode.attributes.ord;
								var sourceOrd = source.attributes.ord;
								var dataForUpdate;
								var dataForUpdateChildOrd;
								var operatorName;
								var changeOrd;
								console.log("targetOrd -- "+targetOrd)
								console.log("sourceOrd -- "+sourceOrd)
								console.log("target.innerHTML -- "+target.innerHTML)
								console.log("targetParentUUID -- "+targetParentUUID)
								console.log("sourceParentUUID -- "+sourceParentUUID)
								console.log("point -- "+point)
								if(targetParentUUID == sourceParentUUID){
									console.log("A")
									if(targetOrd > sourceOrd){
										if("top" == point){
											targetOrd --;
										}
										operatorName = "bottom";
										changeOrd = function(){
											var children = getDirectChildren(targetParentNode.target);
											console.log("children.length -- " +children.length)
											for(var i = 0;i<children.length;i++){
												var divEle = $(children[i]).children()[0];
												var divID =  $(divEle).attr("node-id");
												console.log("divID -- " + divID)
												var childNode = $("#root").tree('find',divID);
												var dataOrd = childNode.attributes.ord;
												if(dataOrd > sourceOrd && dataOrd <= targetOrd){
													childNode.attributes.ord--;
												}
											}
											source.attributes.ord = targetOrd;
										}
									}else{
										if("bottom" == point){
											targetOrd ++;
										}
										operatorName = "top";
										changeOrd = function(){
											var children = getDirectChildren(targetParentNode.target);
											for(var i = 0;i<children.length;i++){
												var divEle = $(children[i]).children()[0];
												var divID =  $(divEle).attr("node-id")
												console.log("divID -- " + divID)
												var childNode = $("#root").tree('find',divID);
												var dataOrd = childNode.attributes.ord;
												if(dataOrd < sourceOrd && dataOrd >= targetOrd){
													childNode.attributes.ord++;
												}
											}
											source.attributes.ord = targetOrd;
										}
									}
									dataForUpdateChildOrd = {"event":"updateChildOrd","parentUuid":targetParentUUID,"targetOrd":targetOrd,"sourceOrd":sourceOrd,"operatorName":operatorName};
									dataForUpdate = {"event":"update","uuid":source.id,"ord":targetOrd};
								}else{
									console.log("B")
									operatorName = "append";
									if("bottom" == point){
										targetOrd ++;
									}
									dataForUpdate = {"event":"update","uuid":source.id,"parentUuid":targetParentUUID,"ord":targetOrd};
									dataForUpdateChildOrd = {"event":"updateChildOrd","parentUuid":targetParentUUID+"#"+sourceParentUUID,"targetOrd":targetOrd,"sourceOrd":sourceOrd,"operatorName":operatorName};
									changeOrd = function(){
										var sourceChildren = getDirectChildren(sourceParentNode.target);
										for(var i = 0;i<sourceChildren.length;i++){
											var divEle = $(sourceChildren[i]).children()[0];
											var divID =  $(divEle).attr("node-id")
											var childNode = $("#root").tree('find',divID);
											var dataOrd = childNode.attributes.ord;
											if(dataOrd > sourceOrd){
												childNode.attributes.ord--;
												console.log(childNode.text+"-->"+childNode.attributes.ord)
											}
										}
										var targetChildren = getDirectChildren(targetParentNode.target);
										for(var i = 0;i<targetChildren.length;i++){
											var divEle = $(targetChildren[i]).children()[0];
											var divID =  $(divEle).attr("node-id")
											if(source.id != divID){
												var childNode = $("#root").tree('find',divID);
												var dataOrd = childNode.attributes.ord;
												if(dataOrd >= targetOrd){
													childNode.attributes.ord++;
													console.log(childNode.text+"-->"+childNode.attributes.ord)
												}
											}
										}
										source.attributes.parentUUID = targetParentUUID;
										source.attributes.ord = targetOrd;
									}
								}
								
								$.ajax({
									url:"category.jhtml",
									data:dataForUpdateChildOrd ,
							        type: "post",
							        success: function (data){
							        	if("true"==data){
							        		
											$.ajax({
												url:"category.jhtml",
												data: dataForUpdate,
										        type: "post",
										        success: function (data) {
										        	if("更新成功"== data){
										        		changeOrd();
										        	}
										        }
										      });
							        	}
								}
							})	
						}
				})
	})
	/*返回的是li对象*/
	function getDirectChildren(target){
		return $(target).next().children();
	}
	function append(){
		var node = $('#root').tree('getSelected');
		if(node){
			var ord = $(node.target).next().children().length;
			console.log(ord);
			$('#root').tree('append', {
					parent: (node?node.target:null),
					data: [{
						id: $.ajax({url:"category.jhtml?event=uuid&parentUUID="+node.id+"&ord="+ord,async:false}).responseText,
						text: '新建文件夹',
						iconCls:"icon-save",
						state:"closed",
						attributes:{"ord":ord,"parentUUID":node.id}
					}]
				});
		}else{
			alert("请先选择你要append到的节点....");
		}
	}
	function remove(){
		var node = $('#root').tree('getSelected');
		var result = $.ajax({
			url:"category.jhtml?event=delete&UUID="+node.id,
			async:false
		}).responseText;
		if(result){
			$('#root').tree('remove', node.target);
			alert("删除成功")
		}else{
			alert("删除失败")
		}
	}
	function reload(parentNode){
		if (parentNode){
			$('#root').tree('reload', parentNode.target);
		} else {
			$('#root').tree('reload');
		}
		console.log("reload");
//		$('#root').tree('expand',parentNode.target);
	}
	
</script>
</head>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="300">
    	<a οnclick="append()" href="#">append</a><a οnclick="remove()" href="#">remove</a>
		<ul id="root"></ul>
    <td><div id="indexRight" height="100%" width="100%">   

    </div></td>
  </tr>
</table>
</body>
</html>

后台service逻辑代码 

	@Override
	public Object handleDefault(IPresentationContext context) throws Exception {
		return new FMViewAndModelResult("categoryList.html", null);
	}


	
	@To("json")
	public Object handleChildren(IPresentationContext context) throws Exception {
		String parentUUID = context.getParameter("parentUUID");
		List<QCategory> categorieList = categoryService.getCategoryByPids(parentUUID);
		return categorieList;
	}



	public Object handleChildrenName(IPresentationContext context) throws Exception {
		String parentUUID = context.getParameter("id");
		StringBuilder strBuilder = new StringBuilder("[");
		if(parentUUID == null){
			strBuilder.append("{\"id\":\"0\"");
			strBuilder.append(",\"text\":\"");
			strBuilder.append("根"); 
			strBuilder.append("\",\"iconCls\":\"icon-save\"");
			strBuilder.append(",\"state\":\"closed\"");
			strBuilder.append(",\"attributes\":{\"ord\":0,\"parentUUID\":-1}}");
			strBuilder.append("]");
		}else{
			List<QCategory> categorieList = categoryService.getCategoryByPids(parentUUID);
			for(int i = 0;i<categorieList.size();i++){
				strBuilder.append("{\"id\":\"");
				strBuilder.append(categorieList.get(i).getUuid());
				strBuilder.append("\",\"text\":\"");
				strBuilder.append(categorieList.get(i).getName()); 
				strBuilder.append("\",\"iconCls\":\"icon-save\"");
				strBuilder.append(",\"state\":\"closed\"");
				strBuilder.append(",\"attributes\":{\"ord\":");
				strBuilder.append(categorieList.get(i).getOrd()); 
				strBuilder.append(",\"parentUUID\":");
				strBuilder.append("\""+parentUUID+"\"");
				strBuilder.append("}},");
			}
			strBuilder.setLength(strBuilder.length()-1);
			strBuilder.append("]");
		}
		return strBuilder.toString();
	}
	public Object handleDetail(IPresentationContext context) throws Exception {
		String UUID = context.getParameter("UUID");
		if(StringUtils.isNotEmpty(UUID)){
			QCategory category = categoryService.getCategory(UUID);
			Map<String, QCategory> map = new HashMap<String, QCategory>();
			map.put("category", category);
			return new FMViewAndModelResult("categoryInfo.html", map);
		}
		return "";
	}
	public Object handleUuid(IPresentationContext context) throws Exception {
		String parentUUID = context.getParameter("parentUUID");
		String ordStr = context.getParameter("ord");
//		ordStr = ordStr == null?"0":ordStr;
		int ord = Integer.parseInt(ordStr);
		QCategory category = new QCategory();
		category.setName("新建文件夹");
		category.setParentUuid(parentUUID);
		category.setCreateTime(new Date());
		category.setOrd(ord);
		String uuid = categoryService.addCategory(category);
		return uuid;
	}
	public Object handleUpdate(IPresentationContext context) throws Exception {
		String parentUUID = context.getParameter("parentUuid");
		String uuid = context.getParameter("uuid");
		String targetOrdStr = context.getParameter("targetOrd");
//		targetOrdStr = targetOrdStr == null?"0":targetOrdStr;
//		sourceOrdStr = sourceOrdStr == null?"0":sourceOrdStr;
//		int targetOrd = Integer.parseInt(targetOrdStr);
		QCategory category = DataHelper.getObject(QCategory.class, context,"yyyy-MM-dd",new HashMap<String, String>(),null);
		boolean flag = categoryService.updateCategory(category);
		return flag?"更新成功":"更新失败";
	}
	public boolean handleUpdateChildOrd(IPresentationContext context) throws Exception {
		String parentUUID = context.getParameter("parentUuid");
		String targetOrdStr = context.getParameter("targetOrd");
		String sourceOrdStr = context.getParameter("sourceOrd");
		String operatorName = context.getParameter("operatorName");
//		targetOrdStr = targetOrdStr == null?"0":targetOrdStr;
//		sourceOrdStr = sourceOrdStr == null?"0":sourceOrdStr;
		int targetOrd = Integer.parseInt(targetOrdStr);
		int sourceOrd = Integer.parseInt(sourceOrdStr);
		return categoryService.updateChildOrd(parentUUID, targetOrd, sourceOrd,operatorName);
	}
	public Object handleDelete(IPresentationContext context) throws Exception {
		String uuid = context.getParameter("UUID");
		boolean flag = categoryService.deleteCategory(uuid);
		return flag;
	}
	
	class Node{
		String id;
		String text;
		String iconCls;
		String state;
	}

后台Dao代码 

	@Override	
	public boolean updateChildOrd(String parentUUID,int targetOrd,int sourceOrd,String operatorName) throws SQLException{
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("targetOrd", targetOrd);
		map.put("sourceOrd", sourceOrd);
		if("top".equals(operatorName)){
			map.put("parentUUID", parentUUID);
			this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForTop", map);
		}else if("bottom".equals(operatorName)){
			map.put("parentUUID", parentUUID);
			this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForBottom", map);
		}else if("append".equals(operatorName)){
			String[] parentUUIDArr = parentUUID.split("#");
			map.put("targetParentUUID", parentUUIDArr[0]);
			map.put("sourceParentUUID", parentUUIDArr[1]);
			this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForAppendTarget", map);
			this.daoManager.getSqlMapClient().update("qbt_category_ext.updateChildOrdForAppendSource", map);
		}
		return true;
	}

ibaits 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd">
<sqlMap namespace="qbt_category_ext">
 <select id="getCategoryNameByPids" parameterClass="string" resultClass="string">
 	select name from qbt_category where parent_uuid  = #parentCategoryUuid#
 </select>
 <update id="updateChildOrdForTop" parameterClass="map">
 	update qbt_category set ord = ord + 1 where parent_uuid  = #parentUUID# and ord >= #targetOrd# and ord < #sourceOrd#
 </update>
 <update id="updateChildOrdForBottom" parameterClass="map">
 	update qbt_category set ord = ord - 1 where parent_uuid  = #parentUUID# and ord > #sourceOrd# and ord <= #targetOrd#
 </update>
 <update id="updateChildOrdForAppendTarget" parameterClass="map">
 	update qbt_category set ord = ord + 1 where parent_uuid  = #targetParentUUID# and ord >= #targetOrd#
 </update>
 <update id="updateChildOrdForAppendSource" parameterClass="map">
 	update qbt_category set ord = ord - 1 where parent_uuid  = #sourceParentUUID# and ord >= #sourceOrd#
 </update>
</sqlMap>




jqueryUI
04-06
NULL 博文链接：https://fiano3a87.iteye.com/blog/1552622
JQuery-ui
weixin_34342905的博客
04-22 116
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。 静态资源引用 <link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" type="te...
jQuery UI基本使用方法
aizhanqian5077的博客
11-28 783
其实jQuery UI早就在我的学习计划中，只不过因为计划安排始终处于待命状态，最近项目要用到jQuery UI，就提前学习一下，也想能够封装自己的UI库，这样就不用老按照别人的套路走了，像使用jQuery UI的时候，连DOM结构都要按照他们写的来，一个div里面必须包含一个h3才有用，用h2就没用了，这样的框架延伸性太差了吧，还是自己的东西好用！ 本篇笔记为jQuery UI...
Jquery UI 入门
weixin_30656145的博客
11-03 125
Jquery UI 是一套开源免费的、基于Jquery的插件，在这里记录下Jquery UI 的初步使用。 第一、下载安装 　　　　下载Jquery,官网：http://jquery.com;　　下载Jquery UI，官网：http://jqueryui.com/ 　　　　Jquery的部署就不说了，说下Jquery UI的部署；以jquery-ui-1.9.1为例，如果只是简单使用Jqu...
关于jQuery UI 使用心得及技巧
huiqinbo的专栏
11-05 409
  　　最近项目中使用了一些插件来做页面，这里把jQuery UI的使用分享出来，希望 对新手有帮助。文章结尾附源码下载。 1 jQuery UI        　　有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery...
jquery-ui.min.js
11-07
总结起来，`jquery-ui.min.js`是jQuery UI的核心，包含了一系列强大的用户界面组件。通过它，开发者可以轻松创建具有丰富交互和良好用户体验的网页应用。无论是初学者还是经验丰富的开发者，jQuery UI都是构建高效、...
jquery-ui-draggable:jquery-ui的自定义构建（仅包含可拖动组件）
05-07
首先，确保你已经引入了jQuery库，然后引入`jquery-ui.css`和`jquery-ui.js`（或者对应的轻量级版本，如果使用了定制构建），最后引入`draggable`插件： ```html <!-- 引入jQuery --> <script src="path/to/jquery....
前端+ jquery-ui-1.13.1.custom
最新发布
04-11
这个“前端+jquery-ui-1.13.1.custom”压缩包包含了针对前端开发定制的 jQuery UI 版本，经过测试确认可以正常使用。下面我们将深入探讨 jQuery UI 的核心特性、主要组件以及如何在项目中应用和自定义。 **1. ...
jquery-ui-1.11.4完整版
04-16
总结，jQuery UI 1.11.4是一个强大且全面的前端UI框架，它提供了多种用户界面元素和交互效果，极大地扩展了jQuery的功能。开发者可以通过简单易用的API，快速构建功能丰富的、具有良好用户体验的Web应用。无论是在...
jquery-ui-1.10.4
05-06
总结，jQuery UI 1.10.4是一个强大而全面的前端UI框架，它提供的组件丰富多样，易用性强，能够帮助开发者快速构建功能丰富的交互式Web应用。通过熟练掌握jQuery UI，开发者可以大大提高工作效率，提升用户界面的用户...
jqueryUI部件库的优缺点
weixin_30555125的博客
01-29 141
jQuery UI 特性 简单易用 继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。 开源免费 采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。 广泛兼容 兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。 轻便快捷 组件间相对独立，可按需加载，避免浪费...
jQuery-UI
凝弧
03-19 726
jQuery -UI jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式。 交互（Interactions） 缩放（Resizable） 拖动（Droggable） 放置（Drappable） 选择（Selectable） 排序（Sortable） ...
jquery，jqueryUI学习心得：
miwucc的专栏
06-03 1295
jquery学习心得：看了jquery_api_1.4.chm。jquery用来提到传统的js真的很爽，特别是强大的选择器几乎可以无所不能的选出你想要的elements，并在上面进行操作。常用的提纲：--选择器$ --缓存data。刷新页面后缓存会清空。全部是ajax的情况下要注意缓存的清空和不然容易照成内存溢出。--队列queue，可以创建一组function放入一个队列中，然后依次执行      queue可以看成是一个栈缓存，里面存有名为“xx”的一个function队列，      然后调deque
jQuery-UI组件Effects
繁花落幕的博客
08-24 488
jQuery-UI组件Effects预设动画&color动画
jquery-ui.js
biji10011的博客
10-11 1140
3333
jquery UI
Carterslam
10-13 114
===================== accordion (可折叠的) =========================== $(document).ready(function(){ $("#accordion").accordion(); }); Section 1 M...
jQuery UI
qq_42671834的博客
09-19 742
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。 jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使...
Jquery-UI使用
weixin_30670965的博客
10-16 137
=创建form对话框弹出登录 首先引入css样式和js。 <link rel="stylesheet" href="<%=path%>/css/demos.css" type="text/css"></link> <link rel="stylesheet" href="<%=path%>/css/base/jquery-u...
jQuery UI 插件
Mr·小五
06-08 1205
jQuery UI 插件1、概述1.简介 UI -&gt; User Interface用户界面jQuery UI是jQuery官方提供的插件,他强化了jQuery中搭载的动画效果及特效,以实现更高级的处理与显示效果,并且提供了实现交互式web应用程序的小部件(widget)2.分类 -&gt; 大致分为三大类1)交互组件 -&gt; 拖动,投放,缩放等2)页面部件 -&gt; 折叠,按钮,对话框...
精简版jquery-ui.js压缩包使用指南
总结来说，"jquery-ui.js"作为 jQuery UI 的核心JavaScript文件，提供了丰富的用户界面元素和交互功能，极大地拓展了 jQuery 原有的能力。开发者通过引入这个文件及其相关组件，可以方便地构建出更加动态和美观的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值