1.组件js
自定义去除字符串两边空白
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('');//添加文件选择按钮
$(obj).find(".choose-file").append('文件控件
$(obj).find(".choose-file").append('
Box" type="text" readonly="readonly" data-options="required:true,missingMessage:"请选择导入文件",validType:"importFormatValidate""/>
');//文件路径显示框
$(obj).append('');//模版下载按钮
$(obj).append('');
$(obj).find('.import-xml').append('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
3.组件引用
html部分
js部分
文件路径参数名
uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary'
});
4.组件效果
注意事项：
1.该组件使用了easyui-validateBox，使用者也需引用该组件不然校验会出错。
2.该组件是结合后端定制的一个组件，以减少前端html重复配置而导致的出错。值得学习的仅仅是组件定义的方法而不是组件本身。
3.为了满足IE组件有2处特殊处理，第一：是用文件框覆盖在选择目录之上以保证IE安全校验只识别鼠标直接点击的文本框。第二：IE不能直接清除文件框的内容，这里采用克隆删除的方式清空文件框以存在的内容。
以上所述是小编给大家介绍的jQuery自定义组件(导入组件)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/jquery/44543.html