实现左右两边用户添加、删除、调位置(上下移动)、排序等的功能
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="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- 200px;margin-bottom: 5px;" class="bold">待选列表</div> <div> <select id="userSelect" multiple="multiple" style="min-height: 250px;min- 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- 200px;margin-bottom: 5px;" class="bold">已选列表</div> <div> <select id="userSelected" multiple="multiple" style="min-height: 250px;min- 200px;"> </select> </div> </div> </div> <div id="userInfo" class="border-eee clear" style="height: 60px;background-color: #eee;max- 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/