【正文】 (pageNumber, pageSize){ $(this).pagination(39。loading39。)。 alert(39。pageNumber:39。+pageNumber+39。,pageSize:39。+pageSize)。 $(this).pagination(39。loaded39。)。 } })。 })。 /script /head body h1Pagination/h1 div style=margin: 10px 0。a href= onclick=javascript:$(39。pp39。).pagination({loading:false})loaded/a a href= onclick=javascript:$(39。pp39。).pagination({loading:true})loading/a /div div id=pp style=width: 500px。 background: efefef。 border: 1px solid ccc。/div /body /html 效果圖 參數(shù) 屬性名 類型 描述 默認(rèn)值 jquery easyui中文培訓(xùn)文檔 23 total 數(shù)字 當(dāng)分頁建立時設(shè)置記錄的總數(shù)量 1 pageSize 數(shù)字 每一頁顯示的數(shù)量 10 pageNumber 數(shù)字 當(dāng)分頁建立時，顯示的頁數(shù) 1 pageList 數(shù)組 用戶可以修改每一頁的大小， pageList屬性定義了多少種大小可以改變 . [10,20,30,50] loading 布爾 定義數(shù)據(jù)是否正在加載 false buttons 數(shù)組 定義自定義按鈕，每個按鈕包含兩個屬性： iconCls: 顯示背景圖像的 CSS類 handler: 當(dāng)一個按鈕被點(diǎn)擊時的處理函數(shù) null showPageList 布爾 定義是否顯示頁面列表 true showRefresh 布爾 定義是否顯示刷新按鈕 true beforePageText 字符串 在輸入框組件前顯示的標(biāo)簽 Page afterPageText 字符串 在輸入框組件后顯示的標(biāo)簽 Of {pages} displayMsg 字符串 顯示一個頁面的信息。 Displaying {from} {to} of {total} items 事件 事件名 參數(shù) 描述 onSelectPage pageNumber, pageSize 當(dāng)用戶選擇一個新頁時觸發(fā)，回調(diào)函數(shù)包含兩個參數(shù)： pageNumber: 新頁面的頁數(shù) pageSize: 新頁面的大小 onBeforeRefresh ageNumber, pageSize 刷 新按鈕被點(diǎn)擊之前觸發(fā)，如果返回 false 則取消刷新操作 onRefresh ageNumber, pageSize 刷 新以后觸發(fā) onChangePageSize ageSize 改變頁面大小時觸發(fā) 9 Window（窗口） 窗口的主要用法和面板（ panel）用法差不多 實(shí)例 代碼 !DOCTYPE html PUBLIC //W3C//DTD HTML Transitional//EN html style=height:100%。width:100%。 head meta equiv=ContentType content=text/html。 charset=UTF8 titleInsert title here/title jquery easyui中文培訓(xùn)文檔 24 link rel=stylesheet type=text/css href=../themes/default/ link rel=stylesheet type=text/css href=../themes/ script function resize(){ $(39。w39。).window({ title: 39。yewen239。, width: 600, collapsible:false, minimizable:false, maximizable:false, closable:false, closed: false, height: 300, draggable:false, resizable:false, shadow:false, modal:true })。 } function open1(){ $(39。w39。).window(39。open39。)。 } function close1(){ $(39。w39。).window(39。close39。)。 } function test(){ $(39。test39。).window(39。open39。)。 } /script /head body style=height: 100%。 width: 100%。 overflow: hidden。 border: none。 h1Window/h1 diva href=javascript:void(0) onclick=resize()resize/a a href=javascript:void(0) onclick=open1()open/a a href=javascript:void(0) onclick=close1()close/a/div div id=w class=easyuiwindow title=My Window icon=iconsave style=width: 500px。 height: 200px。 padding: 5px。 background: fafafa。 div class=easyuilayout fit=true div region=center border=false style=padding: 10px。 background: fff。 border: 1px solid ccc。 jquery easyui中文培訓(xùn)文檔 25 jQuery EasyUI framework help you build your web page easily. br / br / click a href= onclick=test()here/a to popup another window./div div region=south border=false style=text align: right。 height: 30px。 lineheight: 30px。a class=easyuilinkbutton icon=iconok href=javascript:void(0) onclick=resize()Ok/a a class=easyuilinkbutton icon=iconcancel href=javascript:void(0) onclick=resize()Cancel/a /div /div /div div id=test class=easyuiwindow closed=true modal=true title=Test Window style=width: 300px。 height: 100px。/div /body /html 效果圖 jquery easyui中文培訓(xùn)文檔 26 參數(shù) 大多數(shù)的屬性和面板 (panel)的屬性是相同的，下面列出一些 Window私有的屬性： 屬性名 類型 描述 默認(rèn)值 zIndex 數(shù)字 窗口的 zindex屬性，可以通過這個屬性來增加 9000 draggable 布爾 定義窗口是否可被拖動 true resizable 布爾 定義窗口是否可以被改變大小 true shadow 布爾 如果設(shè)置為 true，窗口的陰影也將顯示。 true modal 布爾 定義窗口是否是一個模式窗口。 false Window也重寫了 Panel里的一些屬性 屬性名 類型 描述 默認(rèn)值 title 字符串 窗口的標(biāo)題文本 New Window collapsible 布爾 定義是否顯示可折疊定義按鈕 true minimizable 布爾 定義是否顯示最小化按鈕 true maximizable 布爾 定義是否顯示最大化按鈕 true closable 布爾 定義是否顯示關(guān)閉按鈕 true 事件 Window的事件和面板 (panel)的事件相同 方法 除了 ”header”和 ”body”以外， Window的函數(shù)方法和面板 (panel)的相同 10 Panel（面板） 實(shí)例 代碼 html head meta equiv=ContentType content=text/html。 charset=UTF8 titlejQuery EasyUI/title link rel=stylesheet type=text/css href=../themes/default/ link rel=stylesheet type=text/css href=../themes/ script function open1(){ $(39。p39。).panel(39。open39。)。 jquery easyui中文培訓(xùn)文檔 27 } function close1(){ $(39。p39。).panel(39。close39。)。 } function load1(){ $(39。p39。).panel({ href:39。39。 })。 $(39。p39。).panel(39。open39。)。 } /script /head body style=background: fafafa。 h1Panel/h1 div style=marginbottom: 10px。a href= onclick=open1()open/a a href= onclick=close1()close/a a href= onclick=load1()load/a /div div style=width: 600px。 height: 300px。 border: 1px solid red。 padding: 5px。 div id=p class=easyuipanel title=My Title icon=iconsave collapsible=true minimizable=true maximizable=true closable=true style=width: 500px。 height: 150px。 padding: 10px。 background: fafafa。 ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p ppanel/p /div /div /body /html jquery easyui中文培訓(xùn)文檔 28 效果圖 參數(shù) 名字 類型 描述 默認(rèn)值 title 字符串 在面板頭部顯示的標(biāo)題文本 null iconCls 字符串 一個 CSS類來顯示在面板中的 16x16圖標(biāo) null width 數(shù)字 設(shè)置面板的寬度 auto height 數(shù)字 設(shè)置面板的高度 auto left 數(shù)字 設(shè)置面板左側(cè)位置 null top 數(shù)字 設(shè)置面 板的頂部位置 null cls 字符串 給面板添加一個 CSS類 null headerCls 字符串 給面板頭部添加一個 CSS類 null bodyCls 字符串 給面板主體添加一個 CSS類 null style 對象 給面板自定義樣式 {} fit 布爾 當(dāng)設(shè)置為 true，面板尺寸將適合它的父容器。 false border 布爾 定義面板的邊框 tr