jQuery Grid Plugin - jqGrid

Hello,

Since it looks like jqGrid is not supporting multi-column sorting natively, I have tried to implement a custom sort which is acting like a multi-column sorting on my json data.

Since I'm new to jqGrid, I post it here, so anyone can feel free to comment and give feedback about this way to do it.

Anyway, it's far from perfect since the sort icon are not synchronized with the actual sorting ( only one arrow in one column is 'selected' ), but at least it gives a way to sort on more than one column.

Thanks in advance for your feedback on the below code.

Best regards,

Christophe

Step 1)

declaring two global variables which will contain the information about the sorting:

// this array contains the ordered list of index name in which the sorting has to be applied

var vmOverviewTableSortingOrderedList = new Array();

// this associative array contains the association index name => order

var vmOverviewTableSortingHash = new Array();

Step 2)

declaring a global method which will update the two global variables on each sorting request from the user

function updateVmOverviewTableSorting(propertyName, order)
{

    // remove the index name from the ordered list, whatever its position, it will be removed
    vmOverviewTableSortingOrderedList
        = jQuery.grep(vmOverviewTableSortingOrderedList, function(value) {
            return value != propertyName;
        });

    // add the index name as first element in the ordered list
    vmOverviewTableSortingOrderedList.unshift(propertyName);

    // add or update the association index name => order   
    vmOverviewTableSortingHash[propertyName] = order;
}

Step 3)

Defines two url parameters which will be used to send the sorting information to the server:

- 'sortnames' which is an index name comma-separated list

- 'sortorders' for the order list

Below is the initial url defining an initial sorting on the index name 'name' in ascending order 'asc'

jQuery("#vmOverviewTable").jqGrid({
    url : 'vmOverviews?sortnames=name&sortorders=asc',
    datatype : "json",

Step 4)

Defining a onSortCol function which updates the global variables and the url:

    onSortCol: function (index, columnIndex, sortOrder) {
        // update the two global variables
        updateVmOverviewTableSorting(index, sortOrder);

        // creates the two comma-separated list (one for the index name, the other for the order)

        // from the data in the two global variables
        var sortPropertyNames = '';
        var sortOrders = '';

        
        $.each(vmOverviewTableSortingOrderedList, function(index, value) {
            if (sortPropertyNames.length != 0)
            {
                sortPropertyNames += ',';
                sortOrders += ',';
            }
            
            sortPropertyNames += value;
            sortOrders += vmOverviewTableSortingHash[value];
        });

        // change the url with the two url parameters changed with the new comma-separated list
        var url = 'vmOverviews?sortnames='+sortPropertyNames+'&sortorders='+sortOrders;
        
        $("#vmOverviewTable").jqGrid('setGridParam',{'url':url});

        // we DON'T return "stop" here, so the default sorting process code is executed (such calling the url in ajax)
        return '';
    }

Step 5)

I don't provide the code here, but the final step is to handle the parameters in the server-side controller in order to implement the sorting on the server side.

For example, my Symfony2 action is starting like this:

     /**
     * @Route("/vmOverviews", name="_paas_vmOverviews", defaults={"_format"="json"})
     * @Template()
     */
    public function vmOverviewsAction()
    {
        
        $request = $this->getRequest();
        
        $sortnames = $request->query->get('sortnames');
        $sortorders = $request->query->get('sortorders');