jquery easyui網(wǎng)絡(luò)教程本及其含信息為個(gè)人所有

9.2給表單添加復(fù)合tree字 10.1 10.1.2 10.1.3 10.1.4 10.2.1 10.2.2 10.2.3 10.2.4 and 10.4 10.5 10.6Datagridand <linkrel="stylesheet"type="text/css"<scripttype="text/javascript"<linkrel="stylesheet"type="text/css" <<divid="dd1"class="dd-<divid="dd2"class="dd-<divid="dd3"class="dd- varp=$('<divclass="returnp;}<<ul<ahref="#"<img<ahref="#"<img<!--otherproducts--<<div <tableid="cartcontent"<thfield="name"<th ty"width=60<thfield="price"width=60<pclass="total">Total:<h2>Dropheretoaddto } varname=varprice=$(source).find('p:eq(1)').html();}vardata={"total":0,"rows":[]};vartotalCost=0;addProduct(name,price){functionadd(){for(vari=0;i++){varrow=data.rows[i];if(==name){ +=1;}}data.total+=1;}totalCost+=$('div.cart.total').html('Total:間表的單元格中。課程是<divclass='item'>元素，時(shí)間格是<tdclass='drop'>元素。<<div<td><div<td><div<!--othersubjects--<<div<td<td<td<<td<td<td<td<td<td<td<td<td<!--othercells--td.drop').droppable({if}elsevarc=}} 4菜單和按鈕and<<divid="mm"<div<div <divicon="icon-<div //{left:top:創(chuàng)建按鈕，首先創(chuàng)建A元素：<div<ahref="#"class="easyui-linkbutton"icon="icon-<ahref="#"class="easyui-linkbutton"icon="icon-<ahref="#"class="easyui-linkbutton"icon="icon-<ahref="#"class="easyui-linkbutton">text<ahref="#"class="easyui-linkbutton"icon="icon-<div<ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui- in="true">text<ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui-linkbutton" <ahref="#"class="easyui-linkbutton" <div<ahref="javascript:void(0)"id="mb1"icon="icon-<ahref="javascript:void(0)"id="mb2"icon="icon-<divid="mm1"<divicon="icon-<divicon="icon-<div <div <divicon="icon-<div>Select<divid="mm2" <divstyle="border:1pxsolid<divstyle="border:1pxsolid<ahref="javascript:void(0)"id="sb"icon="icon-<ahref="javascript:void(0)"class="easyui-linkbutton" <divid="mm"<divicon="icon-<divicon="icon-<div<div<div<div>Internet<div <div>Select<<divicon="icon-<div>SelectjQuery <<divclass="easyui-layout"<li><ahref="javascript:void(0)" <li><ahref="javascript:void(0)" <li><ahref="javascript:void(0)" <divid="content"region="center"title="Language"href="java.html" functionfunction}通過(guò)split屬性為T(mén)RUE，允許用戶(hù)改變面板上區(qū)域的大?。?lt;<divclass="easyui-panel"title="ComplexPanelLayout"icon="icon-search"collapsible="true"style="padding:5px;width:500px;height:250px;"><divclass="easyui-layout"<divregion="north"border="false"class="p-<divregion="center"<divclass="easyui-layout"<divregion="east"border="false"class="p-<img<divregion="center"border="false"style="border:1px<divclass="easyui-layout"<divregion="south"split="true"border="false"<divregion="center"個(gè)面板的body內(nèi)容是可見(jiàn)的。當(dāng)用戶(hù)點(diǎn)擊面板頭，body內(nèi)容變?yōu)榭梢?jiàn)其他面板body內(nèi)容變得不可見(jiàn)。<<divclass="easyui-accordion"<divtitle="AboutAccordion"icon="icon-ok"<h3style="color:#0099FF;">Accordionfor<p>AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.</p><divtitle="Abouteasyui"icon="icon-reload"selected="true"easyuihelpyoubuildyourwebpage<div <ulid="tt1"class="easyui-<span>SubFolder<span>File<span>File<span>File<span>File<span>File<<divclass="easyui-tabs"<divtitle="FirstTab"style="padding:10px;">FirstTab<divtitle="SecondTab"closable="true"style="padding:10px;">SecondTab<divtitle="ThirdTab"icon="icon-reload"closable="true"Third<<divstyle="margin-<ahref="#"class="easyui- <ahref="#"class="easyui-linkbutton"<ahref="#"class="easyui-linkbutton"<divid="tt"class="easyui-tabs"<divfunctionfunctionaddTab(title,if($('#tt').tabs('exists',}elsevarcontent='<iframescrolling="auto"frameborder="0"src="'+url+'"style="width:100%;height:100%;"></iframe>';title,content:content,}}<div<divclass="easyui-panel"title="PictureTasks"collapsible="true"Viewasaslideshow<br/>Orderprintsonline<br/>Printpictures<divclass="easyui-panel"title="FileandFolderTasks"MakeanewPublishthisfoldertotheWeb<br/>Sharethisfolder<divclass="easyui-panel"title="Other ces"collapsible="true"collapsed="true"style="width:200px;height:auto;padding:10px;">NewMyPictures<br/>MyComputer<br/>MyNetwork<divclass="easyui-panel"title="Details"collapsible="true" Datemodified:Oct.3rd background:#fffurl('panel_header_bg.gif')no-repeattop}}background:url('arrow_up.gif')no-repeat0px-}background:url('arrow_down.gif')no-repeat0px-6DataGrid<<tableid="tt"class="easyui-datagrid"<thfield="name1"width="50">Col<thfield="name2"width="50">Col<thfield="name3"width="50">Col<thfield="name4"width="50">Col<thfield="name5"width="50">Col<thfield="name6"width="50">Col<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<td>Data<thfield="name1"width="50"rowspan="2">Col<thfield="name2"width="50"rowspan="2">Col<thfield="name3"width="50"rowspan="2">Col<th<th<thfield="name4"width="50">Col<thfield="name5"width="50">Col<thfield="name6"width="50">Col6.2DataGrid<table $($('#tt').datagrid({title:'LoadData',rows: publicclassItemextendsActiveRecordBase{@IdpublicString@ColumnpublicString@Columnpublicjava.math.BigDecimallistprice;@Columnpublicjava.math.BigDecimalunitcost;@ColumnpublicStringattr1;@ColumnpublicStringpublicpublicclassontrollerextendsgetitem@parampagepage@paramrowsrowsper@return@returnJSONformat@throwspublicViewgetItems(intpage,introws)throwsException{longtotal=Item.count(Item.class,null,List<Item>items=Item.findAll(Item.class,null,null,null,rows,Map<String,Object>result=newHashMap<String,Object>();result.put("total",total);result.put("rows",items);returnnewJsonView(result);}6.3DataGrid:<table $($('#tt').datagrid({title:'LoadData',varvarrow=$('#tt').datagrid('getSelected');if(row){alert('Item}varvarids=varrows=$('#tt').datagrid('getSelections');for(vari=0;i<rows.length;i++){}6.4添加到::<table idwithToolbar',width:550,

}}<<table'FrozenColumns',6.6DataGrid新columns屬性。<table 'ChangeColumns',6.7DataGrid<table if(val<return'<span}elsereturn}}TRUE，下面是例子：<table leColumn',width:550,認(rèn)排序列：itemid，按asc（升序）排序。sort:order:'asc''desc',默認(rèn)為publicclassItemextendsActiveRecordBase{@IdpublicString@ColumnpublicString@Columnpublicjava.math.BigDecimallistprice;@Columnpublicjava.math.BigDecimalunitcost;@ColumnpublicStringattr1;@ColumnpublicStringpublicclass ontrollerextendsgetitem@parampagepage@paramrowspage@paramsortsortcolumnfield@paramordersortorder,canbe'asc'or@returnJSONformat@throwslongtotal=Item.count(Item.class,null,rows,(1)*rows);Map<String,Object>result=newHashMap<String,Object>();result.put("total",total);result.put("rows",items);returnnewJsonView(result);}}6.9DataGrid<tableCheckboxSelect',<table $($('#tt').datagrid({title:'LoadData',varvarpager=pager.pagination({sho false,buttons:[{}}}refresh');return}<<tableitableDataGrid',for(vari=0;i<products.length;if(products[i].productid==value)return}return}}on:off:}}ifvarc='<areturn}elsevard='<areturn}}}ing=true;ng=false;ing=false;}}functionfunction}function$.messager.confirm('Confirm','Areyousure?',function(r){if(r){}}function}function}<<tablele:'MergeCells',for(vari=0;i<products.length;if(products[i].productid==value)return}return}varmerges=[{varmerges=[{index:2,for(vari=0;i<merges.length;77.1<<divid="win"class="easyui-window"title="MyWindow"Some<<divid="win"class="easyui-window"title="MyWindow"closed="true"Some<<divid="win"class="easyui-window"title="Login"<formstyle="padding:10px20px10px<p>Name:<input<p>Pass:<input<ahref="#"class="easyui-linkbutton"icon="icon-<<ahref="#"class="easyui-linkbutton"7.2默認(rèn)的窗口有4個(gè)工具：collapsible（可折疊）,minimizable（最小化）, <div<divid="win"class="easyui-window"title="MyWindow"window我們可以定義工具屬性在標(biāo)記中或者jquery代碼中?，F(xiàn)在我們使用jquery代碼來(lái)定義窗口：}}7.3Window版式組件可以嵌套在窗口。我們可以創(chuàng)建復(fù)合版面窗口和而不用寫(xiě)任何JS代碼.jquery-easyui框架在幫助我們進(jìn)行<divclass="easyui-window"title="LayoutWindow"icon="icon-help"<divclass="easyui-layout"<divregion="west"split="true"<ulclass="easyui-<divregion="center"border="false"<divclass="easyui-tabs"<divtitle="Home"Nocontactdata.<divregion="south"<aclass="easyui-linkbutton"icon="icon-ok"<aclass="easyui-linkbutton"icon="icon-cancel"7.4創(chuàng)建<<divid="dd"style="padding:5px;width:400px;height:200px;">DialogContent.$('#dd').dialog({title:'MyDialog',}}}} 8tree節(jié)點(diǎn)，子ul元素產(chǎn)生父tree節(jié)點(diǎn)。<<ul<span>SubFolder<li><span>File<li><span>File<li><span>File<li><span>File<li><span>File <ul classandgetNodes

