实现左右两边用户添加、删除、调位置（上下移动）、排序等的功能

实现左右两边用户添加、删除、调位置（上下移动）、排序等的功能

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/