jQuery⾃定义组件（导⼊组件）
1.组件js
(function($){
//⾃定义去除字符串两边空⽩
im=function(){
place(/(^\s*)|(\s*$)/g, "");
}
//⾃定义导⼊组件
$.fn.customImport = function(methodOroptions,value){
if(typeof methodOroptions == "string"){//存在⽅法时，调⽤⽅法
return $.hods[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){
}
}
//定义组件⽅法
$.hods = {
submit :function(obj,options){
if($(obj).customImport("validate")){
var formOptions = {};
if(options.action){
formOptions.url = options.action;
}
Submit){
}
if(options.success){
formOptions.success = options.success;
}
$Form("#importForm").form("submit",formOptions);
}
},
clear:function(obj){
//获取当前⽂件框
var fileInput = $(obj).find(".real-file");
/
/在当前⽂件框后克隆⼀个相同的元素，并设置值为"",IE默认克隆的值为空，⾕歌⽕狐会将值⼀起克隆
fileInput.after(fileInput.clone().val(""));
//删除当前⽂件框springmvc注解的作用
//为新的⽂件框绑定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",pe);
$(obj).attr("action",options.action);
$(obj).attr("method",hod);
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="de">');
//绑定⽂件名改变事件
$(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",lName);//导⼊的xml参数名
$(obj).find(".import-xml .xml-config").lValue);//导⼊的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&&im()!=""){
var fileNamePosition = filePath.lastIndexOf('\\');
var fileName=filePath.substring(fileNamePosition+1);
$(obj).find(".file-pathname").val(fileName);
$(obj).find(".file-pathname").removeClass("validatebox-invalid");
}
}
})(jQuery);
$.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;
sql server数据库密码text-align: center;
background: #337AB7;
color: #fff;
border-radius: 6px 0 0 6px;
cursor: pointer;
jquery下载文件请求float:left;
}
.choose-title:hover{
background: #36577D;
}
.
real-file{
height: 30px;
virtualbox安装步骤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="<%=ContextPath()%>/js/customComponent/customImport.css"> <script type="text/javascript" src="<%=ContextPath()%>/js/customComponent/customImport.js"></script> js部分
$Dialog("#importExcelWin").dialog({
title : '导⼊字典',
width :430,
height :185,
closed : true,
modal : true,
buttons:[{
text:'保存',
handler:function(){
importData();jdk没有卸载干净怎么办
}
},{
handler:function(){
$Dialog("#importExcelWin").dialog("close");
}
}
]
})
//初始化导⼊框
$("#importForm").customImport({
action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel",
xmlName:'portFileName', //导⼊模版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⾃定义组件(导⼊组件)，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论