jQuery EasyUI DataGrid -Ordenación personalizada

Si el comportamiento de ordenación predeterminado no satisface sus necesidades, puede personalizar el comportamiento de ordenación del DataGrid (datagrid).

Lo más básico, el usuario puede definir una función de ordenación en la columna, cuyo nombre de función es sorter. Esta función aceptará dos valores y el valor de retorno será el siguiente:

valueA > valueB => devuelve 1

valueA < valueB => devuelve -1

Código de ordenación personalizada

    <table id="tt"></table>

    $('#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);

Puede ver en este código que hemos creado un sorter personalizado para la columna date. El formato de la fecha es 'dd/mm/yyyy' y se puede ordenar fácilmente por año, mes y día.

Descargar el ejemplo de jQuery EasyUI

jeasyui-datagrid-datagrid14.zip