u
This commit is contained in:
1 parent
d51eacb8ad
commit
44b3ef27d2
50 files changed
+3141
-9734
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user