如何使用 jquery javascript 对 table 中的文件夹和文件进行排序

Question

对于文件管理，我有 2 列：

name 其中有文件夹（目录）和文件

extension 给我文件的扩展名（文件夹空扩展名）

当我单击 name 时，它会按字母顺序对文件和文件夹进行排序。但它不会首先对文件夹进行排序。当我单击 extension 时，它首先对文件夹进行排序，但不是按字母顺序排序。

我想达到的目标：

先对文件夹排序，然后再按字母顺序排序。
加载页面时排序应该是默认的，所以在点击事件之后不会排序

html:

<table>
  <thead>
    <tr>
      <th class="name header-item"><a id="name" class="filter-link" href="#">Name</a></th>  
      <th class="extension header-item"><a id="extension" class="filter-link" href="#">Ext</a></th>
    </tr>
  </thead>
  <tbody class="table-content">
    <tr class="table-row">
      <td class="table-data">bbb</td>
      <td class="table-data"></td>
    </tr>
    <tr class="table-row">
      <td class="table-data">ccc.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">aaa.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">ccc</td>
      <td class="table-data"></td>
    </tr>
    <tr class="table-row">
      <td class="table-data">bbb.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">aaa</td>
      <td class="table-data"></td>
    </tr>
  </tbody>
</table>

jquery:

var properties = [
  'name',
  'extension'
];

    $.each( properties, function( i, val ) {

        var orderClass = '';

        $(document).on('click','#' + val,function(e) {  

            e.preventDefault();
            $('.filter-link.filter-link-active').not(this).removeClass('filter-link-active').children('i').show();
            $(this).toggleClass('filter-link-active');
            $('.filter-link').removeClass('asc desc').children('i').show();

            if(orderClass == 'desc' || orderClass == '') {
                $(this).addClass('asc');
                $(this).children('i').hide();                   
                    orderClass = 'asc';
            } else {
                $(this).addClass('desc');
                $(this).children('i').hide();                   
                orderClass = 'desc';
            }

            var parent = $(this).closest('.header-item');
            var index = $(".header-item").index(parent);
            var $table = $('.table-content');
            var rows = $table.find('.table-row').get();
            var isSelected = $(this).hasClass('filter-link-active');
            var isNumber = $(this).hasClass('filter-link-number');

            rows.sort(function(a, b){

                var x = $(a).find('.table-data').eq(index).text();
                    var y = $(b).find('.table-data').eq(index).text();

                if(isNumber == true) {

                    if(isSelected) {
                        return x - y;
                    } else {
                        return y - x;
                    }

                } else {

                    if(isSelected) {        
                        if(x < y) return -1;
                        if(x > y) return 1;
                        return 0;
                    } else {
                        if(x > y) return -1;
                        if(x < y) return 1;
                        return 0;
                    }
                }
            });

            $.each(rows, function(index,row) {
                $table.append(row);
            });

            return false;
        });

    });

我怎样才能做到这一点？

这里是一个fiddle的代码：https://jsfiddle.net/82j0k3eu/

Answer 1

var 属性 = [ 'name', 'extension' ];

$.each( properties, function( i, val ) {

    var orderClass = '';
    var folders = files = ''; /* declare empty variables */

    $(document).on('click','#' + val,function(e) {  

        e.preventDefault();
        $('.filter-link.filter-link-active').not(this).removeClass('filter-link-active').children('i').show();
        $(this).toggleClass('filter-link-active');
        $('.filter-link').removeClass('asc desc').children('i').show();

        if(orderClass == 'desc' || orderClass == '') {
            $(this).addClass('asc');
            $(this).children('i').hide();                   
                orderClass = 'asc';
        } else {
            $(this).addClass('desc');
            $(this).children('i').hide();                   
            orderClass = 'desc';
        }

        var parent = $(this).closest('.header-item');
        var index = $(".header-item").index(parent);
        var $table = $('.table-content');
        var rows = $table.find('.table-row').get();
        var isSelected = $(this).hasClass('filter-link-active');
        var isNumber = $(this).hasClass('filter-link-number');

        rows.sort(function(a, b){

            var x = $(a).find('.table-data').eq(index).text();
                var y = $(b).find('.table-data').eq(index).text();

            if(isNumber == true) {

                if(isSelected) {
                    return x - y;
                } else {
                    return y - x;
                }

            } else {

                if(isSelected) {        
                    if(x < y) return -1;
                    if(x > y) return 1;
                    return 0;
                } else {
                    if(x > y) return -1;
                    if(x < y) return 1;
                    return 0;
                }
            }
        });

        $.each(rows, function(index,row) {
            if $(this).children('td').eq(1).text() == '' /* check if there's an extension, no extension = folder */
            folders += row;
            else files += row
        });

        $table.append(folders);
        $table.append(files);

        return false;
    });

});

如何使用 jquery javascript 对 table 中的文件夹和文件进行排序

how to sort folders and files in a table with jquery javascript

javascript

directory

jquery

file

tablesort