bootstrap3 文件上传插件fileinput中文说明文档
bootstrap3 文件上传插件fileinput中文说明文档
[摘要：file input插件功效如斯强盛，款式特别很是雅观，而且支撑上传文件预览，ajax同步或同步上传，拖曳文件上传等炫酷的功效，完整出有来由没有往应用，然则海内很少能找到本插件完全的使]
file input插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，完全没有理由不去使用，但是国内很少能找到本插件完整的使用方法，于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet端的接收代码，未完待续。
一个强化的HTML5 文件输入插件，适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览，并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap
CSS3样式。通过对很多种文件提供预览支持，比如图片，文本，html，视频，声音，flash和对象，它大大增强了文件输入的功能。另外，它还包含基于AJAX的上传，拖拽，移除文件的功能，可视化的上传进度条，和可选择的添加或删除文件预览功能。
提示：本插件致力于使用大量在添加jquery下的css3和html5功能，强调：你可能会发现css3或html5或它两个的混合在许多实现中被需要。
本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化，为开发者提供了一个成熟并且完整的文件管理工具和解决方案。
伴随着4.0.0版本的发布，本插件现在支持被多种现代化浏览器支持的，基于Ajax，利用html5
Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能，联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉，移除支持。它也已经为Ajax上传提供原生支持。万一，浏览器不支持FormData或XHR2，本插件会降级成一个普通表单。
提示：本插件的最新版本：v4.2.7已经放出
文件输入功能：
<span style="color:#.&&&& 本插件将会把一个简单的HTML file input转换称一个先进的文件选取控制器。对于没有jquery和javascript支持的浏览器会退回一个普通的HTML
file input。
<span style="color:#.&&&& File input由一下三个部分以及选项和范例组成，来控制显示
文件标题部分：来显示一个简短的被选文件的信息
文件活动按钮部分：用于浏览，移除，上传文件
文件预览部分：用来在客户端显示这个被选择的文件（支持图片，文本，flash和视频类文件）。其他类型的文件会被按照普通缩略图显示。
<span style="color:#.&&&& 本插件自动的转换一个具有 type = file的input成为一个先进的文件选择器
input如果你设置class = file。所有的input选项会被以html5
data 属性传递。
<span style="color:#.&&&& 能顾选择和预览多重文件，利用html5 file reader api来读取并且预览文件。万一许多文件被选择
，将会显示文件加载进度在预览区域。
<span style="color:#.&&&& 提供定义好的模板和css样式，并且可以按照你的需求来改变；
<span style="color:#.&&&& 1.5.0以上版本你可以配置本插件来显示一个图片、文件的初始化预览，并且伴随着初始标题（对记录上传情景更加有用）.参考initialPreview和initialCaption属性选项部分来配置本功能；
<span style="color:#.&&&& 可以选择显示或隐藏底下的任意一个功能：
<span style="color:#.&&&& 定制目标容器元素的地点来展示整个插件，标题容器，标题文本，预览容器，预览图片，和预览地位。
<span style="color:#.&&&& 对于文本预览，自动收缩文本到预览图的宽度，并且展示一个收缩的指示器链接来悬浮展示完整的文本，你可以定制这个收缩指示器。
<span style="color:#.& 定制被选择的预览，进度和备选文件的提示信息
<span style="color:#.& 上传动作默认是一个表单提交，支持基于自定义Ajax上传上传到远程服务器动作参数。
<span style="color:#.& 为更进步的开发提供Jquery事件触发器。现在已经支持Filereset，fileclear,filecleared,
fileloaded, and fileerror.事件
<span style="color:#.& 支持Disabled和只读文件
<span style="color:#.& 超出容器的长文件名可以动态的自动改变文件标题大小。
<span style="color:#.& 在图像完整的加载到预览区域之后，建立了新的fileimageuploaded事件
<span style="color:#.& 当图片大小查处了预览区域的面积时自动改变预览图像的大小。
<span style="color:#.& 为满足开发者的需求配置file-input提供完整的模板和扩展性。
<span style="color:#.& 智能预览支持多种文件类型，内置的文件支持种类是：图像，文本，html，视频，音频，flash，对象，压缩文件和其他。
<span style="color:#.&&&& allowedPreviewTypes：你能够配置所有的被预览文件类型，默认是['image',
'html', 'text', 'video', 'audio', 'flash','object']。因此所有的文件类型默认被以object来预览。比如如果只预览image&和video，你把这个属性赋&#20540;：['image',
'video'].。如果你想对所有文件类型去掉预览功能并且展示previewIcon而不是一个缩略图，设置这个属性为null，空，或者false。
<span style="color:#.& allowedPreviewMimeTypes：在添加了allowedPreviewTypes属性后，你也能控制被预览的所有mime类型。这个属性默认是null，意味着支持所有的mime类型。提示：在2.5.0版本释放时候，你能通过设置allowedFileTypes&和&allowedFileExtensions控制被允许上传的文件类型。
<span style="color:#.& layoutTemplates：可你让你用一个属性配置所有的布局模板设置。能够被配置的布局对象为：main1,&main2,&preview,&caption,和modal.
<span style="color:#.& previewTemplates：对于每个预览类型，所有的预览模板&(generic,&image,&text,&html,&video,&audio,flash,&object,
and&other).已经被融合进一个属性，而不是分开的，比如为图像或者文本单独一个模板。对所有预览文件类型有默认的建立好的模板，利用直接的标记，一般的模板被仅用来展示initialPreview属性中规定内容。
<span style="color:#.& previewSettings：允许你对每个预览图片配置宽度和高度，本插件有默认的宽度和高度，已经被提前定义好，比如图像，文本，html。。。
<span style="color:#.& fileTypeSettings：能够让你利用一个回调函数配置并且识别每个预览的文件类型，本插件有默认的回调函数，已经被提前定义好去识别每种类型，比如图片，文本。。。
<span style="color:#.& 增强了模板中的替代标签，利用本版本，它将会自动的对每个标签检查多重事件来替换一个模板字符串。
<span style="color:#.& 在任意的事件中，操作事件并且轻松的添加你自己的习惯验证消息，利用返回&#20540;来终&#20540;上传。
<span style="color:#.& 支持各种语言翻译和本地化操作。
提示：flash预览需要安装Shockwave flash插件并且被客户端浏览器支持。本flash预览目前这能被webkit浏览器成功的支持。视频或者音频&#26684;式被所有支持html5音视频标签的现代浏览器所支持。切记html5只能支持有限周磊的视频和音频标签，比如mp4,
webm, ogg, mp3, wav，并且视频文件的大小推荐越小越好（可以通过maxFileSize属性来控制）确保大小不会影响到预览的性能，你可以从examples目录复制一些文件（在这个插件里），来测试一些falsh或视频文件的案例。
文件上传功能
在4.0.0版本下，本插件也包含了内置的Ajax上传支持，还有可选的添加或删除文件功能。Ajax上传功能被建立在html5 formdata 和xmlhttprequest 2级之上。多数现代浏览器都支持这个标砖，但是万一浏览器不支持，本插件会自动的降级称普通表单。
1.&&&&&添加利用html5 formdata基于ajax上传功能，如果浏览器不支持会降级成普通表单文件提交。
2.&&&&&为了使用ajax上传，必须在js中设置uploadUrl属性。
3.&&&&&增强了插件可以让文件被添加，粘附，移除（基于FEEDBACK&）。因此用户可以粘附文件到预览区域
4.&&&&&新的拖拽区域可以拖拉文件到预览区域并且被粘附上。
5.&&&&&删除或者上传文件一个一个的或者几个文件一起。
6.&&&&&如果showPreview属性被设置成false，或者uploadUrl不支持插件，会自动降级成普通表单&#26684;式。
7.&&&&&为等待上传中的文件设置了可配置的指示器，比如文件成功上传还有文件上传失败。
8.&&&&&基于ajax的上传可以添加额外的表单。
9.&&&&&上传进度条和每个文件独立的略缩图上传指示
10.&&能共取消甚至终止正在进行的ajax上传。
11.&&增进初始预览内容，你能够设置初始预览动作（为初始预览删除提供预建支持）。其他的自定动作按钮也能够被设置初始预览图
12.&&尽管本插件上层功能最优的的利用了html5和jquery功能，但仍确保插件大小依靠并且最适性能。
13.&&只要ajax上传结束，自动的根据来自服务器的内容尽快刷新预览内容。
本插件能被自动或者手动安装利用这些选项中的一个
BowerPackage Manager
经由Bower Package Manager安装非常容易
$ bower install bootstrap-fileinput
ComposerPackage Manager
你可以安装bootstrap file-input 经由composer&package
manager.或者执行
$ php composer.phar requirekartik-v/bootstrap-fileinput &dev-master&
&kartik-v/bootstrap-fileinput&:&dev-master&
到你的composer.json文件
你也能轻松的手动安装本插件到你的项目离去，仅仅下载这个源文件zip或者tar ball并且抽取插件内容（css和js目录）到你的项目中去。
正如在安装章节展示的那英，翻译现在已经在4.1.8版本之后启用。你能够加载一个本地文件/fileinput_locale_&lang&.js在核心文件fileinput.min.js之后。&lang&就是语言的代码，比如de,fr.如果本地化文件不存在，你可以为新语言提交一个翻译。
1.Bootstrap 3.x.但是，本插件能适用自定义的任何css框架，利用模板。
2.最新版本的jquery
3.最新版的浏览器，支持html5fileinput，还有filereader api 包含css3和jquery。
4.为了文件预览能正常工作，浏览器必须支持html5filereaderApi 否则本插件将会自动降级成一个普通file input。对ie浏览器，开发者必须适用ie10一张版本，ie9及以下版本将会降级成普通fileinput，而且也不会支持多文件选择或者html5 filereader API。
5. 4.0版本之后，ajax上传被支持，ajax上传需要浏览器支持html5formdata 和XHR2 (XMLHttpRequest 2)，多数浏览器支持这两个。如果浏览器不支持，本插件会自动降级成普通表单并且不支持ajax上传。
使用方法：
很大程度上来说，本插件能够被配置在下列两个不同的模式来上传注意：不要试着联合下面的两种模式来收取文件，因为你会收到不连续或者错误的结果。
模式一表单提交：
在这种模式中，你不要设置uploadUrl属性。本插件会利用原生的 file input来储存文件并且它能够被独处在一个普通表单提交之后(你必须把这个input放在一个form里面)。这种模式对于单个文件上传非常有效，或者简单情景下的多文件上传。配置是直接的正如你能读出所有的被post从一个原生的表单提交的数据。但是，提示你这个原生file
input是制度的并且不能被外部的代码修改或者更新。尤其是对于多文件input选择，一个新文件不能添加到一个已经存在的文件选择列表里面。如果你常识去选择文件从一个已经选好的file input，它将会被重写并且清除之前的选项，简单的来说，在此模式下，在上传之前你不能有选择的移除或者删除已经被添加文件。
模式二 ajax提交：在这个模式下，你必须用一个有效的ajax处理服务器url设置uploadUrl属性。如果uploadUrl被设置好了，然后本插件会自动认为这是个ajax上传情景。本插件为ajax提交提供了许多先进的功能，而且这些功能在表单提交下是没有用的。功能像拖拽文件，在预览区域添加、移除文件，而且进度条功能只能在本模式下使用。
你的浏览器必须支持HTML5FormData/XHR2，而且你的服务器代码处理ajax请求必须返回一个有效的json回复。
提示，在一个先进的模式下，本插件允许你处理ajax上传即使没有文件被选择，但是一个有效的uploadExtraData会被发送伴随着ajax响应。这些事件filebatchpreupload,&filebatchuploadsuccess,&filebatchuploadcomplete,或filebatchuploaderror在这种条件下会被触发。它将不会有任何数据从被选择文件里发出，但是会允许额外的数据被发送。
如果你添加一个cssclass文件在这个input上，本插件会自动的转换[inputtype=&file&]成一个fileinput
control，但是如果你独立的初始化这个插件经由js，然后不要再添加css样式在这个input上（正如它将会调职重复的初始化并且这个js代码可能会被跳过）
1.&& 第一步：加载下面这些设置到header里去
2.&& href=&/bootstrap/3.3.4/css/bootstrap.min.css&rel=&stylesheet&
3.&& href=&path/to/css/fileinput.min.css&media=&all&rel=&stylesheet&type=&text/css&
4.&& src=&///ajax/libs/jquery/2.0.0/jquery.min.js&
5.&& &!--canvas-to-blob.min.js is only needed if you wish to resize images beforeupload.
6.&& &&&&&This must be loaded beforefileinput.min.js --&
7.&& src=&path/to/js/plugins/canvas-to-blob.min.js&type=&text/javascript&
8.&& src=&path/to/js/fileinput.min.js&type=&text/javascript&
9.&& &!--bootstrap.js below is only needed if you wish to use the feature of viewingdetails
10.& &&&&&of text file preview via modal dialog--&
11.& src=&/bootstrap/3.3.4/js/bootstrap.min.js&type=&text/javascript&
12.& &!--optionally if you need translation for your language then include
13.& &&&&locale file as mentioned below --&
14.& &scriptsrc=&path/to/js/fileinput_locale_.js&&
如果你注意到了，你需要额外的加载jquery.min.js和bootstrap.min.css，为了fileinput.min.css和fileinput.min.js。本地文件fileinput_locale_&lang&.js可以有选择的添加如果你需要翻译成你的语言的话。
提示：canvas-to-blob.min.js文件是JavaScript-Canvas-to-Blob
plugin by blueimp 的源文件，它需要在fileinput.min.js之前被加载，如果你需要使用本插件的图像重新设置大小功能，为了轻松的接入， JavaScript-Canvas-to-Blob这个插件源码已经被包含在这个项目的js/plugins文件夹里。
第二步 a:在你的页面上初始化这个插件，如下
1.&& // initializewith defaults默认初始化
3.&& $(&#input-id&).fileinput();
5.&& // with pluginoptions带插件选项的初始化
6.&& $(&#input-id&).fileinput({'showUpload':false,'previewFileType':'any'});
#input-id是你页面上的input的id属性，比如（type=file，这个会被本插件自动的隐藏）。
第二步 b：可选择的，你能够直接的给任何一个input设置插件的选项，通过html5
data属性在你的input标签里
1.&& id=&input-id&type=&file&class=&file&data-preview-file-type=&text&
你需要设置服务器方法来解析并且返回正确的响应经由ajax，你能设置同步上传或者异步上传模式正如下面所描述的。
异步上传：
这是默认的模式，通过把uploadAsync属性设置为true。当上传多个文件的时候，这个异步模式允许对每个文件触发平行的服务器请求。你能够控制文件上传数量的最大数在同事上传通过设定maxFileCount属性，在异步模式下，在预览框里的每个略缩图的进度条是有效的而且更新的。
收到数据（服务器端）
你的服务器方法应该如uploadUrl里设置的一样
从本插件收到下面的数据
1、&文件数据：这个被发向服务器的数据在一个非常普通的表单file input&#26684;式，比如在php中，你可以读取这个数据如：$_FILES['input-name']，input-name是你input标签的name属性。如果你不给你的input标签设置一个name属性，那么它默认是file_data。提示：多个文件上传时需要你设置input标签的multiple属性为true，这样在php里你可以接受文件数据如$_FILES['file_data']。
2、&额外数据：本插件能够想你的服务器发送额外的数据。这个能够通过设置uploadExtraData来完成。如一个键&#20540;对的关联数组对象一样。所以如果你有设置uploadExtraData={id:'kv-1'}，在php中你可以读取这个数据如$_POST['id']。
提示：在异步模式下，你一定会在你的服务器经由ajax上传收到单个文件。基本的，本插件会为每个被选择上传的文件触发平行ajax请求，你需要根据
这个写你的服务器上传逻辑，这样才能读取并且上传一个文件。相&#20284;的，在下面的发送数据章节，你必须仅为单个文件接收返回一个initialPreview来反射数据
发送数据（服务器端）
你的服务器地址应该如uploadUrl属性里设置的一样，而且必须发回一个json对象数据，在这个条件下，你能够发送这4条信息，标明在异步模式下，你将会受到一个文件记录来自服务器，所以根据这个调整你的代码
·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。举例来说，这个来自服务器的响应该像这样发送{error:
'You are not allowed to upload such a file.'}。提示：这个插件会自动的生效并且显示ajax异常错误。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件。你应该发送在这个数组中发送一行，因为你应该收到一个文件在异步上传模式。如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像&initialPreview
option setting 。举个例子：
1.&& initialPreview:[
2.&& &&&&'&img src='/images/desert.jpg' class='file-preview-image'
alt="' title="'&',
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。你应该发送一行在这个数组中，因为你应该会受到一个文件在异步上传中，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像&initialPreviewConfig
option setting ，举个例子
1.&& initialPreviewConfig:[
2.&& &&&&{
3.&& &&&&&&&&caption:'desert.jpg',
4.&& &&&&&&&&width:'120px',
5.&& &&&&&&&&url:'http://localhost/avatar/delete',// server deleteaction
6.&& &&&&&&&&key:100,
7.&& &&&&&&&&extra: {id:100}
8.&& &&&&}
·initialPreviewThumbTags：数组，一个对象的数组，与替换标签相对应，这个初始化预览缩略图设置经由initialPreview将会读取这个配置来替换标签
1.&& // changethumbnail footer template
2.&& // set initialpreview template tags
3.&& initialPreviewThumbTags:[
4.&& &&&&{
5.&& &&&&&&&&'{CUSTOM_TAG_NEW}':'&',
6.&& &&&&&&&&'{CUSTOM_TAG_INIT}':'spanclass=\'custom-css\'&CUSTOM MARKUP/span&'
7.&& &&&&}
9.&&·append：布尔&#20540;，如果你在初始化的时候已经设置了一个initialPreview&，不滚你是否向initialPreview添加这个内容。如果没有设置这个，默认&#20540;是true，如果设置成false，本插件会复写initialPreview&的内容。
重要：你必须从你的服务器发送一个有效的的json响应，否则这个上传进度会失败，即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}
为了捕获和显示一个有效的错误，你的json相应数据必须包含error键，而且他的value必须是错误html标记来显示，这个应该像正如上面提及的那样来设置
利用fileuploaded事件，你能处理额外的json发来的数据来实现进一步的功能。
在这个模式下，uploadAsync属性应该被设置成false，这将会触发一组给服务器的上传请求，并且从客户端以一个数组的方式发送文件到服务器。甚至在这个模式下，你能够通过设置maxFileCount属性来控制文件一次能够被允许上传的最大数量。但是，在同步模式，进度条仅能按照一整个运行，每一个在预览区域的缩略图的进度条不会确切的有效和更新。但是，本插件提供给你了一个方法来对每个文件进行识别上传错误。
收到数据（服务器端）
你的服务器必须与uploadUrl里设置的地址一样，从本插件收到下面的数据：
1.&&文件数据：这个数据很像表单file input发送给服务器的。比如在php中，你可以读取这个数据以$_FILES['input-name']，其中input-name是你的input标签里面的name属性。在异步模式中也有这个。如果你不给你的input标签设置一个name属性，则name默认是file_data.你必须以数组的形式设置name属性，正如在本网站tip里提到的那样，而且要设置multiple属性为true。如果你没有以数组的&#26684;式设置你的name属性，你会在你的服务器上只收到一个文件。（正常情况下）在php里你会收到文件如$_FILES['input-name']，而且这将是一个文件对象数组。
2.&&&&&额外数据，本插件能够想你的服务器发送额外数据，通过设置uploadExtraData属性为一个键&#20540;对关联数组可以实现。所以如果你设置uploadExtraData={id:'kv-1'}，在php中你能读取这个数据如$_POST['id']；
发送数据（从服务器）
在异步模式下，服务器必须以json&#26684;式发送数据回来，你应该发送这5条信息：
·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。
`errorkeys:字符串，这些键（为收到的文件提供0基索引）为出错的文件。基于这个数据，本插件会自动发送缩略图和每个独立的预览文件到出错文件集。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件，如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像&initialPreview
option setting 。举个例子：
1.&& initialPreview: [
2.&& &&&&'&img src='/images/desert.jpg' class='file-preview-image'
alt="' title="'&',
3.&& &&&&'&img src='/images/jellyfish.jpg' class='file-preview-image'
alt="' title="'&',
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像&initialPreviewConfig
option setting ，举个例子
1.&& initialPreviewConfig:[
2.&& &&&&{
3.&& &&&&&&&&caption:'desert.jpg',
4.&& &&&&&&&&width:'120px',
5.&& &&&&&&&&url:'http://localhost/avatar/delete',// server deleteaction
6.&& &&&&&&&&key:<span style="color:green"
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊本章属于该系列的高级部分，将介绍表单中一些列的配置
1、config列的配置：
主要用于控制布局 ：config:{autoLayout:true|'1,2,2,4'}
true:根据配置项最里层的数量来自动使用不同的栅格，
'1,2,2,4':使用指定的栅格来布局，如果配置的列数不足的情况将使用第一项(n,n 为一项)
2、hides的配置项
hides:[{id:'xxx',value:''}]
此项是可选的，主要用于编辑时存放一些不可见的列(如主键ID的值)
3、eles 表单元素的配置(重点)
eles的配置支持2中情况，一种是分组的情况，另外一种是非分组的情况，
eles:[[],[]]　　//非分组的情况，使用交叉数组存放配置列，我暂且把里层的数组称为组配置项，把组里面的配置项称为元素配置项
eles:{'groupName':[]}　　//分组的情况，使用json对象来存放
组配置项里层就是单个的元素配置项了，[{ele:{id:'',name:''}}]
细心的博友发现为什么要在元素配置项里面多此一举加一个ele，然后再ele里面存放元素的属性，而不是直接放在元素配置项里面呢
当然是考虑到以后的扩展性，其实元素配置项的完整写法是:{label:{},ele:{}}
A、label：即表达元素前面的提示字符，label里面的配置项：{target:'#contain.id',className:'col-sm-2',text:'#contain.title'}
target：for的元素，默认为ele的id， className：改label上应用的class， text:显示在label中的文字，默认为ele中的title,如果ele中配置了required：true 还将会在label里层生成一个&span& 用来做校验的提示
B、ele:即真正表达元素的配置
type:'',id:'',name:'',value:'',className:'col-sm-4',
readonly:false,disable:false,extendAttr:{key:value},required:false,
render:'',
prev:{type:'button',iconClassName:'',ele{render:''}},
next:{iconClassName:'',ele{render:''}},
type:目前支持 text(默认)、select、radio、checkbox、textarea、datetime、search
　　note:当为select、radio、checkbox的时候，需要为该项设置数据源，items:[{text:'',value:'',select:'可选'}]
　　select:withNull:true,将会在数据源的基础上加多一些 --请选择-- 空项
　　checkbox:items里面的配置项可以有id、和name及select
render:''，html标签，优先级最高，当为该项设置了其他配置无效，如：render:'&input type="file" name="" id="" /&'&
　　另外针对pre和next也同样适用,pre：{ele:{render:''}}
pre：用于为元素配置特性选项，
如{ele:{pre:{text:'&input type="radio"&'},type:'text',name:'DisplayName',title:'显示名称:'}} 该配置项为元素前面配置了一个单选框
可以支持前后同时配置，详情请参照：
className：改表单元素适用的class,　　className:'col-sm-4'
readonly:false,disable:false　　用于设置元素的状态disable、readonly
value：设置元素的默认值
extendAttr:{key:value} 键值对形式，仅支持html5的data-会在元素上生成data-的前缀
　　demo:　　extendAttr:{select:true}　　会在元素上生成一个data-select=true 的扩展属性
组表单配置：'组名':[]
demo：　　'个人信息':[{},{}]
相当于多了一层，其他没什么区别，具体请参照：
本系列首页：
阅读(...) 评论()}