easyui中的datagrid使用起來,確實還是挺輕巧方便,但是其中也有不少的問題,尤其遇到客戶的一些特殊的需求時往往實現得不是很好。這個時候就需要我們自己動手來修改easyui的源碼了。easyui的源碼我也稍有閱讀,其中的設計方式確實是相當巧妙,但是給人最大的感受是源碼中的變量方法名都是用的沒有意義的數字和字母,這對於閱讀源碼確實比較的麻煩。
說了這么多,直入主題吧,我們最近在給某保險公司做一個財務系統,因為是財務系統,就得經常用到列表,而且財務會計他們要求的列表格式又是相當的苛刻。前不久,客戶就發現我們開發的列表,內容和標題要么都居中,要么都居左居右,這讓客戶覺得十分的不爽。因為他們用Excel標題都是居中的,文字內容可能居左,數字一般居右。
這個需求,一提出來,我們試着到網上去查,但是查到這方面的解決方案基本上也不能解決問題。於是組長就讓我放下手頭的工作,着手解決這個問題。沒有辦法,只能硬着頭皮去讀easyui的源碼。經過一個下午的研究,發現之所以datagrid標題和內容對齊方式一樣,肯定有個地方來設置標題或者內容的對齊方式。功夫不負有心人,終於找到了設置對齊方式的代碼。
1 // 因為默認的標題對齊方式是跟內容對齊方式是一樣的,因為代碼寫在這里
2 cell.css("text-align",(col.halign||col.align||""));
從上面的代碼可以看出標題的居中方式,跟內容的對齊方式是一樣的,如何解決呢。我們不能將對齊方式寫死在源碼中,必須要能在column中設置。相當於給columns中加上一個屬性,這就好辦了。
1 // 標題居中字段
2 cell.css("text-align",col.titleAlign||"center"); 3 //在field中設置
4 {field:'SUBJECT_ID',title:'科目代碼',width:100,align:'center',col.titleAlign: true,sortable:true}
就這樣,我們就給field加上了一個屬性,並且用這個屬性來控制datagrid按照我們的想法工作,這給了我們一個修改easyui源碼的思路。
下一篇:datagird數字排序問題