jQuery EasyUI使用教程之在数据网格中自定义排序

最新推荐文章于 2019-10-12 16:15:41 发布

界面开发小八哥

最新推荐文章于 2019-10-12 16:15:41 发布

阅读量1.1k

点赞数 1

如果默认排序行为不能满足您的需求，您可以自定义数据网格的排序行为。

基本上用户可以在列上定义一个函数名为sorter的排序函数。这个函数将要接受两个值，返回值将如下：

valueA > valueB => return 1
valueA < valueB => return -1

自定义排序代码

 
   
        $( 
        '#tt' 
        ).datagrid({ 
       
 
        title: 
        'Custom Sort' 
        , 
       
 
        iconCls: 
        'icon-ok' 
        , 
       
 
        width:520, 
       
 
        height:250, 
       
 
        singleSelect: 
        true 
        , 
       
 
        remoteSort: 
        false 
        , 
       
 
        columns:[[ 
       
 
        {field: 
        'itemid' 
        ,title: 
        'Item ID' 
        ,width:60,sortable: 
        true 
        }, 
       
 
        {field: 
        'listprice' 
        ,title: 
        'List Price' 
        ,width:70,align: 
        'right' 
        ,sortable: 
        true 
        }, 
       
 
        {field: 
        'unitcost' 
        ,title: 
        'Unit Cost' 
        ,width:70,align: 
        'right' 
        ,sortable: 
        true 
        }, 
       
 
        {field: 
        'attr1' 
        ,title: 
        'Attribute' 
        ,width:120,sortable: 
        true 
        }, 
       
 
        {field: 
        'date' 
        ,title: 
        'Date' 
        ,width:80,sortable: 
        true 
        ,align: 
        'center' 
        , 
       
 
        sorter: 
        function 
        (a,b){ 
       
 
        a = a.split( 
        '/' 
        ); 
       
 
        b = b.split( 
        '/' 
        ); 
       
 
        if 
        (a[2] == b[2]){ 
       
 
        if 
        (a[0] == b[0]){ 
       
 
        return 
        (a[1]>b[1]?1:-1); 
       
 
        }  
        else 
        { 
       
 
        return 
        (a[0]>b[0]?1:-1); 
       
 
        } 
       
 
        }  
        else 
        { 
       
 
        return 
        (a[2]>b[2]?1:-1); 
       
 
        } 
       
 
        } 
       
 
        }, 
       
 
        {field: 
        'status' 
        ,title: 
        'Status' 
        ,width:40,align: 
        'center' 
        } 
       
 
        ]] 
       
 
        }).datagrid( 
        'loadData' 
        , data); 
       
 
 