This commit is contained in:
oneao committed 2025-12-01 17:28:59 +08:00
1 parent d51eacb8ad
commit 44b3ef27d2
50 files changed
+3141 -9734

No files matched your search

+685 -135
View File
@@ -1,170 +1,720 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DataGrid 编辑 + 多选删除 + 彻底删除</title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>共享空间</title>
<style>
.datagrid-editable-input {
width: 100% !important;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 100%;
overflow-x: hidden;
}
.container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
header {
text-align: center;
padding: 30px 20px 20px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
}
header h1 {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
header p {
opacity: 0.9;
font-size: 14px;
}
.status-indicator {
display: flex;
justify-content: center;
margin: 10px 0 20px;
}
.status-badge {
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 6px 15px;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.content {
padding: 0 20px 30px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.space-info {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}
.space-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.space-status {
color: #666;
font-size: 14px;
}
.create-space-card {
background: white;
border-radius: 16px;
padding: 30px 20px;
text-align: center;
margin: 30px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.create-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
color: white;
}
.create-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.create-desc {
color: #666;
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
}
.action-btn {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border: none;
border-radius: 12px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3);
width: 100%;
margin-bottom: 15px;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 117, 252, 0.4);
}
.secondary-btn {
background: white;
color: #2575fc;
border: 1px solid #2575fc;
border-radius: 12px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
width: 100%;
}
.secondary-btn:hover {
background: #f0f7ff;
}
.invite-section {
background: white;
border-radius: 12px;
border: 1px solid #e1e5e9;
padding: 20px;
margin-bottom: 20px;
}
.invite-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.invite-title {
font-size: 16px;
font-weight: 600;
}
.invite-toggle {
background: #f0f2f5;
border: none;
border-radius: 6px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
color: #666;
}
.invite-content {
display: none;
}
.invite-content.active {
display: block;
}
.invite-link {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.link-text {
font-size: 14px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
margin-right: 10px;
}
.copy-btn {
background: #2575fc;
color: white;
border: none;
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.copy-btn:hover {
background: #1a68e8;
}
.qrcode-container {
text-align: center;
margin: 15px 0;
}
.qrcode {
width: 120px;
height: 120px;
background: #f0f2f5;
border-radius: 8px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 12px;
}
.share-options {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.share-btn {
display: flex;
flex-direction: column;
align-items: center;
background: none;
border: none;
cursor: pointer;
color: #666;
font-size: 11px;
}
.share-icon {
width: 35px;
height: 35px;
border-radius: 50%;
background: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
font-size: 16px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 15px;
border: 1px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
transition: border 0.2s;
}
.form-control:focus {
border-color: #2575fc;
outline: none;
}
footer {
text-align: center;
padding: 20px;
color: #999;
font-size: 12px;
}
/* 用户列表样式 */
.user-list-container {
margin: 20px 0;
}
.user-list-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-count {
background: #2575fc;
color: white;
border-radius: 12px;
padding: 2px 10px;
font-size: 12px;
}
.user-list {
background: white;
border-radius: 12px;
border: 1px solid #e1e5e9;
overflow: hidden;
}
.user-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #f0f2f5;
}
.user-item:last-child {
border-bottom: none;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
margin-right: 12px;
}
.user-info {
flex: 1;
}
.user-name {
font-weight: 500;
margin-bottom: 4px;
}
.user-role {
font-size: 12px;
color: #666;
}
.owner-badge {
background: #ffd700;
color: #333;
font-size: 10px;
padding: 2px 6px;
border-radius: 8px;
margin-left: 8px;
}
.user-action-btn {
background: #f0f2f5;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.user-action-btn:hover {
background: #e1e5e9;
}
.leave-btn {
background: #ff6b6b;
color: white;
border: none;
border-radius: 12px;
padding: 15px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
margin-top: 20px;
width: 100%;
}
.leave-btn:hover {
background: #ff5252;
}
.switch-mode {
text-align: center;
margin-top: 20px;
}
.switch-btn {
background: none;
border: none;
color: #2575fc;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>共享空间</h1>
<p id="header-subtitle">与朋友共享您的空间</p>
<div class="status-indicator">
<div class="status-badge" id="status-badge">🔒 未加入任何空间</div>
</div>
</header>
<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例(维护 allRows)</h3>
<div class="content" id="main-content">
<!-- 主要内容将根据状态动态生成 -->
</div>
<table id="subgrid"></table>
<div style="margin-top:10px;">
<a href="javascript:endEditRow()" class="easyui-linkbutton" iconCls="icon-save">保存当前行</a>
<a href="javascript:removeRows()" class="easyui-linkbutton" iconCls="icon-remove">删除所选</a>
<a href="javascript:confirmDelete()" class="easyui-linkbutton" iconCls="icon-save">彻底删除</a>
<a href="javascript:addRow()" class="easyui-linkbutton" iconCls="icon-add">新增一行</a>
<a href="javascript:getData()" class="easyui-linkbutton" iconCls="icon-add">获取数据</a>
<footer>
<p>共享空间 © 2023 - 保护您的隐私安全</p>
</footer>
</div>
<script>
let editIndex = undefined;
let allRows = createMockData(2000);
// 应用状态管理
const appState = {
hasSpace: false, // 用户是否有自己的空间
spaceName: "我的共享空间",
spaceMembers: [
{ id: 1, name: "我自己", role: "创建者", status: "在线", avatar: "我" },
{ id: 2, name: "张三", role: "成员", status: "在线", avatar: "张" },
{ id: 3, name: "李四", role: "成员", status: "10分钟前活跃", avatar: "李" }
],
inviteLink: "https://share.space/invite/abc123def456"
};
$('#subgrid').datagrid({
idField: 'id',
fit: false,
height: 400,
singleSelect: false,
rownumbers: false,
autoRowHeight: false,
pagination: true,
pageSize: 20,
view: scrollview,
onClickRow: onClickRow,
showPageInfo: false,
showRefresh: false,
columns: [[
{
field: 'rownumber',
title: '',
width: 30,
align: 'center',
formatter: function (value, row, index) {
return index + 1;
},
styler: function () {
return `
background-color: #efefef;
background: -webkit-linear-gradient(top, #F9F9F9 0, #efefef 100%);
background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
background: linear-gradient(to bottom, #F9F9F9 0, #efefef 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
padding: 0px
`
}
},
{ field: 'ck', checkbox: true },
{ field: 'id', title: 'ID', width: 50 },
{ field: 'name', title: '姓名', width: 120, editor: 'text' },
{ field: 'birth', title: '出生日期', width: 140, editor: 'datebox' },
{ field: 'score', title: '成绩', width: 100, editor: 'text' }
]],
data: allRows
// 初始化页面
document.addEventListener('DOMContentLoaded', function () {
renderContent();
setupEventListeners();
});
// 点击行编辑
function onClickRow(index) {
if (editIndex !== index) {
if (endEditRow()) {
$('#subgrid').datagrid('beginEdit', index);
editIndex = index;
}
}
}
// 渲染内容
function renderContent() {
const mainContent = document.getElementById('main-content');
const statusBadge = document.getElementById('status-badge');
const headerSubtitle = document.getElementById('header-subtitle');
// 保存行
function endEditRow() {
if (editIndex === undefined) return true;
if ($('#subgrid').datagrid('validateRow', editIndex)) {
$('#subgrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
if (appState.hasSpace) {
// 用户有空间时的界面
statusBadge.innerHTML = "🏠 拥有空间";
headerSubtitle.textContent = "管理您的共享空间";
mainContent.innerHTML = `
<div class="space-info">
<div class="space-name">${appState.spaceName}</div>
<div class="space-status">已创建 · ${appState.spaceMembers.length - 1}人已加入</div>
</div>
<div class="invite-section">
<div class="invite-header">
<div class="invite-title">邀请好友加入</div>
<button class="invite-toggle">展开</button>
</div>
<div class="invite-content active">
<div class="invite-link">
<div class="link-text">${appState.inviteLink}</div>
<button class="copy-btn">复制链接</button>
</div>
<div class="qrcode-container">
<p>或使用二维码邀请</p>
<div class="qrcode">二维码区域</div>
</div>
<div class="share-options">
<button class="share-btn">
<div class="share-icon">微</div>
<span>微信</span>
</button>
<button class="share-btn">
<div class="share-icon">Q</div>
<span>QQ</span>
</button>
<button class="share-btn">
<div class="share-icon">链</div>
<span>复制链接</span>
</button>
</div>
</div>
</div>
<div class="user-list-container">
<div class="user-list-title">
<span>空间成员</span>
<span class="user-count">${appState.spaceMembers.length}人</span>
</div>
<div class="user-list">
${appState.spaceMembers.map(member => `
<div class="user-item">
<div class="user-avatar">${member.avatar}</div>
<div class="user-info">
<div class="user-name">${member.name} ${member.role === '创建者' ? '<span class="owner-badge">创建者</span>' : ''}</div>
<div class="user-role">${member.status}</div>
</div>
<div style="display: flex; gap: 8px;">
${member.role !== '创建者' ?
'<button class="user-action-btn remove-user" data-userid="' + member.id + '" title="移除">❌</button>' :
'<button class="user-action-btn" title="设置">⚙️</button>'
}
</div>
</div>
`).join('')}
</div>
</div>
<button class="leave-btn" id="delete-space-btn">删除空间</button>
<div class="switch-mode">
<button class="switch-btn" id="switch-to-join">退出并加入其他空间</button>
</div>
`;
} else {
$.messager.alert('提示', '请填写完整!');
return false;
// 用户没有空间时的简洁创建引导界面
statusBadge.innerHTML = "🔒 未加入任何空间";
headerSubtitle.textContent = "与朋友共享您的空间";
mainContent.innerHTML = `
<div class="create-space-card">
<div class="create-icon">🏠</div>
<div class="create-title">创建共享空间</div>
<div class="create-desc">创建一个专属空间,邀请朋友加入,共享文件、聊天和协作</div>
<button class="action-btn" id="create-space-btn">创建我的空间</button>
</div>
<div style="text-align: center; margin: 30px 0; color: #666; font-size: 14px;">
或
</div>
<div style="text-align: center;">
<button class="secondary-btn" id="join-space-btn">加入已有空间</button>
</div>
`;
}
}
// 新增行
function addRow() {
if (!endEditRow()) return;
// 渲染加入空间界面
function renderJoinSpace() {
const mainContent = document.getElementById('main-content');
const statusBadge = document.getElementById('status-badge');
const headerSubtitle = document.getElementById('header-subtitle');
let newRow = { id: getNextId(), name: '', birth: '', score: '' };
allRows.push(newRow);
$('#subgrid').datagrid('loadData', allRows);
statusBadge.innerHTML = "🔍 加入空间";
headerSubtitle.textContent = "输入邀请信息加入空间";
let newIndex = allRows.length - 1;
$('#subgrid').datagrid('selectRow', newIndex);
$('#subgrid').datagrid('beginEdit', newIndex);
editIndex = newIndex;
$('#subgrid').datagrid('scrollTo', newIndex);
mainContent.innerHTML = `
<div class="form-group">
<label for="invite-code">邀请码</label>
<input type="text" id="invite-code" class="form-control" placeholder="请输入6位邀请码">
</div>
<button class="action-btn" id="confirm-join-btn">加入空间</button>
<div style="text-align: center; margin: 20px 0; color: #666; font-size: 14px;">
或
</div>
<button class="secondary-btn">
<span>扫码加入</span>
</button>
<div class="switch-mode">
<button class="switch-btn" id="back-to-main">返回</button>
</div>
`;
}
// 删除行
function removeRows() {
let selected = $('#subgrid').datagrid('getChecked');
if (selected.length === 0) { $.messager.alert('提示', '请先勾选要删除的行'); return; }
let ids = selected.map(r => r.id);
allRows = allRows.filter(r => !ids.includes(r.id));
$('#subgrid').datagrid('loadData', allRows);
editIndex = undefined;
}
// 设置事件监听器
function setupEventListeners() {
// 创建空间功能
document.addEventListener('click', function (e) {
if (e.target.id === 'create-space-btn') {
appState.hasSpace = true;
renderContent();
}
function getData() {
console.log("===getData===")
console.log($('#subgrid').datagrid('getData'));
console.log("===getChanges===")
console.log($('#subgrid').datagrid('getChanges'));
console.log("===allRows===")
console.log("===allRows===")
}
if (e.target.id === 'join-space-btn') {
renderJoinSpace();
}
// 打印数据
function confirmDelete() { console.log('当前有效数据:', allRows); }
if (e.target.id === 'back-to-main') {
renderContent();
}
// ID 生成
function getNextId() {
if (allRows.length === 0) return 1;
return Math.max(...allRows.map(r => r.id)) + 1;
}
if (e.target.id === 'switch-to-join') {
if (confirm('确定要删除当前空间并加入其他空间吗?')) {
appState.hasSpace = false;
renderJoinSpace();
}
}
// 生成模拟数据
function createMockData(count = 100) {
let data = [];
for (let i = 1; i <= count; i++) {
data.push({
id: i,
name: "用户" + i,
birth: randomDate("1980-01-01", "2005-12-31"),
score: Math.floor(Math.random() * 41) + 60
});
}
return data;
}
if (e.target.id === 'delete-space-btn') {
if (confirm('确定要删除这个空间吗?此操作不可撤销。')) {
appState.hasSpace = false;
renderContent();
}
}
});
// 随机日期
function randomDate(start, end) {
let st = new Date(start).getTime();
let et = new Date(end).getTime();
let t = st + Math.random() * (et - st);
let d = new Date(t);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
// 复制链接功能
document.addEventListener('click', function (e) {
if (e.target.classList.contains('copy-btn')) {
const linkText = e.target.closest('.invite-link').querySelector('.link-text').textContent;
navigator.clipboard.writeText(linkText).then(() => {
const originalText = e.target.textContent;
e.target.textContent = '已复制';
setTimeout(() => {
e.target.textContent = originalText;
}, 2000);
});
}
});
// 邀请区域展开/收起功能
document.addEventListener('click', function (e) {
if (e.target.classList.contains('invite-toggle')) {
const inviteContent = e.target.closest('.invite-section').querySelector('.invite-content');
inviteContent.classList.toggle('active');
e.target.textContent = inviteContent.classList.contains('active') ? '收起' : '展开';
}
});
// 移除用户功能
document.addEventListener('click', function (e) {
if (e.target.classList.contains('remove-user')) {
const userId = parseInt(e.target.getAttribute('data-userid'));
const userName = e.target.closest('.user-item').querySelector('.user-name').textContent.split(' ')[0];
if (confirm(`确定要移除 ${userName} 吗?`)) {
// 从成员列表中移除
appState.spaceMembers = appState.spaceMembers.filter(member => member.id !== userId);
renderContent();
}
}
});
// 加入空间功能
document.addEventListener('click', function (e) {
if (e.target.id === 'confirm-join-btn') {
const inviteCode = document.getElementById('invite-code').value;
if (inviteCode && inviteCode.length === 6) {
// 模拟加入空间
alert(`成功加入空间!邀请码: ${inviteCode}`);
// 这里可以添加实际加入空间的逻辑
// 例如:appState.hasSpace = true; 并设置空间信息
// 返回主界面
renderContent();
} else {
alert('请输入有效的6位邀请码');
}
}
});
}
</script>
</body>