custom sort for datagrid or treegrid

EasyUI Forum

April 28, 2024, 12:58:56 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > custom sort for datagrid or treegrid

Pages: [1]

« previous next »

Author

Topic: custom sort for datagrid or treegrid (Read 1457 times)

fmdano

Newbie

Posts: 22

custom sort for datagrid or treegrid

« on: February 09, 2023, 10:19:13 AM »

Hey all, we have data that will start with 1 and could go to 1000, 5000, etc. How can we do a custom sort on that column in the grid so we done get 1, 10, 11, 12, 13,14,15,16,17,18,19,2, 20 but instead get 1,2,3,4,5....10,11,12....

thanks
Dan


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: custom sort for datagrid or treegrid

« Reply #1 on: February 09, 2023, 08:49:47 PM »

Please define a 'sorter' function to custom sorting on a column.

Code:

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{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);  
				}  
			}  
		}
	]]
});


	Logged

fmdano

Newbie

Posts: 22

Re: custom sort for datagrid or treegrid

« Reply #2 on: February 10, 2023, 06:45:13 AM »

I understand it is a custom sorter, but I am not sorting on Dates, I am sorting on numbers from 1-x and need them to sort correctly....Just not sure what I am seeing in your code...is this how to do a sort via numbers?


	Logged

fmdano

Newbie

Posts: 22

Re: custom sort for datagrid or treegrid

« Reply #3 on: February 10, 2023, 10:21:56 AM »

here are some numbers I am trying to get in number order (1,2,3,4,5,6,7,8,9,10,11...)
1-1/10001/101
1-10/100001/101
1-11/110001/101
1-12/120001/101
1-13/130001/101
1-14/140001/101
1-15/150001/101
1-16/160001/101
1-17/170001/101
1-18/180001/101
1-19/190001/101
1-2/20001/101
1-20/200001/101
and more....

what you are seeing is the default sort, but this needs to be ordered by 1,2....10,11,12....

thanks again...


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: custom sort for datagrid or treegrid

« Reply #4 on: February 11, 2023, 08:57:18 PM »

The code posted before only demonstrates how to define a 'sorter'. Here is the example shows how to custom sorting on a number column.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = [
			{"no":"1", "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "listprice": "36.50", "attr1": "Large", "itemid": "EST-1" },
			{"no":"3", "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "listprice": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
			{"no":"4", "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
			{"no":"10", "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "listprice": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
			{"no":"11", "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
			{"no":"2", "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
			{"no":"5", "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "83.50", "attr1": "With tail", "itemid": "EST-15" },
			{"no":"6", "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
			{"no":"7", "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
			{"no":"8", "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "listprice": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
		]
		function mysorter(a,b){
			return parseInt(a)>parseInt(b)?1:-1;
		}
	</script>
</head>

<body>
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
		data-options="singleSelect:true,remoteSort:false,fitColumns:true,data:data">
		<thead>
			<tr>
				<th data-options="field:'no',width:50,align:'center',sortable:true,sorter:mysorter">No</th>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

</body>

</html>


	Logged

fmdano

Newbie

Posts: 22

Re: custom sort for datagrid or treegrid

« Reply #5 on: February 13, 2023, 07:05:43 AM »

So this is what I did to solve it...i guess it is similar to what you just posted...
Prefix my numbers with a lot of ZEROS and then just did the same a ? b line....

DO you see anything bad with this or will this work because it worked for me.

sorter:function(a,b){
               // in the query create a field with leading 0 to do the default order by
               //pad each number with 0 to get it up to 20 numbers to make all the samelength
               a1= a.padStart(20, '0');
               b1= b.padStart(20, '0');

               return (a1>b1?1:-1);
            }},


	Logged

Pages: [1]

« previous next »