jquery Custom Component (Import component) _jquery

1. Component JS

(function ($) {//Custom remove white space on both sides of the string string.prototype.trim=function () {return this.replace (/^\s*) | ( 
\s*$)/g, ""); ///Custom Import Component $.fn.customimport = function (methodoroptions,value) {if (typeof methodoroptions = = "string") {//When method exists, call method R 
Eturn $.fn.customimport.methods[methodoroptions] (this, value); } var optionsobj = methodoroptions| | {}; 
When a method is not present, the property definition is passed. Return This.each (function () {$.data (this, "Customimport", {options: $.extend ({}, $.fn.customimport.defaults, Optionso 
BJ)}); 
Initcustomimport (this); 
}); 
//Define component default Properties $.fn.customimport.defaults={width:400, height:90, enctype: ' Multipart/form-data ', Action: ',//import method call Method: ' Post ',//Request FileType: '. Xls,.xlsx ',//file type, default to XLS format XMLName: ',//import template XML parameter name xmlvalue: ',//import template XML Parameters Value FilePath: ',//file path parameter name Uploadtemplateur 
L: ',//download template path Onsubmit:function (param) {}}//define component Method $.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) {//Get the current file box var fileInput = $ (obj). Find (". Real-file"); 
Clone an identical element after the current file box, and set the value to "", ie default clone value is empty, Google Firefox will be the value of cloning Fileinput.after (Fileinput.clone ()). Val ("")); 
Deletes the current file box Fileinput.remove (); 
Bind the onchange event $ (obj) to the new file box. Find (". Real-file"). On (' Change ', function () {changefile (obj); 
}); 
Empty the file display path $ (obj). Find (". File-pathname"). Val (""); 
Cancels the checksum prompt $ (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) {//initialization component $ (obj). Append (' <div class= choose-file ' ><div class= ' choose-title ' > browse directory </div> </div>]//Add File Selection button $ (obj). Find (". Choose-file"). Append (' <input class= ' real-file ' type= ' file '/> '); Real file Control $ (obj). Find (". Choose-file"). Append (' <div class= ' file-path ' ><input class= ' file-pathname Validatebox "type=" text "readonly=" readonly "data-options=" Required:true,missingmessage: "Please select Import file", Validtype: " Importformatvalidate ""/></div>);//File Path display box $ (obj). Append (' <div class= "import-template" ><a class = "Upload-template" href= "javascrip:void (0);" > Import Template Download </a></div> ');/template download button $ (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" > "); The binding filename changes the event $ (obj). Find (". Real-file"). On (' Change ', function (){changefile (obj); 
}); }//Binding component properties and events $ (obj). Find (". Real-file"). attr ("name", Options.filepath);//Binding Name property $ (obj) for the text box. Find (". Real-file"). 
attr ("Accept", options.filetype);//File Receive type $ (obj). Find (". Real-file"). Width (options.width*0.3-6); $ (obj). Find (". Import-xml. Xml-config"). attr ("name", options.xmlname);//import XML parameter name $ (obj). Find (". Import-xml. Xml-config "). Val (options.xmlvalue);//The imported XML parameter value//binding sets the URL $ (obj) for the load template. Find (". Upload-template "). attr (" href ", 
Options.uploadtemplateurl); 
///Initialize the import box var flag = false; 
if ($ (". Custom-import"). Length>0) {$ (". Custom-import"). Customimport (); 
Flag = true; 
//Select Trigger function Changefile (obj) {var FilePath = $ (obj) when file changes. 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: {//Verify that the import format is an Excel validator:function (value,param) {var file 
Typeindex = Value.lastindexof ("."); 
var fileType = value.substring (Filetypeindex); 
if (filetype!= ". xls" &&filetype!= ". xlsx") {return false; 
return true; Message: ' Please select. xls or. xlsx file! 
' 
} 
}); })

2. Component 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. Component references

HTML section

<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 part

$CommonUI. Getdialog ("#importExcelWin"). Dialog ({ 
title: ' Import Dictionary ', 
width:430, 
height:185, 
closed: True, 
modal:true, 
buttons:[{ 
text: ' Save ', 
handler:function () { 
importdata (); 
} 
},{ 
text: ' Cancel ', 
handler:function () { 
$CommonUI. Getdialog ("#importExcelWin"). Dialog ("Close"); 
} 
] 
}) 
Initializes the Import box 
$ ("#importForm"). Customimport ({ 
action: $WEB _root_path+ "/excel/excelctrl.htm?) Blhmi=importexcel ", 
xmlname: ' Dto.exportfilename ',//import template XML parameter name 
xmlvalue: ' Systemdictionaryimport ',// Import template XML parameter value 
filePath: ' Dto.uploadfile ',//file Path parameter name 
uploadtemplateurl: $WEB _root_path+ '/exportexcel/ Exportexcelctrl!uploadexceltemplate.htm?filename=systemdictionary ' 
});

4. Component effect

Precautions:

1. The component uses Easyui-validatebox, and the consumer also needs to refer to the component or the checksum fails.

2. This component is a component that combines back-end customization to reduce the error caused by front-end HTML duplicate configuration. What is worth learning is only the method defined by the component, not the component itself.

3. In order to meet the IE components have 2 special processing, the first: is to use a file box to cover the selection of the directory to ensure that IE security check only to identify the mouse directly click the text box. Second: IE can not directly clear the contents of the File box, where the clone deleted the way to empty the contents of the File box.

The above is a small set to introduce the jquery custom components (import components), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!