1、Good is good, but better carries it.精益求精，善益求善。jQueryEasyUI網(wǎng)絡(luò)教程Jqueryeasyui網(wǎng)絡(luò)教程小易在線二零一一年三月本文檔及其所含信息為個人所有請保留所有的信息完整作者：小易在線目錄TOCo1-3hzHYPERLINKl_Toc2884697421基本拖放PAGEREF_Toc288469742h4HYPERLINKl_Toc2884697432構(gòu)建購物車型拖放PAGEREF_Toc288469743h5HYPERLINKl_Toc2884697443創(chuàng)建課程表PAGEREF_Toc288469744h8HYPERLINKl_Toc

2、2884697454菜單和按鈕MenuandButtonPAGEREF_Toc288469745h10HYPERLINKl_Toc288469746o4.1創(chuàng)建簡單菜單PAGEREF_Toc288469746h10HYPERLINKl_Toc288469747o4.2創(chuàng)建連接按鈕PAGEREF_Toc288469747h11HYPERLINKl_Toc288469748o4.3建立菜單按鈕PAGEREF_Toc288469748h12HYPERLINKl_Toc288469749o4.4建立拆分按鈕PAGEREF_Toc288469749h13HYPERLINKl_Toc2884697505創(chuàng)

3、建邊框版面網(wǎng)頁PAGEREF_Toc288469750h15HYPERLINKl_Toc288469751o5.1面板上的復(fù)合版面PAGEREF_Toc288469751h16HYPERLINKl_Toc288469752o5.2建立可折疊版面PAGEREF_Toc288469752h17HYPERLINKl_Toc288469753o5.3建立TABSPAGEREF_Toc288469753h18HYPERLINKl_Toc288469754o5.4動態(tài)添加tabsPAGEREF_Toc288469754h19HYPERLINKl_Toc288469755o5.5創(chuàng)建XP式樣左面板PAGER

4、EF_Toc288469755h20HYPERLINKl_Toc2884697566DataGrid數(shù)據(jù)格PAGEREF_Toc288469756h23HYPERLINKl_Toc288469757o6.1轉(zhuǎn)換HTML表格到DataGridPAGEREF_Toc288469757h23HYPERLINKl_Toc288469758o6.2給DataGrid添加分頁PAGEREF_Toc288469758h25HYPERLINKl_Toc288469759o6.3得到DataGrid選擇行PAGEREF_Toc288469759h27HYPERLINKl_Toc288469760o6.4添加工具

5、欄到DataGridPAGEREF_Toc288469760h28HYPERLINKl_Toc288469761o6.5DataGrid凍結(jié)列PAGEREF_Toc288469761h30HYPERLINKl_Toc288469762o6.6動態(tài)改變DataGrid列PAGEREF_Toc288469762h31HYPERLINKl_Toc288469763o6.7格式化DataGrid列PAGEREF_Toc288469763h32HYPERLINKl_Toc288469764o6.8添加排序到DataGridPAGEREF_Toc288469764h33HYPERLINKl_Toc2884

6、69765o6.9在DataGrid上的復(fù)選框PAGEREF_Toc288469765h36HYPERLINKl_Toc288469766o6.10自定義DataGrid分頁PAGEREF_Toc288469766h37HYPERLINKl_Toc288469767o6.11使DataGrid能編輯PAGEREF_Toc288469767h38HYPERLINKl_Toc288469768o6.12DataGrid中合并單元格PAGEREF_Toc288469768h41HYPERLINKl_Toc2884697697窗口PAGEREF_Toc288469769h44HYPERLINKl_To

7、c288469770o7.1我第一個窗口PAGEREF_Toc288469770h44HYPERLINKl_Toc288469771o7.2自定義窗口工具PAGEREF_Toc288469771h45HYPERLINKl_Toc288469772o7.3Window和LayoutPAGEREF_Toc288469772h46HYPERLINKl_Toc288469773o7.4創(chuàng)建對話框PAGEREF_Toc288469773h47HYPERLINKl_Toc2884697748TreePAGEREF_Toc288469774h50HYPERLINKl_Toc2884697758.1從標記創(chuàng)建

