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


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

    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/

  • 相关阅读:
    scanf和cin的返回值
    C++ STL中Map的按Key排序跟按Value排序
    name lookup of 'res' changed for new ISO 'res' scoping
    string中c_str()、data()、copy(p,n)函数的用法
    C中malloc的使用(转)
    codeforces 653B B. Bear and Compressing(dfs)
    codeforces 653A A. Bear and Three Balls(水题)
    hdu-5646 DZY Loves Partition(贪心)
    hdu-5645 DZY Loves Balls(水题)
    codeforces 655D D. Robot Rapping Results Report(拓扑排序+拓扑序记录)
  • 原文地址:https://www.cnblogs.com/fanshuyao/p/6227145.html
Copyright © 2020-2023  润新知