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

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自定义组件(导入组件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • eclipse导入jquery包后报错的解决方法

    eclipse导入jquery包后报错,处理步骤如下: 1.打开项目.project文件,去掉如下内容: 复制代码 代码如下: <buildCommand> <name>org.eclipse.wst.jsdt.core.javascriptValidator</name> <arguments> </arguments> </buildCommand> 2.删除原来的js,重启重新复制一份,因为原来的文件已被eclipse项目标记为

  • 导入extjs、jquery 文件时$使用冲突问题解决方法

    1.在最近做项目时,在html页面中,没有导入jquery文件时,可以正常保存,而导入jquery文件后,则不能不存了 经过调试后,发现导入的jquery文件和现有的extjs文件冲突了(原因是$符号的冲突) jQuery与ExtJS之间发生冲突,但是在非IE内核下是可以的,是由于$符号的冲突,解决办法就是把jQuery的$符号用其他来代替,代码如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js

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

    1.组件js (function($){ //自定义去除字符串两边空白 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof methodOroptions == "string"){//存在方法时,调用方法 retur

  • jquery自定义组件实例详解

    缘起 我们知道在JQ中,是允许我们自定义一些插件与扩展的.定义的方式也比较简单,采用$.extend就行,那么下面就来看看在JQ中自定义一个插件的实例 JQuery如何封装一个组件 效果 我们先来看封装好的组件的效果图,这是一个根据组织机构选择人员的组件. 实现原理 我们先定义一个DbwSelectUser函数 DbwSelectUser : function (options) { var opt = $.extend({ //是否多选:true(多选),false(单选) multi:tru

  • jQuery Chart图表制作组件Highcharts用法详解

    本文实例讲述了jQuery Chart图表制作组件Highcharts用法.分享给大家供大家参考,具体如下: Highcharts是一个制作图表的纯Javascript类库,主要特性如下: ① 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: ② 对个人用户完全免费: ③ 纯JS,无BS: ④ 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: ⑤ 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highchar

  • jQuery EasyUI Draggable拖动组件

    上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调用

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • Android自定义封装banner组件

    自定义封装 banner 组件,供大家参考,具体内容如下 1. 效果图预览  2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装. 可设置 项目中图片,网络图片, View: 支持循环自动播放,手势滑动切换,item点击事件,可设置 点点的样式宽高.颜色.大小.位置 : 可设置蒙层:可设置 是否允许滑动:可设置 是否允许循环. 3.基本实现 1). 自定义属性 <declare-styleable name="BannerLayoutStyle"&g

  • Angular 2使用路由自定义弹出组件toast操作示例

    本文实例讲述了Angular 2使用路由自定义弹出组件toast操作.分享给大家供大家参考,具体如下: 原理: 使用Angular2的命名路由插座,一个用来显示app正常的使用,一个用来显示弹出框, <router-outlet name='apps'></router-outlet> <router-outlet name='popup'></router-outlet> 浏览器的导航栏中则这样显示 http://127.0.0.1:4200/(popup

  • Angular使用cli生成自定义文件、组件的方法

    不得不说,和传统的复制黏贴来创建组件的方法相比,使用angular-cli的脚手架功能来创建模块.组件显得非常高效,不仅仅有了创建了文件,还包含了一些必须的代码,同时也将组件导入了最近的模块,一些重复性工作就使用cli可以节省掉.angular提供了丰富的文件类型,但是总归是有些我们自己的项目需要,我们需要创建自定义后缀的组件,这时候就不得不舍弃cli了,那么能不能使用自定义的方式来达到脚手架创建呢? angular 脚手架创建的方式 我们首先来看看angular-cli提供的一些命令是怎么创建

  • vue如何自定义封装API组件

    目录 自定义封装API组件 1.创建vue组件 2.创建Alter.js生成组件 3.导入Vue 如何封装使用api形式调用的vue组件 子组件 父组件 自定义封装API组件 1.创建vue组件 <template>     <div >         <div class="alert">         <div class="alert-main" v-for="item in notices"

  • 自定义vue全局组件use使用、vuex的使用详解

    自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理 而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出

随机推荐