8、treePAGEREF_Toc288469775h51HYPERLINKl_Toc2884697768.2創(chuàng)建異步TreePAGEREF_Toc288469776h52HYPERLINKl_Toc2884697778.3添加節(jié)點PAGEREF_Toc288469777h55HYPERLINKl_Toc2884697788.4創(chuàng)建帶有checkbox節(jié)點的treePAGEREF_Toc288469778h57HYPERLINKl_Toc2884697799表單PAGEREF_Toc288469779h58HYPERLINKl_Toc288469780o9.1Ajax方式發(fā)送表單PAGEREF_T

9、oc288469780h58HYPERLINKl_Toc288469781o9.2給表單添加復(fù)合tree字段PAGEREF_Toc288469781h59HYPERLINKl_Toc288469782o9.3驗證表單PAGEREF_Toc288469782h62HYPERLINKl_Toc28846978310Documentation文檔PAGEREF_Toc288469783h65HYPERLINKl_Toc288469784o10.1BasePAGEREF_Toc288469784h65HYPERLINKl_Toc28846978510.1.1EasyLoaderPAGEREF_Toc2

10、88469785h66HYPERLINKl_Toc28846978610.1.2DraggablePAGEREF_Toc288469786h67HYPERLINKl_Toc28846978710.1.3DroppablePAGEREF_Toc288469787h69HYPERLINKl_Toc28846978810.1.4ResizablePAGEREF_Toc288469788h70HYPERLINKl_Toc288469789o10.2layoutPAGEREF_Toc288469789h71HYPERLINKl_Toc28846979010.2.1PanelPAGEREF_Toc2884

11、69790h71HYPERLINKl_Toc28846979110.2.2tabsPAGEREF_Toc288469791h76HYPERLINKl_Toc28846979210.2.3accordionPAGEREF_Toc288469792h79HYPERLINKl_Toc28846979310.2.4layoutPAGEREF_Toc288469793h82HYPERLINKl_Toc288469794o10.3MenuandbuttonPAGEREF_Toc288469794h83HYPERLINKl_Toc288469795o10.4formPAGEREF_Toc288469795h

12、88HYPERLINKl_Toc288469796o10.5windowPAGEREF_Toc288469796h101HYPERLINKl_Toc288469797o10.6DatagridandtreePAGEREF_Toc288469797h107概述這個教程的目的是說明如何使用easyui框架容易的創(chuàng)建網(wǎng)頁。首先，你需要包含一些js和css文件：easyui預(yù)定義了一些圖標css，這些css類可以顯示圖片背景（1616）。使用這些類之前，需要包含：1基本拖放這個教程顯示如何使HTML元素變得可拖放。這個例子會創(chuàng)建3個DIV元素然后讓它們變得可拖放。首先，創(chuàng)建三個DIV元素：讓第一個DI

