最近的項目用到的是jqgrid作爲表格控件,有一個頁面因爲加載大量的數據,導致可能需要加載一秒到兩秒的時間,頁面就會展示一個"加載中...",因爲字相對於表格來說實在是太小了,所以想動手修改一下這個提示。原本大小大概就是這麼大:
首先引用jqgrid只需要一個jqgrid的js和css,查閱css發現jqgrid有一個默認的參數配置(對於中文jqgrid)
defaults : {
recordtext: "{0} - {1}\u3000共 {2} 條", // 共字前是全角空格
emptyrecords: "無數據顯示",
loadtext: "讀取中...",
savetext: "Saving...",
pgtext : " {0} 共 {1} 頁",
pgfirst : "First Page",
pglast : "Last Page",
pgnext : "Next Page",
pgprev : "Previous Page",
pgrecs : "Records per Page",
showhide: "Toggle Expand Collapse Grid",
// mobile
pagerCaption : "Grid::Page Settings",
pageText : "Page:",
recordPage : "Records per Page",
nomorerecs : "No more records...",
scrollPullup: "Pull up to load more...",
scrollPulldown : "Pull down to refresh...",
scrollRefresh : "Release to refresh..."
}
loadtext就是加載中展示的文字,那麼有一個方案就是直接進行修改這個提示文字,比如加上<h1>標籤或者是style進行加樣式等等。缺陷在於會同時修改掉所有的引用jqgrid的頁面,查閱js文件,發現調用loadtext的地方
也就是說如果只有某個頁面需要修改樣式在加載表格之前去修改掉defaults裏面的loadtext即可。
$.jgrid.defaults.loadtext= '<h2>加載中...</h2>';
實現效果如下:
後記
查閱源碼、修改源碼、理解原理都是一個優秀程序員的必經之路,雖然本文章只是簡單的介紹了jqgrid的一個默認樣式修改,但是多數的修改源碼都可以套用這個思維模式一步步進行在源碼查找實現並進行修改成自己想要的樣子。開源萬歲