javascript - 如何使用 jquery javascript 对表中的文件夹和文件进行排序
问题描述
对于文件管理,我有 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;
});
});
我怎样才能做到这一点?
这是代码的小提琴:https ://jsfiddle.net/82j0k3eu/
解决方案
var 属性 = [ '名称', '扩展名' ];
$.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;
});
});
推荐阅读
- android - 如何在 Activity 中的 Fragment 中处理 View Pager 上的 Back Press
- sql - 用盒子数量更新订单项目
- c# - 如何从方法返回多个返回类型
- ios - SwiftUI - 从子视图转换回主视图后删除导航栏中的额外空间
- linux - 在 Raspberry pi 4 linux 启动时自动启动时执行“dotnet ~.dll”时出错
- powershell - Powershell .value 与 .values
- javascript - 如何获取为浏览器上的文件输入选择的图像尺寸
- angular - ag-Grid:我如何对 ICellRendererAngularComp 进行单元测试
- bash - awk 和 printf 插入额外的换行符
- c# - AJAX 成功/错误功能不起作用