jQuery自定义组件(导入组件)


Posted in Javascript onNovember 08, 2016

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.组件效果

jQuery自定义组件(导入组件)

注意事项:

1.该组件使用了easyui-validatebox,使用者也需引用该组件不然校验会出错。

2.该组件是结合后端定制的一个组件,以减少前端html重复配置而导致的出错。值得学习的仅仅是组件定义的方法而不是组件本身。

3.为了满足IE组件有2处特殊处理,第一:是用文件框覆盖在选择目录之上以保证IE安全校验只识别鼠标直接点击的文本框。第二:IE不能直接清除文件框的内容,这里采用克隆删除的方式清空文件框以存在的内容。

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

Javascript 相关文章推荐
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
将json转换成struts参数的方法
Nov 08 #Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 #Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 #Javascript
基于Vuejs框架实现翻页组件
Jun 29 #Javascript
vue2.0+webpack环境的构造过程
Nov 08 #Javascript
详解React-Todos入门例子
Nov 08 #Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
jQuery实现动画效果的实例代码
2013/05/07 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python与Redis的连接教程
2015/04/22 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python 常见的反爬虫策略
2020/09/27 Python
linux面试题参考答案(5)
2014/09/01 面试题
保险经纪人求职信
2014/03/11 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
监考失职检讨书
2015/01/26 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP