easyui實現datagrid數字排序問題

我們在使用easyui對列進行自動排序的時候（即順序倒序），正常情況下是通過設定field中的sortable:true屬性來控制是否可以排序。但是我們會發現乙個有趣的問題，在對數字進行排序的時候，這個排序功能不怎麼好用，當我們對一列金額進行從小到大進行排序，例如1000,200,30,9000。排在最前面的竟然是1000，然後是200,30,9000。這就無法達到我們的要求。

為什麼會出現這種情況，想想應該能發現肯定是easyui排序功能不是按照我們想要的方式進行排序。這個時候我們就可以去閱讀easyui的原始碼，不要害怕這一大堆的原始碼，硬著頭皮去讀，當然也有一些技巧，例如先搜尋datagird這種元件名，然後搜尋對應的屬性名sortable，然後就去找其中的實現方式。這個當然還是需要一定的耐心和一定的閱讀**的功底。

就不說我是如何找到datagrid實現排序的**，直接上**：

1
if(opt);

這段**中_4a3=opt.sorter||function()的意思是指定col的排序方式，可以在options中定義對應的排序方式，如果沒有定義就使用預設的排序方式。預設的排序方式就是比較兩個元素的大小a>b?1:-1;我們可以給ab賦值，做一下實驗。a=12,b=5按照大於返回1，實際上也是返回1。按理說應該是可以進行排序的，但是為什麼沒能實現排序，問題就處在a和b的型別上。datagrid查詢出資料到前端都屬於字串的形式，例如給a="12",b="5"，再比較大小，就會返回-1。如何解決呢，我們只需要在這裡加上乙個轉換即可，**如下：

1
var _4e8=opt.sorter||function
(a,b);

對兩個比較字串進行轉換，轉換完之後再進行比較大小。而且不要擔心，ab是非數字的情況。

現在又乙個更加麻煩的需求，在財務會計中金額往往都需要以千分位的方式顯示，這樣到前端就無法進行正常排序了。如何解決這個問題，有兩個方法。方法一，將千分位轉換放到前端來實現，給金額的options中定義乙個formatter來進行格式化。方法二，在後台轉換千分位，在前端定義乙個sorter比較大小方法。

按照原始碼中的**可以看出我們還可以通過在options中定義sorter方法來設定比較方式。

html：

1
<
table 
id="dg"
class
="easyui-datagrid"
title
="datagrid selection"
style
="width:700px;height:250px"
2data-options
="singleselect:true,url:'../datagrid/datagrid_data1.json',sorter: sort()"
>
3<
thead
>
4<
tr>
5<
th data-options
="field:'itemid',width:80"
>item id
th>
6<
th data-options
="field:'productid',width:100"
>product
th>
7<
th data-options
="field:'listprice',width:80,align:'right',sortable: true"
>list price
th>
8<
th data-options
="field:'unitcost',width:80,align:'right',sortable: true"
>unit cost
th>
9<
th data-options
="field:'attr1',width:250"
>attribute
th>
10<
th data-options
="field:'status',width:60,align:'center'"
>status
th>
11tr
>
12thead
>
13table
>

js**：先用replace方法將分隔符例如,轉換成空格，這樣就形成了乙個可強轉的數字字串。然後再

if(parsefloat(a))
3         a = parsefloat(a);
4     if(parsefloat(b))
5         b = parsefloat(b);
6     return (a>b?1:-1);
比較大小，同理，我們也可以定義一些其他的排序方式。今天就寫到這裡。

easyui實現datagrid數字排序問題

Silverlight控制項DataGrid用法總結

easyui 排序實現

easyui元件實現

easyui實現datagrid數字排序問題

Silverlight控制項DataGrid用法總結

easyui 排序實現

easyui元件實現

相關推薦