Easyui datagrid自定義排序

2022-03-13 10:12:04 字數 1344 閱讀 3296

做專案遇到個關於排序問題,想著在前端排序,正好easyui有這個功能,所以就拿來用了一下,因為跟官網的demo不太一樣,所以總結一下;

首先這一列是要排序的列(當然,在生產環境,這一列是隱藏的,在開發階段,我沒有隱藏而已),不用多說可定是ceo排在最上面,leader排在中間,employee排後面,預設的順序是這樣的;

然後我在該列加乙個配置

就是 sortable:true 的配置,這個配置告訴datagrid表示這類是可以排序的,同時在這列的表頭多了乙個排序按鈕,就像這樣

當出現這個箭頭的時候;你可以點選一下,然後就可以排序了,但這並不是最終的目的,我們的目地是一開始就要排序好,而不是手動再去點點;

於是在datafrid中配置

onsortcolumn方法;該方法,就是排序的方法
onsortcolumn: function

(sort, order)

,當你新增過該方法後,你再去點選,那個排序按鈕,就會出現

第乙個值是排序的字段,第二個值是排序的順序 倒敘 ,或者降序;

有了這個之後 ,在datafrid中配置

sortname:'position',

sortorder:'desc',

sortname就是你要排序的欄位名;
sortorder就是排序的數序;

好的,上面的都配置好了之後就要開始寫自定義排序函式了,如下

,
請注意sorter方法,這個方法有兩個引數,接下來就對這個引數就行判斷吧,我這裡使用長度來判斷的,短的排在上面,你們可以根據自己實際需求進行排序,再次重新整理頁面,直接就是排序好的**了

最後,需要做的就是將這一列隱藏就好了(當然根據個人需要!)

重點要說一下的就是,建議首先寫sorter方法,這裡定義了你排序的條件,有了這個條件之後,再去定義排序的規則(正/逆),就可以了!

EasyUI datagrid 使用小結

用了easyui框架一段時間了,這個前端框架用起來還是挺方便的,也有很多現成的控制項,看看官方文件應該還是能比較快用起來的。在這裡記錄一下一些常用的控制項的方法,遇到過的bug或者當初耗了一點時間來實現的功能吧。var pager dg datagrid getpager 獲取分頁 物件 var p...

easyui datagrid 多表頭設定

最近在做二維報表,要求報表的表頭自定義。在網上找了好久二維報表的外掛程式,一直找不到合適的。後來就用easyui 中的datagrid替代了一下。根據實際需求,統計的資訊可能不是乙個模組中的字段資訊,所以需要把模組和模組下的字段都顯示出來,這就用到了 中的合併單元格,但是在datagrid中如何實現...

easyUI datagrid 前端真分頁

前文再續,書接上一回。easyui datagrid 前端假分頁 真分頁是easyui datagrid 的預設方式。所謂真分頁,就是後台傳給前端的資料,真的是分頁後的資料。而假分頁,是全部資料。easyui datagrid 向後台請求資料的時候,會自動將頁號 page 每頁數量 rows 作為引...