前端选择功能实现(1/2)
This commit is contained in:
parent
67ad8f35ab
commit
76b874d30b
GPG Key ID:
D7A9EC07024C3021
@ -28,6 +28,17 @@ $this->registerCssFile('@web/css/home_style.css');
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1><?= Html::encode($this->title) ?></h1>
|
||||
<div>
|
||||
<?= Html::button('下载', ['class' => 'btn btn-outline-primary single-download-btn']) ?>
|
||||
<?= Html::button('下载', ['class' => 'btn btn-outline-primary batch-zip-download-btn']) ?>
|
||||
<?= Html::button('压缩', ['class' => 'btn btn-outline-primary batch-zip-btn']) ?>
|
||||
<?= Html::button('解压', ['class' => 'btn btn-outline-primary unzip-btn']) ?>
|
||||
<?= Html::button('重命名', ['class' => 'btn btn-outline-primary single-rename-btn']) ?>
|
||||
<?= Html::button('复制', ['class' => 'btn btn-outline-primary batch-copy-btn']) ?>
|
||||
<?= Html::button('剪切', ['class' => 'btn btn-outline-primary batch-cut-btn']) ?>
|
||||
<?= Html::button('粘贴', ['class' => 'btn btn-outline-primary batch-paste-btn']) ?>
|
||||
<?= Html::button('计算校验', ['class' => 'btn btn-outline-primary calc-sum-btn']) ?>
|
||||
<?= Html::button('分享', ['class' => 'btn btn-outline-primary single-share-btn']) ?>
|
||||
<?= Html::button('删除', ['class' => 'btn btn-outline-danger batch-delete-btn']) ?>
|
||||
<?= Html::button('刷新', ['class' => 'btn btn-outline-primary refresh-btn']) ?>
|
||||
<?= Html::button('新建文件夹', ['class' => 'btn btn-outline-primary new-folder-btn', 'value' => $directory]) ?>
|
||||
<div class="dropdown d-inline-block">
|
||||
@ -87,6 +98,7 @@ $this->registerCssFile('@web/css/home_style.css');
|
||||
<table class="table table-hover" id="drop-area">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="selector-col"><input type="checkbox" id="select-all"></th>
|
||||
<th scope="col" class="name-col">名称</th>
|
||||
<th scope="col" class="modified-col">最近修改时间</th>
|
||||
<th scope="col" class="size-col">大小</th>
|
||||
@ -98,6 +110,7 @@ $this->registerCssFile('@web/css/home_style.css');
|
||||
<?php $relativePath = $directory ? $directory . '/' . $item['name'] : $item['name']; ?>
|
||||
<?php $absolutePath = Yii::getAlias('@app') . '/data/' . Yii::$app->user->id . '/' . $relativePath; ?>
|
||||
<tr>
|
||||
<td><input type="checkbox" class="select-item"></td>
|
||||
<?php if (is_dir($absolutePath)): ?> <!-- 如果是文件夹 -->
|
||||
<td>
|
||||
<?= Html::tag('i', '', ['class' => $item['type'] . ' file_icon']) ?>
|
||||
@ -118,7 +131,7 @@ $this->registerCssFile('@web/css/home_style.css');
|
||||
'data-bs-title' => '打包下载'
|
||||
]) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-regular fa-pen-to-square']), ['value' => $relativePath, 'class' => 'btn btn-outline-secondary rename-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '重命名']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-solid fa-share-nodes']), ['value' => $relativePath, 'class' => 'btn btn-outline-info shares-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '分享']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-solid fa-share-nodes']), ['value' => $relativePath, 'class' => 'btn btn-outline-success shares-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '分享']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-regular fa-trash-can']), ['value' => $relativePath, 'class' => 'btn btn-outline-danger delete-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '删除']) ?>
|
||||
</td>
|
||||
<?php else: ?> <!-- 如果是文件 -->
|
||||
@ -141,7 +154,7 @@ $this->registerCssFile('@web/css/home_style.css');
|
||||
'data-bs-title' => '下载'
|
||||
]) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-regular fa-pen-to-square']), ['value' => $relativePath, 'class' => 'btn btn-outline-secondary rename-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '重命名']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-solid fa-share-nodes']), ['value' => $relativePath, 'class' => 'btn btn-outline-info shares-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '分享']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-solid fa-share-nodes']), ['value' => $relativePath, 'class' => 'btn btn-outline-success shares-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '分享']) ?>
|
||||
<?= Html::button(Html::tag('i', '', ['class' => 'fa-regular fa-trash-can']), ['value' => $relativePath, 'class' => 'btn btn-outline-danger delete-btn', 'data-bs-toggle' => 'tooltip', 'data-bs-placement' => 'top', 'data-bs-title' => '删除']) ?>
|
||||
</td>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
table a {
|
||||
text-decoration-line: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.file_icon {
|
||||
@ -20,7 +21,9 @@ table a {
|
||||
font-size: large;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.selector-col{
|
||||
width: 0%;
|
||||
}
|
||||
.name-col {
|
||||
width: 50%;
|
||||
}
|
||||
@ -68,4 +71,17 @@ table a {
|
||||
font-size: 40px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table tbody .selected {
|
||||
--bs-table-bg: #C1D4FF;
|
||||
--bs-table-color: black;
|
||||
--bs-table-hover-color: black;
|
||||
}
|
||||
|
||||
table .selected a {
|
||||
color: black !important;
|
||||
}
|
||||
table tr td:first-child, table tr th:first-child {
|
||||
display: none;
|
||||
}
|
||||
@ -110,4 +110,66 @@ dropArea.addEventListener('dragleave', function (event) {
|
||||
if (!dropArea.contains(event.relatedTarget)) {
|
||||
dropArea.classList.remove('dragging');
|
||||
}
|
||||
});
|
||||
|
||||
// 为全选/取消全选的复选框添加事件监听器
|
||||
document.getElementById('select-all').addEventListener('change', function() {
|
||||
// 获取所有的复选框
|
||||
var checkboxes = document.querySelectorAll('.select-item');
|
||||
// 设置所有复选框的状态与全选/取消全选的复选框的状态相同
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = this.checked;
|
||||
checkboxes[i].closest('tr').classList.toggle('selected', this.checked);
|
||||
}
|
||||
});
|
||||
|
||||
// 为每一行的复选框添加事件监听器
|
||||
var itemCheckboxes = document.querySelectorAll('.select-item');
|
||||
for (var i = 0; i < itemCheckboxes.length; i++) {
|
||||
itemCheckboxes[i].addEventListener('change', function() {
|
||||
// 如果有一个复选框未被选中，则全选/取消全选的复选框也应该未被选中
|
||||
if (!this.checked) {
|
||||
document.getElementById('select-all').checked = false;
|
||||
}
|
||||
// 如果所有的复选框都被选中，则全选/取消全选的复选框也应该被选中
|
||||
else {
|
||||
var allChecked = true;
|
||||
for (var j = 0; j < itemCheckboxes.length; j++) {
|
||||
if (!itemCheckboxes[j].checked) {
|
||||
allChecked = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.getElementById('select-all').checked = allChecked;
|
||||
}
|
||||
this.closest('tr').classList.toggle('selected', this.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// 为document添加键盘事件监听器
|
||||
document.addEventListener('keydown', function(event) {
|
||||
// 如果用户按下了Ctrl+A
|
||||
if (event.ctrlKey && event.key === 'a') {
|
||||
// 阻止默认的全选操作
|
||||
event.preventDefault();
|
||||
// 获取所有的复选框
|
||||
var checkboxes = document.querySelectorAll('.select-item');
|
||||
var selectAll = document.getElementById('select-all');
|
||||
selectAll.checked = !selectAll.checked;
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = selectAll.checked;
|
||||
checkboxes[i].closest('tr').classList.toggle('selected',selectAll.checked);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', 'tr', function (event) {
|
||||
// 如果点击的是checkbox，就不执行下面的代码
|
||||
if ($(event.target).is('input[type="checkbox"]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).toggleClass('selected');
|
||||
var checkbox = $(this).children(':first-child').find('input[type="checkbox"]');
|
||||
checkbox.prop('checked', !checkbox.prop('checked'));
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user