jQuery自定义组件(导入组件) - Web前端

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('<div class="choose-file"><div class="choose-title">浏览目录</div></div>');//添加文件选择按钮 
$(obj).find(".choose-file").APPend('<input class="real-file" type="file"/>'); //真实文件控件 
$(obj).find(".choose-file").append('<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"请选择导入文件",validType:"importFormatValidate""/></div>');//文件路径显示框 
$(obj).Append('<div class="import-template"><a class="upload-template" href="javascrip:void(0);">导入模版下载</a></div>');//模版下载按钮 
$(obj).append('<div class="import-xml"><input class="xml-config" type="hidden"></div>'); 
$(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部分

<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 : '导入字典', 
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不能直接清除文件框的内容，这里采用克隆删除的方式清空文件框以存在的内容。

以上所述是小编给大家介绍的jQuery自定义组件(导入组件)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

标签：组件自定义WebjQuery