publicclassNodeextendsActiveRecordBase{@IdpublicIntegerid;@ColumnpublicIntegerparentId;@ColumnpublicStringpublicbooleanhasChildren()throwslongcount=count(Node.class,"parentId=?",newObject[]{id});returncount>0;}}publicclassNodeControllerextendsgetnodes,ifthe'id'parameterequals0thenloadthefirstlevelotherwiseloadthechildren@paramidtheparentnodeid@returnthetreerequirednodejson@throwspublicViewgetNodes(intid)throwsException{List<Node>nodes=null;

if(id== //returnthefirstlevel}else //returnthechildren}List<Map<String,Object>>items=newfor(Nodenode:Map<String,Object>item=newHashMap<String,Object>();item.put("id",node.id);item.put("text",//thenodehas//setthestateto'closed'sothenodecanasynchronousloadchildrennodes(node.hasChildren()){item.put("state","closed");}}returnnew}}8.3<<divstyle="width:200px;height:auto;border:1pxsolid<ulid="tt"class="easyui-tree"varnode= 擇的節(jié)點(diǎn)，使用append方法添加節(jié)點(diǎn)。varvarnode=$('#tt').tree('getSelected');if(node){varnodes[{}<ul using(using('tree',json',checkbox:true9單變成ajax表單。表單發(fā)送所有的字段到處理服務(wù)，服務(wù)處理和發(fā)送一些數(shù)據(jù)返回前臺(tái)網(wǎng)頁(yè)。我們收到返回的數(shù)據(jù)后顯<<div<formid="ff"action="/demo5/ProcessServlet"<td><inputname="name" <td><input "<td><inputname="phone"<td><inputtype="submit"$.messager.alert('Info',data,}protectedprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//TODOAuto-generatedmethodStringname=request.getParameter("name"); =request.getParameter(" Stringphone=request.getParameter("phone"); PrintWriterout=}個(gè)address，city字段。city字段是一個(gè)復(fù)合tree字段，用戶(hù)可以下拉tree面板并選擇指定city。個(gè)<<divid="dlg"<h2>Account<formid="ff"action="/demo6/ProcessServlet"<td><inputtype="text"name="name"<td><inputtype="text"name="address"<td><selectclass=" botree"url="city_data.json"name="city"style="width:155px;"/></td>我們?cè)O(shè)置復(fù)合tree的url屬性，這個(gè)字段可以被從服務(wù)器端檢索tree。注意，字段的class名應(yīng)該是 所以我們不需要些任何js代碼，復(fù)合tree字段就會(huì)自動(dòng)生成。 }}}publicpublicclassProcessServletextendsHttpServletprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{Stringname=request.getParameter("name");Stringaddress=request.getParameter("address");Stringcity=request.getParameter("city");PrintWriterout=response.getWriter();}} 并且應(yīng)用validatebox插件驗(yàn)證表單。你可以修改它適應(yīng)自己的要求。讓我們構(gòu)建簡(jiǎn)單的內(nèi)容的表單：name,,subject和message字段<<div<formid="ff"<label<inputclass="easyui-validatebox"type="text"name="name"<label <inputclass="easyui-validatebox"type="text"name=" required="true"validType=" <label<inputclass="easyui-validatebox"type="text"name="subject"<label<textareaname="message"<inputtype="submit" Servlet',onSubmit:function(){return}} publicpublicclassProcessServletextendsHttpServletprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{Stringname=request.getParameter("name"); =request.getParameter(" Stringsubject=request.getParameter("subject");Stringmessage=request.getParameter("message"); PrintWriterout=response.getWriter();}10ation文10.110.2 ando10.410.510.6DataGridandeasyloader.baseeasyloader.base=//settheeasyuibase $.messager.alert('Title','loadTheeasyuibasedirectory,mustendwith'/'.它說(shuō)明是一個(gè)easyui的基礎(chǔ) Thebasedirectorywillbeautosettedrelativetoeasyload.js Thenameofthemethatdefinedin'themes'directory ThelocaleTimeoutvalueinmilliseconds.Firesifatimeoutoccurs.FireswhenamoduleisloadedFireswhenamoduleandit'sdependenciesareloadedLoadthespecifiedmodule.WhenloadsuccessacallbackfunctionwillbeThemoduleparametervalidtypeare:asinglemodulenameanmoduleacssfilethatendwith'.css'ajsfilethatendwith'.js'10.1.2<<divid="dd"style="width:100px;height:100px;border:1pxsolid<divid="title" acloneelementisusedas .Ifafunctionisspecified,itmustreturnajQueryobject.Ifsettotrue,theelementwillreturntoitsstartpositionwhendraggingstops.Thecsscursorwhendragging.Thedraggedelementpositionxcorrespondingtocurrentcursor當(dāng)拖動(dòng)時(shí)元素只在X軸上移動(dòng)nullThedraggedelementpositionycorrespondingtocurrentcursor當(dāng)拖動(dòng)時(shí)元素只在Y軸上移動(dòng)nullThehandlethatstartthedraggable.nullTruetostopdraggable.Thedragwidthinwhichcanstartdraggable.表示該元素最小可拖0Definestheaxiswhichthedraggedelementsmoveson,availablevalueisv'orhwhensettonullwillmoveacrossv'當(dāng)設(shè)置為null時(shí)就超過(guò)‘v’或者‘h’的范圍。eFireswhenthetargetobjectstarteFiresduringdragging.ReturnfalsewillnotdodraggingeFireswhenthedraggingReturntheoptionsReturnthedragifthepropertyisEnablethedragDisablethedrag10.1.3 DeterminewhichdraggableelementwillbeindicatethedraggedDOMelement.Fireswhenthedraggableelementisdraggedover.ThesourceparameterindicatethedraggedDOMelement.indicatethedraggedDOMelement.Fireswhenthedraggableelementisdropped.ThesourceparameterindicatethedraggedDOMelement.10.1.4 Truetodisabletheeast,etc.n,e,s,w,ne,se,sw,nw,allTheminimumwidthwhenTheminimumheightwhenTheumwidthwhenTheumheightwhenTheedgeofbordertobe5eFireswhenstarteFiresduringresizing.Whenreturnfalse,theDOMelementwillnotactsactualresizeaction.eFirestwhenstop 10.2.1Manypanelpropertiescanbedefinedin<div/><<divid="p"title="MyPanel"collapsible="true"style="padding:10px;">PanelContentTocreatea Tocreateapanelwithcustome:'MyPanel',tools:[{TomovepaneltootherThetitletexttodisyinpanelACSSclasstodisya16x16iconinSetthepanelSetthepanelSetthepanelleftSetthepaneltopAddaCSSclasstotheAddaCSSclasstothepanelAddaCSSclasstothepanelAddacustomspecificationstyletotheWhentruetosetthepanelsizefitit'sparentDefinesiftoshowpanelIfsettotrue,thepanelwillberesizeanddolayoutwhenIfsettotrue,thepanelheaderwillnotbeThepanelbodyDefinesiftoshowcollapsibleDefinesiftoshowminimizableDefinesiftoshowizableDefinesiftoshowclosableCustomtools,everytoolcancontaintwoproperties:iconClsandhandlerDefinesifthepaneliscollapsedatDefinesifthepanelisminimizedatDefinesifthepanelisizedatDefinesifthepanelisclosedatAURLtoloadremotedataandthendisyintheTruetocachethepanelcontentthatloadedfromWhenloadingremotedatashowamessageintheFireswhenremotedataisFiresbeforepanelisopened,returnfalsetostoptheFiresafterpanelisFiresbeforepanelisclosed,returnfalsetocanceltheFiresafterpanelisFiresbeforepanelisdestroyed,returnfalsetocanceltheFiresafterpanelisFiresbeforepaneliscollapsed,returnfalsetostoptheFiresafterpanelisFiresbeforepanelisexpanded,returnfalsetostoptheFiresafterpaneliswidth,Firesafterpanelisresized.width:thenewouterwidthheight:thenewouterheightFiresafterpanelismoved.left:thenewleftpostiontop:thenewtoppositionFiresafterthewindowhasbeenFiresafterthewindowhasbeenrestoredtoitsoriginalFiresafterthewindowhasbeenReturnthepanelReturnthepanelheaderReturnthepanelbodySetthetitletextofWhenOpenparametersettotrue,thepanelisopenedbypasstheonBeforeOpencallback.WhenCloseparametersettotrue,thepanelisclosedbypassWhenDestroyparametersettotrue,thepanelisdestroyedbypasstheonBeforeDestroycallback.RefreshthepaneltoloadremotedatawhenhrefpropertyisSetpanelsizeanddolayout.Theoptionsobjectcontainsfollowingwidth:thenewpanelwidthheight:thenewpanelheightleft:thenewpanelleftpositiontop:thenewpaneltopMovethepaneltoanewposition.Theoptionsobjectcontainsfollowingleft:thenewpanelleftpositiontop:thenewpaneltopFitsthepanelwinthinits izedpanelbacktoitsoriginalsizeandCollapsesthepanelbody.WhenCollapseissettedtotrue,theonBeforeCollapseeventwillnotbetriggered.Expandthepanelbody.WhenExpandissettedtotrue,theonBeforeExpandeventwillnotbetriggered.10.2.2<<divid="tt"<divtitle="Tab1" <divtitle="Tab2"closable="true"<divtitle="Tab3"icon="icon-reload"closable="true" TocreateatabsToaddatab:'NewTab',Togettheselectedtabpanelanditstabvarvarpp=vartab= //thecorrespondingtabTabsThewidthoftabsTheheightoftabsTruetorenderthetabstripwithoutabackgroundcontainerTruetosetthesizeoftabscontainertofitit'sparentTruetoshowtabscontainerThenumberofpixelstoscrolleachtimeatabscrollbuttonisThenumberofmillisecondsthateachscrollanimationshouldFireswhenanajaxtabpanelfinishloadingremoteFireswhenuserselectatabFiresbeforethetabpanelisclosed,returnfalsetocancelthiscloseFireswhenusercloseatabFireswhenanewtabpanelisFireswhenatabpanelisReturnthetabsReturnalltabResizethetabscontaineranddoAddanewtabpanel,theoptionsparameterisaconfigobject,seetabpanelpropertiesformoredetails.Closeatabpanel,titleparameterindicatewhichpaneltobeGetthespecifiedtabGettheselectedtabSelectatabIndicateifthespecialpanelisUpdatethespecifiedtabpanel,theparamparametercontainstwotab:thetabpaneltobeupdated.options:thepaneloptions.TabThetabpaneltitleThetabpanelAURLtoloadremotecontenttofillthetabTruetocachethetabpanel,validwhenhrefpropertyisAniconCSSclasstoshowontabpanelWhensettotrue,thetabpanelwillshowaclosablebuttonwhichcanclicktoclosethetabpanel.Whensettotrue,tabtabpanelwillbeThewidthoftabTheheightoftab10.2.3<<divid="aa"<divtitle="Title1"icon="icon-save"<h3style="color:#0099FF;">Accordionfor<p>AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.</p><divtitle="Title2"icon="icon-reload"selected="true" ContainerThewidthofaccordionTheheightofaccordionSettotruetosettheaccordioncontainersizefitit'sparentDefinesiftoshowtheDefinesiftoshowanimationeffectwhenexpandorcollapsePanelTheaccordionpaneloptionsisinhiritedfrompanel,manypropertiesisdefinedin<div/>markup.Bellowistheadditionproperties:SettotruetoexpandtheFireswhenapanelisFireswhenanewpanelisFiresbeforeapanelisremoved,returnfalsetocanceltheremoveFireswhenapanelisReturntheoptionsofGetallResizetheGettheselectedGetthespecifiedSelectthespecifiedAddanew10.2.4Thelayoutpanelmusthasone'center'<divid="cc" <<divregion="north"title="NorthTitle"split="true"<divregion="south"title="SouthTitle"split="true"<divregion="east"icon="icon-reload"title="East"split="true"<divregion="west"split="true"title="West"<divregion="center"title="centertitle" LayoutPanelAllthepropertiesisdefinedon<div/>markup,whichthelayoutpaneliscreatedfromThelayoutpaneltitleDefinesthelayoutpanelposition,thevalueisoneoffollowing:north,south,east,west,center.TruetoshowlayoutpanelTruetoshowasplitbarwhichusercanchangethepanelAniconCSSclasstoshowaicononpanelAnURLtoloaddatafromremoteSetthelayoutReturnthespecifiedpanel,the'region'parameterpossibleCollapsethespecifiedpanel,the'region'parameterpossibleExpandthespecifiedpanel,the'region'parameterpossible and<<divid="mm"<div <divicon="icon-<div Tocreate Toshow onspecial{left:top: left0top0windowwhenclicked FiresafterisFiresafterisShowaonspecialposition.posparameterhavetwoproperties:left:thenewleftposition.top:thenewtopHidea<ahref="#"id="btn"icon="icon- TheidattributeofthisTruetodisabletheTruetoshowainThebuttonACSSclasstodisya16x16icononDisabletheEnablethe<<ahref="javascript:void(0)"id="mb"icon="icon-<divid="mm"<divicon="icon-<divicon="icon-<div <div <divicon="icon-<div>Selectbutton({enu:Overridedefaultwith TruetodisabletheTruetoshowinAselectortocreatea Definesdurationtimeinmillisecondstoshow whenhoveringthe<<ahref="javascript:void(0)"id="sb"icon="icon-ok"<divid="mm"<divicon="icon-<divicon="icon-OverridedefaultwithTruetodisabletheTruetoshowinAselectortocreatea Definesdurationtimeinmillisecondstoshow whenhoveringthe10.4<<formid="ff"Tomakethe eajaxsubmitonSubmit://dosome//returnfalsetoprevent}Todoasubmit{onSubmit://dosome//returnfalsetoprevent}TheformactionURLtoFiresbeforesubmit,returnfalsetopreventsubmitFireswhentheformissubmittedFiresbeforearequestismadetoloaddata.ReturnfalsetocancelthisFireswhentheformdataisFireswhensomeerrorsoccurwhileloadingformDothesubmitaction,theoptionsparameterisaobjectwhichcontainsfollowingurl:theactiononSubmit:callbackfunctionbeforesubmitsubmit:callbackfunctionaftersubmitsuccessfulyLoadrecordstofilltheThedataparametercanbeastringoraobjecttype,whenstringactsasaremoteURL,otherwiseactsasalocalrecordCleartheformDotheformfieldsvalidation,returntruewhenallfieldsisvalid.Themethodusedwiththevalidatebox<<selectid="cc"name="dept"<option Tocreatefromremoteata.json',valueField:'id',Theremotedataformat ThewidthoftheThewidthofthedropdownTheheightofthedropdownTheunderlyingdatavaluenametobindtothisTheunderlyingdatafieldnametobindtothisDefinesifusercantypetextdirectlyintotheDefinesiftodisabletheAURLtoloadlistdatafromThelistdatatobeDefinesifthefieldshouldbeFireswhenremotedataisloadedFireswhenremotedataloadFireswhenuserselectalistFireswhenthefieldvalueisDestroytheResizethecomponentSelectaniteminthedropdownClearthecomponentSetthespecifiedvalueintothefield.The'param'parametercanbeavaluestringorajavascriptobjectthatcontainstwopropertiescorrespondingtovalueFieldandtextFieldproperty.GetthefieldGetthefieldLoadthelocalelistRequesttheremotelistDisabletheEnablethe<selectid="cc" Overridedefaultswith ThewidthoftheThewidthofthetreeTheheightofthetreeAURLtoloadremotetreeThedatatobeDefinesiftodisabletheDefinesifthefieldshouldbeTooltiptextthatappearswhenthetextboxisFiresbeforeatreenodeisselected,returnfalsetocanceltheFireswhenuserselectatreeFireswhenthefieldvalueisDestroytheResizethecomponentGettheClearthecomponentSetthespecifiedvalueintothefield.The'param'parametercanbeatreenodeidvalueorajavascriptobjectthatcontainstwoproperties:idandtext.GetthefieldGetthefieldLoadthelocaletreeRequesttheremotetreedataDisabletheEnablethe<inputtype="text" DefinesiftodisabletheTheminimumallowedTheumallowedTheumprecisiontodisyafterthedecimal0<inputid="vv"required="true" : regexurl:MatchURLregexlength[0,100]:BetweenxandxcharactersTocustomvalidaterule,override$.fn.validatebox.defaults.rulesthatdefinesavalidatorfunctionandinvalidmessage.Forexample,todefineaminLengthvalidtype:{minLength:validator:function(value,returnreturnvalue.length>=message:'Pleaseenteratleast{0}}NowyoucanusetheminLength<inputclass="easyui-validatebox" Intheabovecode,wedefineainputboxthatshouldbeinputedatleast5DefinesifthefieldshouldbeDefinesthefieldvalidtype,suchas,url,isinvalid.RemoveanddestroytheDothevalidationtodeterminewhetherthecontentoftextboxiscallvalidatemethodandreturnthevalidationresult,trueor<inputid="dd" ThetexttodisyforthecurrentdayThetexttodisyforthecloseWhentruetodisabletheDefinesifthefieldshouldbeTooltiptextthatappearswhenthetextboxisAfunctiontoformatthedate,thefunctiontakea'date'parameterandreturnastringvalue.Afunctiontoparseadatestring,thefunctiontakea'date'stringandreturnadatevalue.FireswhenuserselectaDestroytheDisabletheEnablethe<divid="cc" fitit'sparentcontainer.DefinesiftoshowtheThelistofweektobeThelistofmonthtobe['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']TheyearofThemonthofcurrentmonth,startwithThecurrentcurrentFireswhenuserselecta10.5Manywindowpropertiescanbedefinedinmarkup,suchasicon,title,<<divid="win"icon="icon-save"title="MyWindow">WindowContentTocreatea Toopena Manywindowpropertiescaninhiritfrompanel,belowisthewindowprivateDefinesifwindowcanbeDefinesifwindowcanbeIfsettotrue,whenwindowshowtheshadowwillshowDefinesifwindowisamodalWindowoverridesomepanelThewindowtitleNewDefinesiftoshowcollapsibleDefinesiftoshowminimizableDefinesiftoshowizableDefinesiftoshowclosableWindoweventsissameaspanelevents,seepaneleventsformoreWindowmethodsissameaspanelmethods,exceptthe'header'and'body'method.<<divid="dd"title="MyDialog"style="width:400px;height:200px;">DialogContent. Manypropertiescaninhiritfromwindow,belowisthedialogprivateThedialogtitleDefinesiftoshowcollapsibleDefinesiftoshowminimizableDefinesifto izableDefinedifthedialogcanbeThetoptoolbarofdialog,eachtoolcontains:text,iconCls,disabled,handleretc.handleretc.Dialogeventsissameaswindowevents,seewindoweventsformoreDialogmethodsissameaswindowmethods,seewindowmethodsformoreTheOkbuttonTheCancelbuttonShowamessagewindowonrightbottomofscreen.Theoptionsparameterisaconfigurationobject:showType:Defineshowthemessagewindowtobeshowed.Availablevaluesare:null,slide,fade,show.Defaultstoslide.showSpeed:Definesthetimeinmillisecondsmessagewindowfinishsshow.Defaultsto600.width:Definesthewidthofmessagewindow.Defaultsto250.height:Definestheheightofmessagewindow.Defaultsto100.msg:Themessagetexttobeshowed.title:Thetitletexttobeshowedonheaderusercloseit.Definestounzero,themessagewindowwillbeautoclosedwhentimeout.icon,fnShowanalertwindow.title:Thetitletexttobeshowedonheaderpanel.msg:Themessagetexttobeshowed.icon:Theiconimagetobeshowed.Availablevalueare:fn:Thecallbackfunctiontriggeredwhenwindowtitle,msg,ShowaconfirmationmessagewindowwithOkandCancelbuttons.Parameters:title:Thetitletexttobeshowedonheaderpanel.msg:Themessagetexttobeshowed.fn(b):Thecallbackfunction,whenuserclickOkbutton,passatruevaluetofunction,otherwisepassafalsetoit.title,msg,ShowamessagewindowwithOkandCancelbuttonspromptingusertoentersometext.Parameters:title:Thetitletexttobeshowedonheaderpanel.msg:Themessagetexttobeshowed.fn(val):Thecallbackfunctionwithavalueparameteruser<divid="pp"style="background:#efefef;border:1pxsolid paginationiscreated.1ThepageShowthepagenumberwhenpaginationis1Usercanchangethepagesize.ThepageListpropertydefineshowmanysizecanbeDefinesifdataisDefinescustombuttons,eachbuttoncontainstwoproperties:iconCls:theCSSclasswhichwillshowabackgroundimagehandler:ahandlerfunctionwhenbuttonDefinesiftoshowpageDefinesiftoshowrefreshShowalabelbeforetheinputShowalabelaftertheinputofDisyapageof{total}itemsFireswhenuserselectanewpage.callbackfunctioncontainstwoparameter:pageNumber:thenewpagenumberpageSize:thenewpagesizeFiresbeforetherefreshbuttonisclicked,returnfalsetocanceltherefreshaction.FiresafterFireswhenuserchangethepage10.6Datagridand<table TheDataGriddataformat"attr1":"SpottedAdultFemale","itemid":"EST-10"},"attr1":"GreenAdult","itemid":"EST-13"},DataGridOverridedefaultwithThedatagridpaneltitlebeusedastheheadericon.TruetoshowdatagridpanelThewidthofdatagridTheheightofdatagridThedatagridcolumnsconfigobject,seecolumnpropertiesformoredetails.Sameasthecolumnsproperty,butthethesecolumnswillbefrozenonleft.TruetostripetheThemethodtypetorequestremoteTruetodisydatainoneIndicatewhichfiel