Print Page - Treegrid custom sort

Title: Treegrid custom sort
Post by: lloyd on August 22, 2013, 08:27:10 AM

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;
}

Title: Re: Treegrid custom sort
Post by: stworthy on August 22, 2013, 06:22:09 PM

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.

Title: Re: Treegrid custom sort
Post by: lloyd on August 23, 2013, 01:39:25 AM

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.

Title: Re: Treegrid custom sort
Post by: stworthy on August 23, 2013, 02:45:16 AM

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;
}

Title: Re: Treegrid custom sort
Post by: lloyd on August 23, 2013, 04:10:18 AM

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;        
    }

EasyUI Forum

General Category => General Discussion => Topic started by: lloyd on August 22, 2013, 08:27:10 AM