搜索
首页php教程PHP开发jQuery自定义组件(导入组件)

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

Dec 07, 2016 pm 01:42 PM
jquery

组件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(&#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;); //真实文件控件 
$(obj).find(".choose-file").append(&#39;<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"请选择导入文件",validType:"importFormatValidate""/></div>&#39;);//文件路径显示框 
$(obj).append(&#39;<div class="import-template"><a class="upload-template" href="javascrip:void(0);">导入模版下载</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);//导入的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(&#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 : {// 验证导入格式是否是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;请选择.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 : &#39;导入字典&#39;, 
width :430, 
height :185, 
closed : true, 
modal : true, 
buttons:[{ 
text:&#39;保存&#39;, 
handler:function(){ 
importData(); 
} 
},{ 
text:&#39;取消&#39;, 
handler:function(){ 
$CommonUI.getDialog("#importExcelWin").dialog("close"); 
} 
} 
] 
}) 
//初始化导入框 
$("#importForm").customImport({ 
action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel", 
xmlName:&#39;dto.exportFileName&#39;, //导入模版XML参数名 
xmlValue:&#39;systemDictionaryImport&#39;, //导入模版XML参数值 
filePath:&#39;dto.uploadFile&#39;, //文件路径参数名 
uploadTemplateUrl:$WEB_ROOT_PATH+&#39;/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary&#39;
});

组件效果

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

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

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

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


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能