Pages

2015-12-11

為EasyUI Pagination的Nav按鈕加上文字

EasyUI Pagination分頁控件的Nav按鈕列預設只有Icon圖示,沒有顯示文字,其缺點除了Icon配色不易外,寬度太窄滑鼠不好點按。尤其在前端顯示時,通常會使用plain=true(去框)的分頁效果,不加上文字實在更不好點。
 
分頁器的Nav按鈕是使用linkbutton控件做成的,它本身就有提供text屬性來顯示文字,只是預設沒有顯示它。由於Pagination控件官方沒有提供src源碼,因此只能從minify混淆過的js程式碼加入此功能。由於加上文字又牽扯到各國語言化的問題,我懶得牽一髮動全身,因此直接改/plugins/jquery.pagination.js,若需要顯示文字時再額外include該js即可。

以下是修改步驟做法:
  1. 開啟/plugins/jquery.pagination.js檔案,搜尋「$.fn.pagination.defaults={」字串(約252行),在它的預設button屬性定義後方加入一個控制變數showNavIcon,上方parser函式也加入定義(250行)。

     
  2. 搜尋「nav:{first:」字串(約256行),加入下方紅框text屬性值,並類推修改下方First,Prev,Next,Last,Refresh共5個text屬性值。


  3. 搜尋「a.linkbutton({iconCls:」字串(約112行),加入下面紅框2處,即當showNavIcon=false時,則不顯示icon,而text文字就看步驟2的定義。


  4. 儲存js檔案,在前端html頁面的easyui.min.js後加入pagination.js來重載(override).


  5. 分頁器的設定值可加上showNavIcon值,達到控制Icon是否顯示的效果。


  6. 最後html配上重載配色的linkbutton.css,pagination.css等相關的css值,即可達到前端分頁視覺效果。

No comments: