LiquidUI: Sort Content in Order
This example is to provide sorted view of array content.
User is able to click on each column-header-like button to sort the data set with different order based on each column.
In the example, the sorting order follows non-> ascending-> descending-> non for each button.
Step 1: Create user interface
//User interface
//If default flag is not set to true, execute setDefault function
if(!z_default_flag){
setDefault();
}
clearscreen();
pushbutton([1,5], "&V[btn_sort_icon_0]Make", "?", {"process":sortContent, "size":[1,15], "using":{"col":"0"}});
pushbutton([1,21], "&V[btn_sort_icon_1]Model", "?", {"process":sortContent, "size":[1,20], "using":{"col":"1"}});
pushbutton([1,42], "&V[btn_sort_icon_2]Year", "?", {"process":sortContent, "size":[1,10], "using":{"col":"2"}});
pushbutton([1,53], "&V[btn_sort_icon_3]Color", "?", {"process":sortContent, "size":[1,10], "using":{"col":"3"}});
pushbutton([1,64], "&V[btn_sort_icon_4]Door", "?", {"process":sortContent, "size":[1,10], "using":{"col":"4"}});
pushbutton([1,75], "&V[btn_sort_icon_5]HatchBack", "?", {"process":sortContent, "size":[1,15], "using":{"col":"5"}});
box([2,5], [12,19]);
box([2,21], [12,40]);
box([2,42], [12,51]);
box([2,53], [12,62]);
box([2,64], [12,73]);
box([2,75], [12,89]);
for(var i=start_row; i<end_row; i++){
text([2+i,7], data_ary[0]);
text([2+i,23], data_ary[1]);
text([2+i,45], data_ary[2]);
text([2+i,55], data_ary[3]);
text([2+i,69], data_ary[4]);
set("V[check_&V]", data_ary[5]);
checkbox([2+i,82], "", {"name":"check_&V", "readonly":true});
}
Note: Variables "btn_sort_icon_0" to "btn_sort_icon_5" are defaulted to be empty, and they are used to display corresponding icon when sort
Variable "start_row" is always 0, but "end_row" is dynamically changing based on the length of data set
Step 2: Create function to default data set and variables
//Function to default all variables and data
function setDefault(){
//Default all button icons to be empty
btn_sort_icon_0 = "";
btn_sort_icon_1 = "";
btn_sort_icon_2 = "";
btn_sort_icon_3 = "";
btn_sort_icon_4 = "";
btn_sort_icon_5 = "";
//Default data array for display
data_ary = [];
data_ary.push(["Honda", "Accord", "2009", "Metallic", "5", " "]);
data_ary.push(["Acura", "RSX", "2002", "Red", "2", "X"]);
data_ary.push(["Scion", "tC", "2014", "White", "2", "X"]);
data_ary.push(["Honda", "Accord", "2014", "Black", "5", " "]);
data_ary.push(["Toyota", "Corolla", "2014", "Red", "5", " "]);
data_ary.push(["Mazda", "5", "2008", "Blue", "5", "X"]);
data_ary.push(["BMW", "X1", "2015", "Black", "5", "X"]);
data_ary.push(["Mini", "Cooper", "2014", "Green", "5", "X"]);
//Create a backup for data array
data_ary_bkup = [];
for(var i=0; i<data_ary.length; i++){
data_ary_bkup.push(data_ary);
}
//Set start and end value for display
start_row = 0;
end_row = data_ary.length;
//Default an array to store sorting status for each column
sort_order_ary = [];
for(var i=0; i<6; i++){
sort_order_ary.push("X");
}
//Set default flag to true fore only run default function one time
z_default_flag = true;
}
Note: Array "data_ary_bkup " is to resume data set
Step 3: Create function to sort content
//Function to sort content
function sortContent(param){
set("V[btn_sort_icon_*]", " "); //Reset icon for all the button
var column = param.col; //Copy the value of passed column number
if(sort_order_ary[column]=='X') //Set the column of status array to 0 if it's defaulted to "X"
sort_order_ary[column] = 0;
if(sort_order_ary[column] == 1){
set("V[btn_sort_icon_&V[column]]", '@0H@');
sort_order_ary[column] = 2; //Change column of status array to 2 (descending order)
data_ary.sort(function (a,b) {
a = a[column].toLowerCase(); //Convert both value to lower case for following comparison
b = b[column].toLowerCase();
return a == b ? 0 : (a < b ? 1 : -1); //Compare elements. if it's the same, don't switch; else if b larger than a, switch; else, reverse
});
} else if(sort_order_ary[column] == 0){
set("V[btn_sort_icon_&V[column]]", '@0I@');
sort_order_ary[column] = 1; //Change column of status array to 1 (ascending order)
data_ary.sort(function (a,b) {
a = a[column].toLowerCase();
b = b[column].toLowerCase();
return a == b ? 0 : (a < b ? -1 : 1);
});
} else {
set("V[btn_sort_icon_&V[column]]", ' ');
sort_order_ary[column] = 0; //Change column of status array to 0 (non-sorted order)
data_ary = [];
for(var i=0; i<data_ary_bkup.length; i++){ //Copy data from backup array
data_ary.push(data_ary_bkup);
}
}
}
See attachments for code samples
