jquery自定義導入組件

1.組件js

 

(function($){
	//自定義去除字符串兩邊空白
	String.prototype.trim=function(){
	    return this.replace(/(^\s*)|(\s*$)/g, "");
	}
	//自定義導入組件
	$.fn.customImport = function(methodOroptions,value){
		if(typeof methodOroptions == "string"){//存在方法時,調用方法
			return $.fn.customImport.methods[methodOroptions](this, value);
		}
		var optionsObj = methodOroptions||{};	//不存在方法時,那麼傳遞的是屬性定義。
		return this.each(function() {
			$.data(this, "customImport", {
				options : $.extend({}, $.fn.customImport.defaults, optionsObj)
			});
			initCustomImport(this);
		});	
	}
	//定義組件默認屬性
	$.fn.customImport.defaults={
		width:400,
		height:90,
		enctype:'multipart/form-data',
		action:'',						//導入方法調用
		method:'post',					//請求方式
		fileType:'.XLS,.xlsx',				//文件類型,默認為xls格式
		xmlName:'',						//導入模版XML參數名
		xmlValue:'',					//導入模版XML參數值
		filePath:'',					//文件路徑參數名
		uploadTemplateUrl:'',			//下載模版的路徑
		onSubmit:function(param){
		}
	}
	//定義組件方法
	$.fn.customImport.methods = {
		submit :function(obj,options){
			if($(obj).customImport("validate")){
				var formOptions = {};
				if(options.action){
					formOptions.url = options.action;
				}
				if(options.onSubmit){
					formOptions.onSubmit = options.onSubmit;
				}
				if(options.success){
					formOptions.success = options.success;
				}
				$CommonUI.getForm("#importForm").form("submit",formOptions);
			}
		},
		clear:function(obj){
			//獲取當前文件框
			var fileInput = $(obj).find(".real-file");
			//在當前文件框後克隆一個相同的元素,並設置值為"",IE默認克隆的值為空,谷歌火狐會將值一起克隆
			fileInput.after(fileInput.clone().val(""));
			//刪除當前文件框
			fileInput.remove();
			//為新的文件框綁定onchange事件
			$(obj).find(".real-file").on("change",function(){
				changeFile(obj);
			});
			//清空文件顯示路徑
			$(obj).find(".file-pathname").val("");
			//取消校驗提示
			$(obj).find(".validatebox-invalid").removeClass("validatebox-invalid");
		},
		validate:function(obj){
			var validateState = $(obj).find(".file-pathname").validatebox("isValid");
			return validateState;
		}
	}
	
	function initCustomImport(obj){
		var options = $.data(obj,"customImport").options;
		$(obj).width(options.width);
		$(obj).height(options.height);
		$(obj).attr("enctype",options.enctype);
		$(obj).attr("action",options.action);
		$(obj).attr("method",options.method);
		if(!flag){
			//初始化組件
			$(obj).append('<p class="choose-file"><p class="choose-title">瀏覽目錄</p></p>');//添加文件選擇按鈕
			$(obj).find(".choose-file").append('<input class="real-file" type="file"/>');	//真實文件控件
			$(obj).find(".choose-file").append('<p class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"請選擇導入文件",validType:"importFormatValidate""/></p>');//文件路徑顯示框
			$(obj).append('<p class="import-template"><a class="upload-template" href="javascrip:void(0);">導入模版下載</a></p>');//模版下載按鈕
			$(obj).append('<p class="import-xml"><input class="xml-config" type="hidden"></p>');
			$(obj).find('.import-xml').append('<input class="websocket-config" type="hidden" name="dto.code">');
			
			//綁定文件名改變事件
			$(obj).find(".real-file").on("change",function(){
				changeFile(obj);
			});
		}
		//綁定組件屬性和事件
		$(obj).find(".real-file").attr("name",options.filePath);//為文本框綁定name屬性
		$(obj).find(".real-file").attr("accept",options.fileType);//文件接收類型
		$(obj).find(".real-file").width(options.width*0.3-6);
		$(obj).find(".import-xml .xml-config").attr("name",options.xmlName);//導入的xml參數名
		$(obj).find(".import-xml .xml-config").val(options.xmlValue);//導入的xml參數值
		
		//綁定下載模版的url
		$(obj).find(".upload-template").attr("href",options.uploadTemplateUrl);
	}
	
	//初始化導入框
	var flag = false;
	if($(".custom-import").length>0){
		$(".custom-import").customImport();
		flag = true;
	}
	
	//選擇文件改變時觸發
	function changeFile(obj){
		var filePath = $(obj).find(".real-file").val();
		if(filePath&&filePath.trim()!=""){
			var fileNamePosition = filePath.lastIndexOf('\\'); 		
			var fileName=filePath.substring(fileNamePosition+1);
			$(obj).find(".file-pathname").val(fileName);
			$(obj).find(".file-pathname").removeClass("validatebox-invalid");
		}
	}
})(jQuery);

