組件js

(function($){ 
//自定義去除字符串兩邊空白 
String.prototype.trim=function(){ 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
//自定義導(dǎo)入組件 
$.fn.customImport = function(methodOroptions,value){ 
if(typeof methodOroptions == "string"){//存在方法時(shí)，調(diào)用方法 
return $.fn.customImport.methods[methodOroptions](this, value); 
} 
var optionsObj = methodOroptions||{}; //不存在方法時(shí),那么傳遞的是屬性定義。 
return this.each(function() { 
$.data(this, "customImport", { 
options : $.extend({}, $.fn.customImport.defaults, optionsObj) 
}); 
initCustomImport(this); 
}); 
} 
//定義組件默認(rèn)屬性 
$.fn.customImport.defaults={ 
width:400, 
height:90, 
enctype:'multipart/form-data', 
action:'', //導(dǎo)入方法調(diào)用 
method:'post', //請(qǐng)求方式 
fileType:'.XLS,.xlsx', //文件類型，默認(rèn)為xls格式 
xmlName:'', //導(dǎo)入模版XML參數(shù)名 
xmlValue:'', //導(dǎo)入模版XML參數(shù)值 
filePath:'', //文件路徑參數(shù)名 
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){ 
//獲取當(dāng)前文件框 
var fileInput = $(obj).find(".real-file"); 
//在當(dāng)前文件框后克隆一個(gè)相同的元素，并設(shè)置值為"",IE默認(rèn)克隆的值為空，谷歌火狐會(huì)將值一起克隆 
fileInput.after(fileInput.clone().val("")); 
//刪除當(dāng)前文件框 
fileInput.remove(); 
//為新的文件框綁定onchange事件 
$(obj).find(".real-file").on("change",function(){ 
changeFile(obj); 
}); 
//清空文件顯示路徑 
$(obj).find(".file-pathname").val(""); 
//取消校驗(yàn)提示 
$(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(&#39;<div class="choose-file"><div class="choose-title">瀏覽目錄</div></div>&#39;);//添加文件選擇按鈕 
$(obj).find(".choose-file").append(&#39;<input class="real-file" type="file"/>&#39;); //真實(shí)文件控件 
$(obj).find(".choose-file").append(&#39;<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"請(qǐng)選擇導(dǎo)入文件",validType:"importFormatValidate""/></div>&#39;);//文件路徑顯示框 
$(obj).append(&#39;<div class="import-template"><a class="upload-template" href="javascrip:void(0);">導(dǎo)入模版下載</a></div>&#39;);//模版下載按鈕 
$(obj).append(&#39;<div class="import-xml"><input class="xml-config" type="hidden"></div>&#39;); 
$(obj).find(&#39;.import-xml&#39;).append(&#39;<input class="websocket-config" type="hidden" name="dto.code">&#39;); 
//綁定文件名改變事件 
$(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);//導(dǎo)入的xml參數(shù)名 
$(obj).find(".import-xml .xml-config").val(options.xmlValue);//導(dǎo)入的xml參數(shù)值 
//綁定下載模版的url 
$(obj).find(".upload-template").attr("href",options.uploadTemplateUrl); 
} 
//初始化導(dǎo)入框 
var flag = false; 
if($(".custom-import").length>0){ 
$(".custom-import").customImport(); 
flag = true; 
} 
//選擇文件改變時(shí)觸發(fā) 
function changeFile(obj){ 
var filePath = $(obj).find(".real-file").val(); 
if(filePath&&filePath.trim()!=""){ 
var fileNamePosition = filePath.lastIndexOf(&#39;\\&#39;); 
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 : {// 驗(yàn)證導(dǎo)入格式是否是excel 
validator : function(value,param) { 
var fileTypeIndex = value.lastIndexOf("."); 
var fileType = value.substring(fileTypeIndex); 
if(fileType!=".xls"&&fileType!=".xlsx"){ 
return false; 
} 
return true; 
}, 
message : &#39;請(qǐng)選擇.xls或者.xlsx文件！&#39;
} 
}); 
})

組件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; 
}

組件引用

html部分

<div id="importExcelWin" class="dialog">
<form id="importForm" class="custom-import dhccform"></form>
</div>
<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 : '導(dǎo)入字典', 
width :430, 
height :185, 
closed : true, 
modal : true, 
buttons:[{ 
text:'保存', 
handler:function(){ 
importData(); 
} 
},{ 
text:'取消', 
handler:function(){ 
$CommonUI.getDialog("#importExcelWin").dialog("close"); 
} 
} 
] 
}) 
//初始化導(dǎo)入框 
$("#importForm").customImport({ 
action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel", 
xmlName:'dto.exportFileName', //導(dǎo)入模版XML參數(shù)名 
xmlValue:'systemDictionaryImport', //導(dǎo)入模版XML參數(shù)值 
filePath:'dto.uploadFile', //文件路徑參數(shù)名 
uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary'
});

組件效果

1.該組件使用了easyui-validatebox，使用者也需引用該組件不然校驗(yàn)會(huì)出錯(cuò)。

2.該組件是結(jié)合后端定制的一個(gè)組件，以減少前端html重復(fù)配置而導(dǎo)致的出錯(cuò)。值得學(xué)習(xí)的僅僅是組件定義的方法而不是組件本身。

3.為了滿足IE組件有2處特殊處理，第一：是用文件框覆蓋在選擇目錄之上以保證IE安全校驗(yàn)只識(shí)別鼠標(biāo)直接點(diǎn)擊的文本框。第二：IE不能直接清除文件框的內(nèi)容，這里采用克隆刪除的方式清空文件框以存在的內(nèi)容。