Treegrid custom sort

[lloyd]

Hi All,

I have created a file explorer and I need to a custom sort based on the node parent/child. I.e. All folders are parent nodes and files are children.

When sorter callback is used two parameters are passed, but no node information. I.e. sorter:function(a,b){ }

I need something like this (client side):

function sorter($a, $b) {
    global $sort;
    global $order;
   
    $sort_by = empty($sort) ? "" : $sort;
    $order_by = empty($order) ? "asc" : $order;
   
   if ($a['is_dir'] && !$b['is_dir']) {
      $result = -1;
   }
    else if (!$a['is_dir'] && $b['is_dir']) {
      $result = 1;
   }
    else {
      $result = strcmp($a['filename'], $b['filename']);
   }
   
    // Sort order
    if (($result != 0) && ($order_by == "desc")) {
        $result *= -1;
    }
   
    return $result;
}

[stworthy]

Performing server side sorting may be more easier. Set 'remoteSort' property to true to enable server side sorting. When click a column, the 'sortName' and 'sortOrder' parameters will be sent to server, you will be able to get all the sorting information in your server code.

[lloyd]

Thanks for the quick reply.
 
I agree that server side sorting is the answer, but...
Server side sort does not work form me with async data requests.
If I click to expand a node (folder) without sort and order parameters passed to the server all displays ok. If I click on a column to be sorted the server receives id, sort, order with the id (folder) the same as the previous request. Now treegrid displays only the sorted folder the whole tree structure is lost.

[stworthy]

Please try the following steps.
1. Prepare treegrid data with a field object that describe what information you want. The 'rec' field below is just the field we want.

Code:

	var data = [{
		"id":2,
		"rec":{"filename":"file1"},
		"size":"120 MB",
		"date":"03/20/2010",
		"children":[{
			...
		}]
	},{
		"id":3,
		"rec":{"filename":"eclipse"},
		"size":"",
		"date":"01/20/2010",
		"children":[{
			...
		}]
	}]

2. Bind the 'rec' field as tree field.

Code:

	<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
			data-options="
				data:data,
				idField: 'id',
				treeField: 'rec',
				remoteSort:false
			">
		<thead>
			<tr>
				<th data-options="field:'rec',formatter:formatRec,sortable:true,sorter:sortRec" width="220">Name</th>
				<th data-options="field:'size'" width="100" align="right">Size</th>
				<th data-options="field:'date'" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>

3. Define the formatter and sorter functions.

Code:

function formatRec(value,row){
	return value ? value.filename : value;
}
function sortRec(a,b){
	return a.filename>b.filename?1:-1;
}

[lloyd]

Thanks, now sorting correctly. 

Here is my directory/file name sorter

Code:

    function nameSorter(a, b) {
        var result = 0;
    
        if (a.is_dir && !b.is_dir) {
            result = -1;
        }
        else if (!a.is_dir && b.is_dir) {
            result = 1;
        }
        else {
            result = ((a.name === b.name) ? 0 : ((a.name > b.name ) ? 1 : -1));
        }

        return result;        
    }