$(function(){
	$.extend($.fn.validatebox.defaults.rules, { 
		importFormatValidate : {// 驗證導入格式是否是excel
			validator : function(value,param) {  
				var fileTypeIndex = value.lastIndexOf(".");
				var fileType = value.substring(fileTypeIndex);
				if(fileType!=".xls"&&fileType!=".xlsx"){
					return false;
				}
				return true;  
			},  
			message : '請選擇.xls或者.xlsx文件!'  
		}
	});
})

 

2.組件css

.choose-file{
	padding:10px;
}
.choose-title{
	width: 30%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    background: #337AB7;
    color: #fff;
    border-radius: 6px 0 0 6px;
	cursor: pointer;
	float:left;
}
.choose-title:hover{
	 background: #36577D;
}
.real-file{
	height: 30px;
    width: 27%;
    position: absolute;
    left: 25px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.file-path {
    width: 70%;
    height: 30px;
    float:left;
}
.file-pathname{
	width: 100%;
    height: 26px;
    border-radius: 0 6px 6px 0;
    border: 1px solid #337AB7;
}
.import-template{
    float: right;
    margin: 10px;
    background: #cbcbcc;
    border-radius: 6px;
}
.import-template:hover{
	 background:#BEB89D;
}
.upload-template{
	text-decoration: none;
    color: #fff;
    padding: 7px;
    display: inline-block
}
.import-xml{
	display:none;
	clear:both;
}
.other-title{
	width: 30%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    background: #337AB7;
    color: #fff;
    border-radius: 6px 0 0 6px;
	float:left;
}
.other-param{
	padding:10px;
}
.other-content{
	width: 70%;
    height: 30px;
    float:left;
}
.other-text{
    border-radius: 0 6px 6px 0;
    border: 1px solid #337AB7;
}

3.組件引用

html部分

<p id="importExcelWin" class="dialog">
   <form id="importForm" class="custom-import dhccform"></form>
</p>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/customComponent/customImport.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/customComponent/customImport.js"></script>

js部分

 

$CommonUI.getDialog("#importExcelWin").dialog({
	title : '導入字典',
	width :430,
	height :185,
	closed : true,
	modal : true,
	buttons:[{
		text:'保存',
		handler:function(){
			importData();
		}
	},{
		text:'取消',
		handler:function(){
			$CommonUI.getDialog("#importExcelWin").dialog("close");
		}
	}
	]
})
//初始化導入框
$("#importForm").customImport({
	action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel",
	xmlName:'dto.exportFileName',						//導入模版XML參數名
	xmlValue:'systemDictionaryImport',					//導入模版XML參數值
	filePath:'dto.uploadFile',					//文件路徑參數名
	uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary'
});

4.組件效果

註意事項:1.該組件使用瞭easyui-validatebox,使用者也需引用該組件不然校驗會出錯。

2.該組件是結合後端定制的一個組件,以減少前端html重復配置而導致的出錯。值得學習的僅僅是組件定義的方法而不是組件本身。

3.為瞭滿足IE組件有2處特殊處理,第一:是用文件框覆蓋在選擇目錄之上以保證IE安全校驗隻識別鼠標直接點擊的文本框。第二:IE不能直接清除文件框的內容,這裡采用克隆刪除的方式清空文件框以存在的內容。

發佈留言