搜索
Easyui笔记Form组件:1.Form1.1创建表单创建一个简单的HTML表单：formid=ffmethod=postdivlabelfor=nameName:/labelinputclass=easyui-validateboxtype=textname=namedata-options=required:true//divdivlabelfor=emailEmail:/labelinputclass=easyui-validateboxtype=textname=emaildata-options=validType:'email'//div.../form让表单一ajax方式提交：$('#ff').form({url:...,onSubmit:function(){//dosomecheck//returnfalsetopreventsubmit;},success:function(data){alert(data)}});//submittheform$('#ff').submit();提交动作：//call'submit'methodofformplugintosubmittheform$('#ff').form('submit',{url:...,onSubmit:function(){//dosomecheck//returnfalsetopreventsubmit;},success:function(data){alert(data)}});提交额外的参数：$('#ff').form('submit',{url:...,onSubmit:function(param){param.p1='value1';param.p2='value2';}});1.2处理表单的提交提交一个ajax表单很简单。提交完成时用户可以获得响应数据。注意:原始数据是从服务器响应的数据，需要解析之后才能得到正确的数据。例如，响应数据为JSON：{success:true,message:Messagesentsuccessfully.}用“success”回调函数处理JSON字符串：$('#ff').form('submit',{success:function(data){//将JSON字符串更改为javascript对象vardata=eval('('+data+')');if(data.success){alert(data.message)}}});1.3属性NameTypeDescriptionDefaulturlstring表单所要提交的地址null1.4事件NameParametersDescriptiononSubmitparam触发前提交，返回false来防止提交动作successdata触发提交表单时间onBeforeLoadparam触发之前请求加载数据，返回false取消该操作onLoadSuccessdata触发时表单数据提交onLoadErrornone触发时出现一些错误加载表单数据1.5方法NameParameterDescriptionsubmitoptionsDothesubmitaction,theoptionsparameterisanobjectwhichcontainsfollowingproperties:url:theactionURLonSubmit:callbackfunctionbeforesubmitsuccess:callbackfunctionaftersubmitsuccessfulyTheexamplebelowshowshowtosubmitavalidformandavoidduplicatesubmitingtheform.$.messager.progress();//displaytheprogressbar$('#ff').form('submit',{url:...,onSubmit:function(){varisValid=$(this).form('validate');if(!isValid){$.messager.progress('close');//hideprogressbarwhiletheformisinvalid}returnisValid;//returnfalsewillstoptheformsubmission},success:function(){$.messager.progress('close');//hideprogressbarwhilesubmitsuccessfully}});loaddataLoadrecordstofilltheform.Thedataparametercanbeastringoraobjecttype,whenstringactsasaremoteURL,otherwiseactsasalocalrecord.Codeexample:$('#ff').form('load','get_data.php');//loadfromURL$('#ff').form('load',{name:'name2',email:'mymail@gmail.com',subject:'subject2',message:'message2',language:5});clearnoneCleartheformdata.resetnoneResettheformdata.Thismethodisavailablesinceversion1.3.2.validatenoneDotheformfieldsvalidation,returntruewhenallfieldsisvalid.Themethodisusedwiththevalidateboxplugin.enableValidationnoneEnablevalidation.Thismethodisavailablesinceversion1.3.4.disableValidationnoneDisablevalidation.Thismethodisavailablesinceversion1.3.4.2.calendar日历显示一个月的日历,允许用户选择日期和移动到下一个或前一个月。默认情况下,一周的第一天是星期天。它可以通过设置“firstDay”属性的值来改变。2.1创建日历1.1.1用标记创建日历，例：divid=ccclass=easyui-calendarstyle=width:180px;height:180px;/div1.1.2用javascript创建日历,例:先先创建一个日历的divdivid=zzstyle=width:180px;height:180px;/div再写javascript代码$('#zz').calendar({current:newDate()});2.2属性名称类型描述默认值widthnumber设置日立的宽度180heightnumber设置日立的高度180fitboolean设置日历是否适合它的父级元素falseborderboolean设置是否显示边框truefirstDaynumber设置一周的第一天。星期天是0,周一是10weeksarray设置周的列表显示['S','M','T','W','T','F','S']monthsarray设置月的列表显示['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']yearnumber设置日历的年,可以指定显示哪一年currentyear(fourdigits)monthnumber设置月份currentmonth,startwith1currentDate当前日期currentdate1.2.1width/height设置日历的宽度/高度(默认值为180),例:divid=zzclass=easyui-calendarstyle=width:180px;height:180px;/div1.2.2fit设置日历是否适合父级元素(默认为false),例:divid=zzclass=easyui-calendardata-options=fit:truestyle=width:180px;height:180px;/div1.2.3border设置是否显示边框(默认为true),例:divid=zzclass=easyui-calendardata-options=border:false/div1.2.4firstDay设置一周的第一天。星期天是0,周一是1(默认为0),例:divid=zzclass=easyui-calendardata-options=firstDay:1/div1.2.5weeks设置周的列表显示(默认为'S','M','T','W','T','F','S'),例:divid=zzclass=easyui-calendardata-options=weeks:['日','一','二','三','四','五','六']/div1.2.6months设置月的列表显示(默认为'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec),例;divid=zzclass=easyui-calendardata-options=months:['一','二','三','四'...]/div1.2.7year/month/current设置日历的年/月/日(默认为当前时间),例：divclass=easyui-calendardata-options=year:2012,month:6/div2.3事件当用户选择一个日期触发事件。名称参数列表描述onSelectdate当用户选择一个日期：代码实例:$('#cc').calendar({onSelect:function(date){alert(date.getFullYear()+:+(date.getMonth()+1)+:+date.getDate());}});2.4方法名称参数描述optionsnone返回选择的对象resizenone调整日历的大小.moveTodate跳转到指定日期.Codeexample:$('#cc').calendar('moveTo',newDate(2012,6,1));3.联合下拉框3.1实现联合下框是从validatebox扩展得来的，例：inputid=cvalue=001$('#c').combo({required:true,multiple:true});3.2属性名称类型描述默认值widthnumber组建的宽度autoheightnumber组建的高度22panelWidthnumber下拉面板的宽度nullpanelHeightnumber下拉面板的高度200multipleboolean设置是否支持多选falseselectOnNavigationboolean设置若选择了某个值输入框是否显示它trueseparatorstring设置多个选项时的间隔符,editableboolean设置是否可以直接输入文本truedisabledboolean是否禁用字段falsereadonlyboolean定义组建是否只读falsehasDownArrowboolean定义是否显示向下的箭头truevaluestring定义默认值delaynumber定义延迟时间200keyHandlerobjectAfunctioncalledwhenuserpresskey.ThedefaultkeyHandlerisdefinedas:key