Case study：在数据库网页中设计数据排序工具

一、目的

该笔记的目的是引导读者在已搭建的数据库网页的基础上，利用JS设计数据排序工具。其效果如图1所示。“Order by”下拉列表框由一系列字段组成，如“Location”“Longitude”“Latitude”“User”“Time”五个字段。点击“Latitude”，JS就会自动按“Latitude”字段从小到大（升序）将待输出的数据进行排序；再次点击“Latitude”字段，JS会自动按“Latitude”字段从大到小（降序）将待输出的数据进行排序。

该笔记假定读者已阅读过案例“Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能”，因为该笔记的代码中部分变量和函数延续了上一篇笔记中的相应变量和函数。这些变量或函数有print_table_kit["data"]、print_table_kit["init_max_data"]、print_data()和IndexOf()。

• print_table_kit["data"]：待输出的数据。执行console.log(print_table_kit["data"])数据，结果如图2所示。
• print_table_kit["init_max_data"]：用于数据分页输出，规定了每页最大的数据输出量。数据分页功能详见上一案例。如果您不需要进行数据分页输出，而仅仅需要数据排序功能，则只需要规定自己的print_data()函数，将print_table_kit["data"]的内容直接输出到某个HTML元素中即可。
• print_data()：用于输出数据，主要通过代码document.getElementById("xxx").innnerHTML()向HTML元素输出数据表。
• IndexOf()：寻找某一元素在数组中的位置。可以直接从上一个案例的代码中摘抄此函数。

二、实现方法

在“Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能”案例的基础上，在“show.data.js”文件中加入以下代码块。您需要修改排序工具箱参数，使之适应您希望的排序方式，并确保IndexOf()函数已存在。此外，您可以将print_table_kit["data"]改成您需要输出的JSON数组变量名，并定义自己的print_data()函数。运行数据库网页，即可使用数据排序控件。

/*********  数据库排序 **********/
/*******************************/

// 排序工具箱参数
var data_sort_kit = {
    "field_value": ["location", "long", "lat", "user", "time"],                 //MySQL数据表中需要排序的字段
    "field_display": ["Location", "Longtitude", "Latitude", "User", "Time"],    //排序字段在下拉列表框中的显示内容
    "order": ["asc", "asc", "asc", "asc", "asc"]                                //初始的排序方法
                                                                                //  "asc"升序、"desc"降序
}

// 辅助函数：查找元素在数组中的位置
// 参考 https://blog.csdn.net/qq_41244810/article/details/104768450
//    IndexOf(arr, item)函数，在笔记"Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能"
//    中已存在

// 数据排序算法
function getSortFun(order, sortBy) {
    var ordAlpah = (order == 'asc') ? '>' : '<';
    var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
    return sortFun;
}

// 排序字段选择下拉列表框值改变时，进行排序
function perform_sort(){
    // 获取要排序的字段
    var objS = document.getElementById("change_sort");
    var sortBy = objS.options[objS.selectedIndex].value;

    // 执行排序函数
    var index = IndexOf(data_sort_kit["field_value"], sortBy);
    print_table_kit["data"].sort(getSortFun(data_sort_kit["order"][index], sortBy));

    // 修改升序降序参数
    for(var i=0; i<data_sort_kit["order"].length; i++){
        if(i == index){
            if(data_sort_kit["order"][i] == "asc"){
                data_sort_kit["order"][i] = "desc";
            } else {
                data_sort_kit["order"][i] = "asc";
            }
        } else {
            data_sort_kit["order"][i] = "asc";
        }
    }

    // 刷新数据表
    print_data(print_table_kit["init_max_data"], 1);
}

// 输出排序字段选择下拉列表框
function print_order_select(){
    var cout = 'Order by: ';
    cout += '<select id="change_sort" οnchange="perform_sort()">';
    for(var i = 0; i < data_sort_kit["field_value"].length; i++){
        cout += '<option value="'+data_sort_kit['field_value'][i] +'">'+
                data_sort_kit['field_display'][i] +'</option>';
    }
    cout += '</select>';
    return cout;
}

/********* /数据库排序 **********/
/*******************************/