深入学习jquery源码之查询选择插件的实现

深入学习jquery源码之上传查询选择插件的实现

;(function($){
	var defaults = {
			url : "",
			fieldCode: "",
			multi : false,
			area: ['40%','80%'],
			code:['code','name'] 	 //注意顺序，先是code,再是name
	};
	
	function renderSelector(options){
		debugger;
		this.settings = $.extend({},defaults,options);
		var $domObj = $("#" + this.settings.fieldCode + "-popSelector");
		this.settings.url = $domObj.attr("action") ? $domObj.attr("action") : this.settings.url;
		this.settings.multi = $domObj.attr("multi") ? $domObj.attr("multi") : this.settings.multi;
		this.settings.code = $domObj.attr("codeAndName") ? $domObj.attr("codeAndName").split(",") : this.settings.code;
		this.init();
	}
	
	//为函数添加原型链上的方法
	renderSelector.prototype = {
		init: function(){
			debugger;
			var _self = this,
				_keys = _self.settings.code;
			
			
			$("input[name='" + _keys[0] +"']").parent().parent().find("button").unbind('click').bind('click', function(){
				var action = "_self." + $(this).attr("action");
				eval(action);
			});
		},
		querySelect : function(thi,event){
			var param=$("#" + this.settings.fieldCode + "-popSelector").find("input[type='hidden']").val();
			var _self = this;
			var url = "";
			var urlParam=_self.settings.url;
			if(urlParam.indexOf("?") != -1 ){
				url=CONTEXT_PATH + urlParam+"&ids="+param;
			}else{
				url = CONTEXT_PATH + urlParam+"?ids="+param;
			}
			var layIndex = layer.open({
	        	type: LayuiPopStyle.LAYUI_IFRAME_LAYER,
	        	title: "查询选择",
	        	maxmin: false,
				shadeClose: false, 				//开启遮罩关闭
	        	area: _self.settings.area,
	        	btn: ['确认', '取消'],
	        	content: url,
	        	success: function(layero){
	        	},
	        	yes: function(index, layero){	//如果设定了yes回调，需进行手工关闭
	        		//当点击‘确定’按钮的时候，获取弹出层返回的值
	        		var dataArr = window["layui-layer-iframe" + index].querySelectCallbackData();
	        		
	        		if(dataArr.length == 0){
	        			layer.msg("只能选择数据...", {icon: 5});
	        			return false;
	        		}
	        		
	        		if(!eval(_self.settings.multi) && dataArr.length > 1){  //默认单选
	        			layer.msg("只能选择一条数据...", {icon: 5});
	        			return false;
	        		}
	        		
	        		var _keys = _self.settings.code,
	        			code = "",
	        			name = "";
	        		    userId = "";
	        		if(!_self.settings.multi){
	        			code = dataArr[0]['code'];
	        			name = dataArr[0]['name'];
        			}else{
        				var _code = "",
        					_name = "";
        				    _userId="";
            			for(var i=0,len=dataArr.length; i1)
            			{
            			   userId += _userId.substring(0,_userId.length-1);
            			}
        			}
	        		
	        		//给input[name='']:text 赋值
	        		$("input[name='" + _keys[0] + "']:hidden").val(code);
	        		$("input[name='" + _keys[1] + "']:text").val(name);
	        		$("textarea[name='"+ _keys[1] + "']").val(name);
	        		if(!$.isEmptyStr())
	        		if(!$.isEmptyStr(userId))
	        		{
	        			$("input[name='orgUserId']:hidden").val(userId);
	        		}
	    		    layer.close(index); 
	    		},
	        	end: function(){		//销毁列表回调方法
	        	},
	        	cancel: function(){ 	//点击左上角关闭按钮回调方法
	        	}
	        	
	        });
			
		},
		clearSelect : function(){
			var _self = this,
				_keys = _self.settings.code;
			$("input[name='" + _keys[0] + "']:hidden").val("");
    		$("input[name='" + _keys[1] + "']:text").val("");
		}
	}
	
	//扩展jquery类方法
	$.extend({
		renderSelector : function(options){
			return new renderSelector(options);
		}
	});
	
})(jQuery)

如何使用

    renderSelector = $.renderSelectorMyf({
        fieldCode: "gfyId",
        url: "../../Security/selector/user/UserList.html?s=" + Math.random(),
        multi: false,
        code: "gfyId,gfyIdName",
        keyRespField: "gfyId,id",
        dictCode: "publicserviceName",
        area: ['90%','90%']
    });
	

    _self.renderSelectors = [renderSelector];

具体实现

html

	        
用户名称：
	          
	          
              
                                    选择
              
	          

定义局部闭包，覆盖原有的覆盖方法实现数据加载

var _self = new View();
$(function () {
	
    _self.createCusView = function(){
        $("#WindowFire").combobox({
            url: _self.dicurl+'yesno'
        });

    }
    
    _self.init = function(){
    	_this = this;
    	
    	renderSelector = $.renderSelector({
            fieldCode: "gfyId",
            url: "../../Security/selector/user/UserList.html?s=" + Math.random(),
            multi: false,
            code: "gfyId,gfyIdName",
            keyRespField: "gfyId,id",
            dictCode: "publicserviceName",
            area: ['90%','90%']
        });
    	

    	_this.renderSelectors = [renderSelector];
        
        if (key&&key!="") {
            $.get("security/installapplyvo/getById/" + key, function (data) {
            	
                _this.getMainData = data;
                
                if($.util.request["type"] != "add" && _this.renderSelectors){
                	for(var i=0,len=_this.renderSelectors.length; i