Title: custom sort for datagrid or treegrid
Post by: fmdano 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
Title: Re: custom sort for datagrid or treegrid
Post by: jarry on February 09, 2023, 08:49:47 PM
Please define a 'sorter' function to custom sorting on a column. $('#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); } } } ]] });
Title: Re: custom sort for datagrid or treegrid
Post by: fmdano 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?
Title: Re: custom sort for datagrid or treegrid
Post by: fmdano 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...
Title: Re: custom sort for datagrid or treegrid
Post by: jarry 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. <!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>
Title: Re: custom sort for datagrid or treegrid
Post by: fmdano 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); }},
|