EasyUI Forum
March 04, 2024, 01:22:28 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: custom sort for datagrid or treegrid  (Read 1240 times)
fmdano
Newbie
*
Posts: 22


View Profile Email
« 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: 2260


View Profile Email
« 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


View Profile Email
« 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


View Profile Email
« 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: 2260


View Profile Email
« 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


View Profile Email
« 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]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!