13、V元素可拖放，使用默認的拖放樣式。$(#dd1).draggable();讓第二個DIV元素使用proxy來拖放，proxy:clone表示proxy使用原始元素的復(fù)制。$(#dd2).draggable(proxy:clone);讓第三個DIV元素使用自定義proxy來拖放$(#dd3).draggable(proxy:function(source)varp=$(proxy);p.appendTo(body);returnp;);2構(gòu)建購物車型拖放使用jQueryeasyui，我們在web應(yīng)用中就有了拖放的能力。這個教程顯示了如何構(gòu)建購物車頁，它使用戶拖放他們希望購買的產(chǎn)品，更新購物籃的物

14、品和價格。顯示產(chǎn)品頁：BalloonPrice:$25FeelingPrice:$25ul元素包含一些li元素以顯示產(chǎn)品。每一個產(chǎn)品的名稱和單價屬性在P元素中。創(chuàng)建購物車：ShoppingCartNameQuantityPriceTotal:$0Dropheretoaddtocart使用datagrid顯示購物籃項目。拖曳產(chǎn)品副本$(.item).draggable(revert:true,proxy:clone,onStartDrag:function()$(this).draggable(options).cursor=not-allowed;$(this).draggable(proxy

15、).css(z-index,10);,onStopDrag:function()$(this).draggable(options).cursor=move;);我們設(shè)置draggable屬性proxy為clone，所以拖曳元素使用clone效果。將選擇的產(chǎn)品放入購物車$(.cart).droppable(onDragEnter:function(e,source)$(source).draggable(options).cursor=auto;,onDragLeave:function(e,source)$(source).draggable(options).cursor=not-allo

16、wed;,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.rowsi;if(=name)row.quantity+=

17、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);當(dāng)放下產(chǎn)品時，我們得到產(chǎn)品的名稱和單價，然后調(diào)用addProduct函數(shù)更新購物籃。3創(chuàng)建課程表本教程顯示了如何使用jQueryeasyui創(chuàng)建課程表。我們創(chuàng)建兩個表：在左面的課程列表和右面的時間表。你可以拖課程到時間表的單元格中。課程是元素，時

18、間格是元素。顯示課程EnglishScience顯示時間表MondayTuesdayWednesdayThursdayFriday08:00拖動左面的課程$(.left.item).draggable(revert:true,proxy:clone);放置課程到時間表中$(.righttd.drop).droppable(onDragEnter:function()$(this).addClass(over);,onDragLeave:function()$(this).removeClass(over);,onDrop:function(e,source)$(this).removeClas

19、s(over);if($(source).hasClass(assigned)$(this).append(source);elsevarc=$(source).clone().addClass(assigned);$(this).empty().append(c);c.draggable(revert:true););當(dāng)用戶拖動左面的課程到右面的時間表中，onDrop函數(shù)被調(diào)用。源元素的副本被從左面拖動并且附加到到時間表的單元格中。當(dāng)放置課程到時間表的單元格到另一個單元格時，簡單的移動它。4菜單和按鈕MenuandButton4.1建立簡單菜單4.2建立鏈接按鈕4.3建立菜單按鈕4.4建立分

20、割按鈕4.1創(chuàng)建簡單菜單在DIV標記中定義菜單。像這樣：NewOpenWordExcelPowerPointSaveExit建立菜單，你需要運行下列jQuery代碼$(#mm).menu();/或者$(#mm).menu(options);當(dāng)菜單被創(chuàng)建時是不可見的，可使用show方法顯示或者hide方法隱藏：$(#mm).menu(show,left:200,top:100);現(xiàn)在，我們創(chuàng)建菜單并在（200,100）處顯示。運行代碼會得到：4.2創(chuàng)建連接按鈕通常使用元素創(chuàng)建按鈕。鏈接按鈕使用A元素創(chuàng)建，事實上，鏈接按鈕是A元素但顯示為按鈕樣式。創(chuàng)建鏈接按鈕，首先創(chuàng)建A元素：DEMO1Cance

21、lRefreshQuerytextbuttonPrintDEMO2CancelRefreshQuerytextbuttonPrinticon屬性是iconCSS類是在按鈕上顯示的圖標。運行代碼，出現(xiàn)：一些時候，你可以決定禁用或者不禁用連接按鈕，使用下面的代碼可以禁用連接圖標：$(selector).linkbutton(disabled:true);4.3建立菜單按鈕菜單按鈕包含按鈕和菜單兩部分，當(dāng)點擊或者移動鼠標到按鈕上的時候，顯示相應(yīng)的菜單。定義菜單按鈕，需要定義鏈接按鈕和菜單，像這樣：EditHelpUndoRedoCutCopyPasteDeleteSelectAllHelpUpdat

22、eAbout使用下列jQuery代碼：$(#mb1).menubutton(menu:#mm1);$(#mb2).menubutton(menu:#mm2);現(xiàn)在，菜單按鈕就完成了。4.4建立拆分按鈕拆分按鈕包括鏈接按鈕和菜單。當(dāng)用戶點擊或者懸停在下箭頭區(qū)域時顯示相關(guān)菜單。這個例子是建立拆分按鈕的演示：首先，創(chuàng)建一個鏈接按鈕和菜單標記：EditUndoRedoCutCopyPasteOpenFirefoxInternetExplorerSelectProgram.DeleteSelectAlljQuery代碼：$(#sb).splitbutton(menu:#mm);運行后會出現(xiàn)：版面創(chuàng)建邊框

23、版面面板上的復(fù)合版面建立可折疊版面建立TABS動態(tài)添加TABS建立XP樣式左面板5創(chuàng)建邊框版面網(wǎng)頁邊框版面提供5個區(qū)域：東西南北中（其實就是上下左右中），下面是通常用法：5.1北區(qū)可以用于網(wǎng)站banner5.2南區(qū)可以用于版權(quán)信息和注釋5.3西區(qū)可以用于導(dǎo)航菜單5.4東區(qū)可以用于推廣項目5.5中區(qū)可以用于主內(nèi)容運用版面，需要確認版面容器然后定義一些區(qū)域。版面至少要有一個中間區(qū)域。下列是版面例子：Selectlanguage:JavaC#VBErlang我們使用DIV容器創(chuàng)建邊框版面。版面拆分容器為2部分，左面是導(dǎo)航菜單右面是主內(nèi)容。中間區(qū)域的面板，我們設(shè)置href屬性以調(diào)用出示網(wǎng)頁。運行l(wèi)ay

24、out.html的結(jié)果是：寫下onclick事件控制函數(shù)以獲取數(shù)據(jù)，showpage函數(shù)非常簡單：functionshowpage(url)$(#content).load(url);5.1面板上的復(fù)合版面面板允許你建立為多用戶定制版面。這個例子我們建立MSN信息框，通過面板版面插件：我們使用多種版面在面板區(qū)域中。最上面的信息框我們放置搜索input，也可以放置頭像在右面。中間區(qū)域我們差分成兩部分通過split屬性為TRUE，允許用戶改變面板上區(qū)域的大?。捍a：Search:Hi,Iameasyui.我們不需要編寫任何js代碼，但是擁有強大的用戶接口設(shè)計的能力。5.2建立可折疊版面這個教程中，

25、我們學(xué)習(xí)關(guān)于easyui可折疊性。可折疊包括一系列面板。所有面板頭是全部可見的，但是在一個時期內(nèi)只有一個面板的body內(nèi)容是可見的。當(dāng)用戶點擊面板頭，body內(nèi)容變?yōu)榭梢娖渌姘錬ody內(nèi)容變得不可見。AccordionforjQueryAccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.easyuihelpyoubuildyourwebpageeasilyFolder1SubFolder1File11File12File13File2File3F

26、ile2我們建立3個面板，第三個面板內(nèi)容是一個樹狀菜單。5.3建立TABS這個教程顯示你如何使用easyui建立tabs組件。tabs有多個面板，這些面板能被動態(tài)的添加或者刪除。你可以使用tabs來顯示不同的實體。在一個時間內(nèi)只顯示一個面板。每一個面板擁有title，icon和close按鈕。當(dāng)tabs被選擇時，相關(guān)面板的內(nèi)容被現(xiàn)實。tabs從HTML標記創(chuàng)建，包含DIV容器和一些DIV面板。FirstTabSecondTabThirdTab我們創(chuàng)建3個面板的tabs組件，第二個和第三個面板可以通過點擊close按鈕關(guān)閉。5.4動態(tài)添加tabs你只需調(diào)用add方法，就可以使用jqueryeas

27、yui很容易動態(tài)添加tabs。在這個教程中，我們動態(tài)的添加顯示一個頁面使用iframe。當(dāng)點擊添加add按鈕，新tab被添加。如果tab已經(jīng)存在，被激活。第一步：建立tabsgooglejqueryeasyuiHTML代碼很簡單，我們創(chuàng)建tabs用一個tab面板，名字為home。記住，我們不需要寫任何js代碼。第二步：使addTab函數(shù)生效functionaddTab(title,url)if($(#tt).tabs(exists,title)$(#tt).tabs(select,title);elsevarcontent=;$(#tt).tabs(add,title:title,conten

28、t:content,closable:true);我們使用exists方法判斷tab是否存在。如果存在，則激活tab。調(diào)用add方法添加新tab面板。5.5創(chuàng)建XP式樣左面板通常，瀏覽文件夾在windowsXP中有左面板，包括常用任務(wù)內(nèi)容。這個教程顯示你如何使用easyui面板插件建立XP左面板。定義幾個面板我們幾個面板顯示一些任務(wù)，每個面板僅可以折疊和展開工具按鈕。代碼像這樣：ViewasaslideshowOrderprintsonlinePrintpicturesMakeanewfolderPublishthisfoldertotheWebSharethisfolderNewYorkMy

29、PicturesMyComputerMyNetworkPlacesMydocumentsFilefolderDatemodified:Oct.3rd2010視圖效果是不是我們想要的，我們必須改變面板header背景圖片和收縮按鈕icon。定制面板外觀效果做到這一點并不難，我們需要做的是重新定義一些CSS。.panel-headerbackground:#fffurl(panel_header_bg.gif)no-repeattopright;.panel-bodybackground:#f0f0f0;.panel-tool-collapsebackground:url(arrow_up.gif

30、)no-repeat0px-3px;.panel-tool-expandbackground:url(arrow_down.gif)no-repeat0px-3px;當(dāng)使用easyui定義用戶接口時是很簡單的。6DataGrid數(shù)據(jù)格6.1轉(zhuǎn)換HTML表格到DataGrid6.2給DataGrid添加分頁6.3從DataGrid中獲得選定行的數(shù)據(jù)6.4添加工具欄到DataGrid6.5DataGrid凍結(jié)列6.6動態(tài)改變DataGrid列6.7格式化DataGrid列6.8添加DataGrid的分類6.9在DataGrid中建立列組6.10在DataGrid中選擇復(fù)選框6.11定制DataGr

31、id頁面6.12使DataGrid能行嫩編輯6.13合并DataGrid單元格6.1轉(zhuǎn)換HTML表格到DataGrid這個例子顯示如何轉(zhuǎn)換表格到DataGrid。DataGrid在thead標記中定義列，在tbody標記中定義數(shù)據(jù)。確定給每一個數(shù)據(jù)列設(shè)置字段名，看這個例子：Col1Col2Col3Col4Col5Col6Data1Data2Data3Data4Data5Data6Data1Data2Data3Data4Data5Data6Data1Data2Data3Data4Data5Data6Data1Data2Data3Data4Data5Data6不需要js代碼就能看到這個效果：當(dāng)然，

32、你也可以定義復(fù)合表頭，像這樣：Col1Col2Col3DetailsCol4Col5Col66.2給DataGrid添加分頁這個例子顯示如何能從服務(wù)器中調(diào)用數(shù)據(jù)，如何添加分頁到DataGrid中。從遠程服務(wù)器中調(diào)用數(shù)據(jù)，你必須設(shè)置url屬性，服務(wù)器應(yīng)該返回JSON格式數(shù)據(jù)。獲得更多數(shù)據(jù)格式，請參考DataGrid文檔。建立標記首先，我們在網(wǎng)頁上定義標記。jQuery代碼然后，寫一些jQuery代碼建立DataGrid組件$(#tt).datagrid(title:LoadData,iconCls:icon-save,width:600,height:250,url:/demo3/data/ge

33、tItems,columns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60,pagination:true);我們定義DataGrid列并且

34、設(shè)置pagination屬性為true，這樣可以在DataGrid上產(chǎn)生分頁欄按鈕。分頁發(fā)送2個參數(shù)到服務(wù)器。page:頁號，從1開始。rows:每頁的列數(shù)。我們使用HYPERLINK/p/etmvc/etmvcframework編寫后臺服務(wù)代碼，所以，url被映射到DataController類和getItems方法。定義數(shù)據(jù)模型的例子Table(name=item)publicclassItemextendsActiveRecordBaseIdpublicStringitemid;ColumnpublicStringproductid;Columnpublicjava.math.BigDe

35、cimallistprice;Columnpublicjava.math.BigDecimalunitcost;ColumnpublicStringattr1;ColumnpublicStringstatus;編寫控制代碼publicclassDataControllerextendsApplicationController/*getitemdata*parampagepageindex*paramrowsrowsperpage*returnJSONformatstring*throwsException*/publicViewgetItems(intpage,introws)throwsE

36、xceptionlongtotal=Item.count(Item.class,null,null);Listitems=Item.findAll(Item.class,null,null,null,rows,(1)*rows);Mapresult=newHashMap();result.put(total,total);result.put(rows,items);returnnewJsonView(result);數(shù)據(jù)庫配置實例domain_base_class=com.et.ar.ActiveRecordBasecom.et.ar.ActiveRecordBase.adapter_cla

37、ss=com.et.ar.adapters.MySqlAdaptercom.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Drivercom.et.ar.ActiveRecordBase.url=jdbc:mysql:/localhost/jpetstorecom.et.ar.ActiveRecordBase.username=rootcom.et.ar.ActiveRecordBase.password=soft123456com.et.ar.ActiveRecordBase.pool_size=0部署建立MySQL數(shù)據(jù)庫從/db/it

38、em.sql導(dǎo)入測試表數(shù)據(jù)，表名是item.按需要改變數(shù)據(jù)庫配置，配置文件在/WEB-INF/classes/perties中。運行程序6.3得到DataGrid選擇行這個例子顯示了如何得到選擇行的數(shù)據(jù)。DataGrid組件包括2個方法檢索選擇行數(shù)據(jù)：getSelected:得到第一個選擇行的數(shù)據(jù)，如果沒有選擇行則返回null否則返回該記錄getSelections:得到全部的選擇行的數(shù)據(jù)，如果元素是記錄的話，返回數(shù)組數(shù)據(jù)創(chuàng)建標記創(chuàng)建datagrid$(#tt).datagrid(title:LoadData,iconCls:icon-save,width:600,height:250,url

39、:datagrid_data.json,columns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60);用法演示得到選擇行數(shù)據(jù)：varrow

40、=$(#tt).datagrid(getSelected);if(row)alert(ItemID:+row.itemid+nPrice:+row.listprice);得到全部選擇行的itemid:varids=;varrows=$(#tt).datagrid(getSelections);for(vari=0;irows.length;i+)ids.push(rowsi.itemid);alert(ids.join(n);6.4添加工具欄到DataGrid這個例子顯示了如何添加工具欄：DataGrid插件有工具欄屬性，這個屬性可以定義工具欄。工具欄包括定義了下列屬性的按鈕：text:在按鈕

41、上顯示的文本iconCls:定義背景圖標顯示在按鈕的左面的CSS類。handler:當(dāng)用戶按下按鈕時，處理一些事情的函數(shù)標記jQuery$(#tt).datagrid(title:DataGridwithToolbar,width:550,height:250,url:datagrid_data.json,columns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:uni

42、tcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60,toolbar:text:Add,iconCls:icon-add,handler:function()alert(add),text:Cut,iconCls:icon-cut,handler:function()alert(cut),-,text:Save,iconCls:icon-save,handler:function()alert(save);6.5Data

43、Grid凍結(jié)列這個例子演示了如何凍結(jié)列。當(dāng)用戶水平滾動的時候，凍結(jié)列不能滾動出視圖。凍結(jié)列，你應(yīng)該定義frozenColumns屬性，這個屬性和columns屬性相似。$(#tt).datagrid(title:FrozenColumns,iconCls:icon-save,width:500,height:250,url:datagrid_data.json,frozenColumns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,columns:field:listprice,titl

44、e:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60);6.6動態(tài)改變DataGrid列DataGrid列可以使用columns屬性定義。如果你想動態(tài)改變列，也沒問題。改變列你可以重新調(diào)用DataGrid方法平且傳遞新columns屬性。下面定義DataGrid組件$(#tt).datagrid(title:ChangeColumns,i

45、conCls:icon-save,width:550,height:250,url:datagrid_data.json,columns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:attr1,title:Attribute,width:200,field:status,title:Status,width:80);運行網(wǎng)頁，我們看到：通常，我們想改變列，你可以寫這些代碼：$(#tt).datagrid(columns:field:itemid,title:ItemID,wi

46、dth:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60);記住，我們已經(jīng)定義其他屬性，比如：url，width，height等，我們不需要重復(fù)定義他們，我們定義我們想改變的。6.7格式化DataGrid列下

47、面的例子是在easyuiDataGrid中格式化列，如果單價低于20，則使用定義列formatter為紅色文本。格式化DataGrid列，我們應(yīng)該設(shè)置formatter屬性，這個屬性是一個函數(shù)。格式化函數(shù)包括兩個參數(shù)：value:顯示字段當(dāng)前列的值record:當(dāng)前行記錄數(shù)據(jù)MarkupjQuery$(#tt).datagrid(title:FormattingColumns,width:550,height:250,url:datagrid_data.json,columns:field:itemid,title:ItemID,width:80,field:productid,title:P

48、roductID,width:80,field:listprice,title:ListPrice,width:80,align:right,formatter:function(val,rec)if(val20)return(+val+);elsereturnval;,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60);6.8添加排序到DataGrid這個事例演示了如何在點擊列頭的時候排序Data

49、Grid中全部的列可以通過點擊列頭被排序。你可以定義可以被排序的列。默認的，列不能被排序除非你設(shè)置sortable屬性為TRUE，下面是例子：標記jQuery$(#tt).datagrid(title:SortableColumn,width:550,height:250,url:/demo4/data/getItems,columns:field:itemid,title:ItemID,width:80,sortable:true,field:productid,title:ProductID,width:80,sortable:true,field:listprice,title:List

50、Price,width:80,align:right,sortable:true,field:unitcost,title:UnitCost,width:80,align:right,sortable:true,field:attr1,title:Attribute,width:100,field:status,title:Status,width:60,pagination:true,sortName:itemid,sortOrder:asc);我們定義一些可排序的列，包括itemid，productid，listprice，unitcost等。attr1列和status列不能被排序。我們設(shè)

51、置默認排序列：itemid，按asc（升序）排序。當(dāng)排序時，DataGrid發(fā)送兩個參數(shù)到服務(wù)器：sort:排序列字段名order:排序次序：asc或desc,默認為asc.我們使用HYPERLINK/p/etmvc/etmvcframework寫后臺服務(wù)器代碼，首先定義數(shù)據(jù)模型Table(name=item)publicclassItemextendsActiveRecordBaseIdpublicStringitemid;ColumnpublicStringproductid;Columnpublicjava.math.BigDecimallistprice;Columnpublicjav

52、a.math.BigDecimalunitcost;ColumnpublicStringattr1;ColumnpublicStringstatus;寫控制代碼：publicclassDataControllerextendsApplicationController/*getitemdata*parampagepagenumber*paramrowspagesize*paramsortsortcolumnfieldname*paramordersortorder,canbeascordesc*returnJSONformatstring*throwsException*/publicView

53、getItems(intpage,introws,Stringsort,Stringorder)throwsExceptionlongtotal=Item.count(Item.class,null,null);Listitems=Item.findAll(Item.class,null,null,sort+order,rows,(1)*rows);Mapresult=newHashMap();result.put(total,total);result.put(rows,items);returnnewJsonView(result);我們使用MySQL數(shù)據(jù)庫存儲演示數(shù)據(jù)，下面是配置實例：d

54、omain_base_class=com.et.ar.ActiveRecordBasecom.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdaptercom.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Drivercom.et.ar.ActiveRecordBase.url=jdbc:mysql:/localhost/jpetstorecom.et.ar.ActiveRecordBase.username=rootcom.et.ar.ActiveRecord

55、Base.password=soft123456com.et.ar.ActiveRecordBase.pool_size=0部署建立MySQL數(shù)據(jù)庫從/db/item.sql導(dǎo)入測試表數(shù)據(jù)，表名是item.按需要改變數(shù)據(jù)庫配置，配置文件在/WEB-INF/classes/perties中。運行程序6.9在DataGrid上的復(fù)選框本教程顯示了你如何放置checkbox列。使用checkbox，用戶可以選定/取消數(shù)據(jù)行。添加checkbox列，我們簡單的添加列的checkbox屬性，并且設(shè)置為true。代碼像這樣：$(#tt).datagrid(title:CheckboxSelect,icon

56、Cls:icon-ok,width:600,height:250,url:datagrid_data.json,idField:itemid,columns:field:ck,checkbox:true,field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:

57、Attribute,width:100,field:status,title:Status,width:60,pagination:true);上面的代碼，我們可以添加列的checkbox屬性，然后他就會出現(xiàn)選擇列。如果idField屬性被設(shè)置，DataGrid的選擇會被不同的頁保持。6.10自定義DataGrid分頁DataGrid內(nèi)建分頁能力是強大的，它比自定義相對容易。在這個教程，我們將要創(chuàng)建DataGrid并且在頁面工具欄中添加一些自定義按鈕。標記創(chuàng)建DataGrid$(#tt).datagrid(title:LoadData,iconCls:icon-save,width:550,h

58、eight:250,pagination:true,url:datagrid_data.json,columns:field:itemid,title:ItemID,width:80,field:productid,title:ProductID,width:80,field:listprice,title:ListPrice,width:80,align:right,field:unitcost,title:UnitCost,width:80,align:right,field:attr1,title:Attribute,width:100,field:status,title:Status

59、,width:60);記住設(shè)置pagination屬性為true產(chǎn)生頁面工具欄。自定義頁面工具欄varpager=$(#tt).datagrid(getPager);/得到DataGrid頁面pager.pagination(showPageList:false,buttons:iconCls:icon-search,handler:function()alert(search);,iconCls:icon-add,handler:function()alert(add);,iconCls:icon-edit,handler:function()alert(edit);,onBeforeRef

60、resh:function()alert(beforerefresh);returntrue;);我們得到DataGrid頁，然后重新構(gòu)建頁面。我們隱藏頁列表然后添加新按鈕。6.11使DataGrid能編輯可編輯特征是最近添加的。它能讓用戶添加新行。用戶也可以更新一行或多行。這個教程顯示了如何創(chuàng)建使用行內(nèi)編輯的DataGrid。創(chuàng)建DataGrid$(#tt).datagrid(title:EditableDataGrid,iconCls:icon-edit,width:660,height:250,singleSelect:true,idField:itemid,url:datagrid_d