实现左右两边用户添加、删除、调位置(上下移动)、排序等的功能
排序 实现 功能 用户 删除 添加 移动 位置
2023-09-11 14:18:15 时间
实现左右两边用户添加、删除、调位置(上下移动)、排序等的功能
option排序,option上下移动位置,option调整位置
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年3月11日 15:18:10 星期五
http://fanshuyao.iteye.com/
一、效果图
二、功能实现
1、组织架构树的html
<ul id="tree"></ul>
2、右边操作的html
<div data-options="region:'center',title:'选择人员'" style="width:70%;padding: 10px;"> <div class="searchDiv"> <form id="ff" method="post" novalidate> 关键字: <input class="w110 easyui-textbox ztrim" id="searchText" name="searchText" value="" data-options="required:true"/> <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="goSearch();">搜索</a> </form> </div> <div class="showUserDiv" style="margin: 10px 0px;overflow: auto;"> <div class="listDiv"> <div style="min-width: 200px;margin-bottom: 5px;" class="bold">待选列表</div> <div> <select id="userSelect" multiple="multiple" style="min-height: 250px;min-width: 200px;"> </select> </div> </div> <div class="listDiv button"> <div><a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addUser('userSelect','userSelected');">添加</a></div> <div><a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="removeUser('userSelected');">删除</a></div> <div><a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addUsers('userSelect','userSelected');">全部添加</a></div> <div><a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="removeUsers('userSelected');">全部删除</a></div> <div> <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="goUp('userSelected');">上移</a> <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="goDown('userSelected');">下移</a> </div> <div> <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="goSort('userSelected','up');">升序</a> <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="goSort('userSelected','down');">降序</a> </div> </div> <div class="listDiv"> <div style="min-width: 200px;margin-bottom: 5px;" class="bold">已选列表</div> <div> <select id="userSelected" multiple="multiple" style="min-height: 250px;min-width: 200px;"> </select> </div> </div> </div> <div id="userInfo" class="border-eee clear" style="height: 60px;background-color: #eee;max-width: 450px;margin-top: 10px;overflow: auto;"> <div> <span class="bold">描述信息:</span> <span id="userInfoName"></span> </div> <div id="userInfoOrgs"></div> </div> </div>
3、树的数据初始化js
function setOption(selectId, users){ $("#"+selectId).empty(); if(users != null && users.length > 0){ for(var i=0; i<users.length; i++){ $("#"+selectId).append("<option value='"+ users[i].userId +"'>"+ users[i].userName+"</option>"); } } }; var treeId = "tree"; function showUsers(node){ $.ajax({ url : basePath + "/xxx/url", method : 'post', data : {orgId:node.id}, async : true, error : function() { alert("操作失败"); }, success : function(data) { var users = JSON.parse(data); setOption("userSelect", users); } }); }; $("#"+treeId).tree({ url:basePath + "/xxx/url", lines:true, onClick: function(node){ showUsers(node); } });
4、【添加】功能
function addUser(selectSourceId, selectTargetId){ var targetOptions = $("#" +selectTargetId+ " option"); var sourceOptionsSelected = $("#" +selectSourceId+ " option:selected"); if(targetOptions.length < 1){ $("#" +selectTargetId).append($(sourceOptionsSelected).clone()); }else{ for(var i=0; i<sourceOptionsSelected.length; i++){ var k = 0; for(var j=0; j<targetOptions.length; j++){ if(targetOptions[j].value == sourceOptionsSelected[i].value){ break; } k++; } if(targetOptions.length == k){ $("#" +selectTargetId).append($(sourceOptionsSelected[i]).clone()); } } } };
5、【删除】功能
function removeUser(selectTargetId){ $("#" +selectTargetId+ " option:selected").detach(); };
6、【全部添加】功能
function addUsers(selectSourceId, selectTargetId){ var targetOptions = $("#" +selectTargetId+ " option"); var sourceOptionsSelected = $("#" +selectSourceId+ " option"); if(targetOptions.length < 1){ $("#" +selectTargetId).append($(sourceOptionsSelected).clone()); }else{ for(var i=0; i<sourceOptionsSelected.length; i++){ var k = 0;//k用来计算匹配的次数 //如果右边有存在的项,则k会小于targetOptions.length //相等则表示右边还没有,需要添加 for(var j=0; j<targetOptions.length; j++){ if(targetOptions[j].value == sourceOptionsSelected[i].value){ break; } k++; } if(targetOptions.length == k){ $("#" +selectTargetId).append($(sourceOptionsSelected[i]).clone()); } } } };
7、【全部删除】功能
function removeUsers(selectTargetId){ $("#" +selectTargetId+ " option").detach(); };
8、【上移】功能,把选中的项往上移动,可以选择多个不同位置的项
function goUp(selectTargetId){ var optionsSelected = $("#" +selectTargetId+ " option:selected"); var options = $("#" +selectTargetId+ " option"); if(optionsSelected.length > 0){ for(var i=1; i<options.length; i++){ if(options[i].selected){ if(!$("#" +selectTargetId+ " option")[i-1].selected){ $(options[i]).insertBefore($($("#" +selectTargetId+ " option")[i-1])); } } } } };
9、【下移】功能,把选中的项往下移动,可以选择多个不同位置的项
function goDown(selectTargetId){ var optionsSelected = $("#" +selectTargetId+ " option:selected"); var options = $("#" +selectTargetId+ " option"); if(optionsSelected.length > 0){ for(var i=(options.length-2); i>-1; i--){ if(options[i].selected){ if(!$("#" +selectTargetId+ " option")[i+1].selected){ $(options[i]).insertAfter($($("#" +selectTargetId+ " option")[i+1])); } } } } };
10、排序功能,包括升序和降序
(1)排序js功能插件
jQuery.fn.sortElements = (function(){ var sort = [].sort; return function(comparator, getSortable) { getSortable = getSortable || function(){return this;}; var placements = this.map(function(){ var sortElement = getSortable.call(this), parentNode = sortElement.parentNode, // Since the element itself will change position, we have // to have some way of storing its original position in // the DOM. The easiest way is to have a 'flag' node: nextSibling = parentNode.insertBefore( document.createTextNode(''), sortElement.nextSibling ); return function() { if (parentNode === this) { throw new Error( "You can't sort elements if any one is a descendant of another." ); } // Insert before flag: parentNode.insertBefore(this, nextSibling); // Remove flag: parentNode.removeChild(nextSibling); }; }); return sort.call(this, comparator).each(function(i){ placements[i].call(getSortable.call(this)); }); }; })();
(2)调用方法
function goSort(selectTargetId, type){ $("#" +selectTargetId+ " option").sortElements(function(a, b){ if(type.toLowerCase() == "up"){//升序 return $(a).text() > $(b).text() ? 1 : -1; }else{//降序 return -($(a).text() > $(b).text() ? 1 : -1); } }); };
11、点击显示描述信息
(1)处理显示数据
function setOrgs(id,orgs){ $("#"+id).empty(); if(orgs != null && orgs.length > 0){ for(var i=0; i<orgs.length; i++){ $("#"+id).append("<div>"+ orgs[i].parentOrgName+"</div>"); } } };
(2)绑定点击事件,jquery1.11版本号需要像下面这样绑定,不能使用live绑定。
$(document).on('click', 'option', function(){ var thisOption = $(this); $.ajax({ url : basePath + "/xxx/url", method : 'get', data : {userId:thisOption.val()}, async : true, error : function() { alert("操作失败"); }, success : function(data) { $("#userInfoName").text(thisOption.text()); var orgs = JSON.parse(data); setOrgs("userInfoOrgs", orgs); } }); });
12、父项层级关系的查询实现
(1)业务处理
/** * 递归获取传入组织org的父项组织层级关系 * @param org * @param orgs 返回的父项组织层级关系集合(包含org本身) */ public void getOrgParents(Org org, List<Org> orgs){ if(org != null){ if(org.getParentOrgId() != null){ Org parentOrg = orgService.getById(org.getParentOrgId()); getOrgParents(parentOrg, orgs); } orgs.add(org); } } /** * 根据父项组织层级关系集合(parentOrgs)获取显示的字符串 * @param parentOrgs 父项组织层级关系集合 * @param linkSymbol 字符串连接符号,linkSymbol==null时默认为→,可以设置为“—”、“——”等特殊符号 */ public String getOrgParentsString(List<Org> parentOrgs, String linkSymbol){ StringBuffer parentString = new StringBuffer(""); if(linkSymbol == null){ linkSymbol = "→"; } for (Org parent : parentOrgs) { parentString.append(parent.getOrgName()).append(" ").append(linkSymbol).append(" "); } if(parentString.indexOf(linkSymbol) > -1){ parentString.delete(parentString.lastIndexOf(linkSymbol)-1, parentString.length()); } return parentString.toString(); }
(2)功能实现调用
@RequestMapping("/xxx") @ResponseBody public String xxx(HttpServletRequest rq, HttpServletResponse rs) throws Exception { String userId = rq.getParameter("userId"); if(!StrUtils.isEmpty(userId)){ List<Org> orgs = orgService.getOrgsByUserId(userId); for (Org org : orgs) { List<Org> parentOrgs = new ArrayList<Org>(); getOrgParents(org, parentOrgs); org.setParentOrgName(getOrgParentsString(parentOrgs, null)); } return JsonUtils.Object2String(orgs); } return ""; }
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年3月11日 15:18:10 星期五
http://fanshuyao.iteye.com/
相关文章
- 1012 The Best Rank (25分) vector与结构体排序
- 快速排序-quicksort
- 处女座的期末复习----结构体排序
- HTML5 进阶系列:拖放 API 实现拖放排序
- 常见的排序算法二——希尔排序
- Golang 实现 set 集合,变相实现 切片去重、排序 功能
- Java实现 LeetCode 791 自定义字符串排序(桶排序)
- Java实现蓝桥杯算法提高12-2扑克排序
- Java实现 蓝桥杯 算法提高 成绩排序2
- Java实现 蓝桥杯 算法提高 成绩排序
- Java实现 蓝桥杯 算法提高 成绩排序
- Java实现Labeling Balls(拓扑排序的应用)
- Java实现希尔排序
- Java实现 蓝桥杯VIP 算法提高 选择排序
- Java实现 蓝桥杯VIP 算法提高 选择排序
- el-table基础上如何实现表格上下拖拽排序
- Python实现的选择排序算法原理与用法实例分析
- Python学习小技巧之列表项的排序
- SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
- JavaScript自定义排序条件
- 为什么说任何基于比较的算法将5个元素排序都需要7次?
- [手游项目3]-7-删除排序数组中的重复项的golang实现
- 快速排序
- 【LeetCode 简单 排序 python3】349. 两个数组的交集
- 【华为OD机试 2023最新 】字符串重新排列、字符串重新排序(C++ 100%)
- 310. 最小高度树-哈希表法+拓扑排序
- C++有序vector之每插入一个元素后重新排序
- 787.归并排序
- 【C++】算法集锦(1):八大排序算法 :GIF + 亲测代码 +专项练习平台