easyui用户手册

Easyui用户手册-1-TutorialIntruductionThistutorialaimstouseeasyuiframeworktodemonstratehowtocreateyourwebpageeasily.Firstofall,youneedtoincludesomejsandcssfile:linkrel=stylesheettype=text/csshref=../themes/default/easyui.cssscripttype=text/javascriptsrc=../jquery-1.4.2.min.js/scriptscripttype=text/javascriptsrc=../jquery.easyui.min.js/scripteasyuipredefinessomeiconCSSclasswhichcanshowbackgroundimage(16x16).Ifyouwishtouseityouneedtoinclude:linkrel=stylesheettype=text/csshref=../themes/icon.cssContents1.DragandDropoBasicDragandDropoBuildingadrag-dropshoppingcartoCreatingaSchoolTimetable2.MenuandButtonoCreateasimplemenuoCreateaLinkButtonoCreateaMenuButtonoCreateaSplitButton3.LayoutoBuildborderlayoutforWebPagesoComplexlayoutonPaneloCreateAccordionoCreateTabsoDynamicallyaddtabsoCreateXPstyleleftpanel4.DataGridoConvertaHTMLtabletoDataGridoAddapaginationtoDataGridoGetselectedrowdatafromDataGridoAddatoolbartoDataGridoFrozencolumnsforDataGridoDynamicchangeDataGridcolumnsoFormattingDataGridcolumnsEasyui用户手册-2-oAddsortingtoDataGridoCreatecolumngroupsinDataGridoCheckBoxselectonDataGridoCustomDataGridPagingoEnableDataGridInlineEditing5.WindowoMyfirstwindowoCustomwindowtoolsoWindowandLayoutoCreateDialog6.TreeoCreateTreefrommarkupoCreateAsyncTreeoAppendnodestotreeoCreateTreewithCheckBoxNodes7.FormoSubmitaformwithAjaxoAddComboTreefieldtoaformoFormValidationBasicDragandDropTutorial»BasicDragandDropThistutorialshowyouhowtomakeHTMLelementsdraggable.Forthisexample,wewillcreatethreeDIVelementsandthenenablethemdraganddrop.Firstofall,wecreatethreedivelements:divid=dd1class=dd-demo/divdivid=dd2class=dd-demo/divdivid=dd3class=dd-demo/divForfirstdivelement,wemakeitdraggablebydefault.$('#dd1').draggable();Forseconddivelement,wemakeitdraggablebycreatingaproxythatclonetheoriginalelement.Easyui用户手册-3-$('#dd2').draggable({proxy:'clone'});Forthirddivelement,wemakeitdraggablebycreatingacustomproxy.$('#dd3').draggable({proxy:function(source){varp=$('divclass=proxyproxy/div');p.appendTo('body');returnp;}});Buildingadrag-dropshoppingcartTutorial»Buildingadrag-dropshoppingcartIfyoucaneasilyimplementdraganddropwithyourwebapplication,thenyouknowyou'vegotsomethingspecial.WithjQueryEasyUI,wehavedrag-dropcapabilitiesinwebapplication.Inthistutorial,wewillshowyouhowtobuildashoppingcartpagewhichenablesuserstodraganddroptheproductstheywishtobuy.Theshoppingbasketitemsandthepricewillbeupdated.Displayingproductsonthepage:ulclass=productsliahref=#class=itemimgsrc=shirt1.gif/divpBalloon/ppPrice:$25/pEasyui用户手册-4-/div/a/liliahref=#class=itemimgsrc=shirt2.gif/divpFeeling/ppPrice:$25/p/div/a/li!--otherproducts--/ulAsyoucanseeinthecodeabove,weaddaulelementthatcontainssomelielementstodisplaytheproducts.Everyproducthasnameandpricepropertieswhichiscontainedinsidethepelement.Buildthecart:divclass=carth1ShoppingCart/h1tableid=cartcontentstyle=width:300px;height:auto;theadtrthfield=namewidth=140Name/ththfield=quantitywidth=60align=rightQuantity/ththfield=pricewidth=60align=rightPrice/th/tr/thead/tablepclass=totalTotal:$0/ph2Dropheretoaddtocart/h2/divWeusethedatagridtoshowtheshoppingbasketitems.Draggingtheclonedproduct:$('.item').draggable({revert:true,proxy:'clone',onStartDrag:function(){$(this).draggable('options').cursor='not-allowed';$(this).draggable('proxy').css('z-index',10);Easyui用户手册-5-},onStopDrag:function(){$(this).draggable('options').cursor='move';}});Noticethatwesetthedraggableproperty'proxy'to'clone',sothedraggedelementwillhascloneeffect.Droppingtheselectedproductinthecart$('.cart').droppable({onDragEnter:function(e,source){$(source).draggable('options').cursor='auto';},onDragLeave:function(e,source){$(source).draggable('options').cursor='not-allowed';},onDrop:function(e,source){varname=$(source).find('p:eq(0)').html();varprice=$(source).find('p:eq(1)').html();addProduct(name,parseFloat(price.split('$')[1]));}});vardata={total:0,rows:[]};vartotalCost=0;functionaddProduct(name,price){functionadd(){for(vari=0;idata.total;i++){varrow=data.rows[i];if(row.name==name){row.quantity+=1;return;}}data.total+=1;data.rows.push({name:name,quantity:1,price:price});}add();totalCost+=price;$('#cartcontent').datagrid('loadData',data);$('div.cart.total').html('Total:$'+totalCost);Easyui用户手册-6-}Whendroppingtheproduct,wegettheproductnameandpricefirst,thencall'addProduct'functiontoupdateshoppingbasket.CreatingaSchoolTimetableTutorial»CreatingaSchoolTimetableThistutorialwillshowyouhowtocreateaschooltimetableusingjQueryEasyUI.Wewillbuildtwotables:schoolsubjectsontheleftandtimetableontheright.Youcoulddragschoolsubjectanddropitonatimetablecell.Theschoolsubjectisadivclass=itemelementwhiletimetablecellisatdclass=dropelement.Displayingschoolsubjectsdivclass=lefttabletrtddivclass=itemEnglish/div/td/trtrtddivclass=itemScience/div/td/tr!--othersubjects--/table/divDisplayingtimetableEasyui用户手册-7-divclass=righttabletr