jquery-ui 使用总结
来源：互联网 发布：手机噪声测试软件 编辑：程序博客网 时间：2024/05/22 11:40
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 onclick="append()" href="#">append</a><a onclick="remove()" href="#">remove</a><ul id="root"></ul> <td><div id="indexRight" height="100%" width="100%"> </div></td> </tr></table></body></html>后台service逻辑代码
@Overridepublic 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代码
@Overridepublic 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>
- jquery-ui 使用总结
- jQuery UI使用总结
- jquery ui 文档使用总结
- jquery easy ui 使用总结
- JQuery Kendo UI使用技巧总结
- jQuery UI dialog 的使用总结
- JQuery Kendo UI使用技巧总结
- jQuery UI知识点总结
- jQuery UI 日期选择器（Datepicker）使用总结
- jQuery Slider UI使用
- jQuery UI Tab 使用
- Jquery ui tabs 使用
- jquery ui datepicker使用
- 使用 jQuery UI AutoComplete
- jquery ui droppable使用
- jquery ui的使用
- jQuery UI使用
- jQuery UI的使用
- 讲解Unix操作系统pgrep工具
- 昆明2名民警处警过程中遭醉酒嫌疑人捅伤致死-民警-处警-醉酒
- jquery的多种取值方式
- 收集到的九种设计模式详解
- C++中char*\wchar_t*\string\wstring之间的相互转换
- jquery-ui 使用总结
- 策略模式
- velocity 教程及例子
- 黑马程序员 Java集合框架
- dojo接收spring返回json对象错误解决
- 关于滚屏背景/拼接地图有黑边(缝隙)
- 延迟加载图片
- 冒泡排序
- 一个简单词法分析器的实现代码（java实现）
