如何基于property_identifier范围实现点击展开/折叠分组数据行

需求概述 #

• 按property_identifier字段数值范围对API返回的property_details数据分组：
  • 0 ≤ 值 ≤ 150：归入General组
  • 151 ≤ 值 ≤ 300：归入Alarm组
  • 301 ≤ 值 ≤ 500：归入Historian组
• 点击分组标题，可单独展开/折叠对应组的数据行
• 支持动态加载或更新数据后自动重新分组渲染

示例数据源 #

const propertyDetails = [
  {property_identifier: 111, property_value: {}, property_identifier_name: 'Status Flags'},
  {property_identifier: 36, property_value: {}, property_identifier_name: 'Event State'},
  {property_identifier: 81, property_value: {}, property_identifier_name: 'Out Of Service'},
  {property_identifier: 84, property_value: {}, property_identifier_name: 'Polarity'},
  {property_identifier: 0, property_value: {}, property_identifier_name: 'Acked Transitions'},
  {property_identifier: 4, property_value: {}, property_identifier_name: 'Active Text'},
  {property_identifier: 6, property_value: {}, property_identifier_name: 'Alarm Value'},
  {property_identifier: 15, property_value: {}, property_identifier_name: 'Change Of State Count'},
  {property_identifier: 16, property_value: {}, property_identifier_name: 'Change Of State Time'},
  {property_identifier: 17, property_value: {}, property_identifier_name: 'Notification Class'},
  {property_identifier: 28, property_value: {}, property_identifier_name: 'Description'},
  {property_identifier: 31, property_value: {}, property_identifier_name: 'Device Type'},
  {property_identifier: 33, property_value: {}, property_identifier_name: 'Elapsed Active Time'},
  {property_identifier: 35, property_value: {}, property_identifier_name: 'Event Enable'},
  {property_identifier: 46, property_value: {}, property_identifier_name: 'Inactive Text'},
  {property_identifier: 72, property_value: {}, property_identifier_name: 'Notify Type'},
  {property_identifier: 103, property_value: {}, property_identifier_name: 'Reliability'},
  {property_identifier: 113, property_value: {}, property_identifier_name: 'Time Delay'},
  {property_identifier: 115, property_value: {}, property_identifier_name: 'Time Of State Count Reset'},
  {property_identifier: 130, property_value: {}, property_identifier_name: 'Event Time Stamps'},
  {property_identifier: 168, property_value: {}, property_identifier_name: 'Profile Name'},
  {property_identifier: 351, property_value: {}, property_identifier_name: 'Event Message Texts'},
  {property_identifier: 352, property_value: {}, property_identifier_name: 'Event Message Texts Config'},
  {property_identifier: 353, property_value: {}, property_identifier_name: 'Event Detection Enable'},
  {property_identifier: 354, property_value: {}, property_identifier_name: 'Event Algorithm Inhibit'},
  {property_identifier: 356, property_value: {}, property_identifier_name: 'Time Delay Normal'},
  {property_identifier: 357, property_value: {}, property_identifier_name: 'Reliability Evaluation Inhibit'},
  {property_identifier: 485, property_value: {}, property_identifier_name: 'Profile Location'}
];

实现代码 #

HTML结构 #

<div id="propertyContainer"></div>

JavaScript逻辑 #

// 分组配置
const groupConfig = [
  { name: 'General', min: 0, max: 150 },
  { name: 'Alarm', min: 151, max: 300 },
  { name: 'Historian', min: 301, max: 500 }
];

// 数据分组函数
function groupProperties(data) {
  return groupConfig.map(group => {
    const items = data.filter(item => 
      item.property_identifier >= group.min && item.property_identifier <= group.max
    );
    return { ...group, items };
  });
}

// 渲染分组数据
function renderGroups(groups) {
  const container = document.getElementById('propertyContainer');
  container.innerHTML = '';

  groups.forEach(group => {
    // 创建分组标题
    const groupHeader = document.createElement('div');
    groupHeader.className = 'group-header';
    groupHeader.innerHTML = `<span>${group.name} (${group.items.length} 项)</span>`;
    groupHeader.addEventListener('click', () => toggleGroup(groupHeader.nextElementSibling));

    // 创建分组内容容器
    const groupContent = document.createElement('div');
    groupContent.className = 'group-content collapsed';

    // 渲染组内数据行
    group.items.forEach(item => {
      const row = document.createElement('div');
      row.className = 'property-row';
      row.innerHTML = `
        <div>ID: ${item.property_identifier}</div>
        <div>名称: ${item.property_identifier_name}</div>
      `;
      groupContent.appendChild(row);
    });

    container.appendChild(groupHeader);
    container.appendChild(groupContent);
  });
}

// 展开/折叠切换函数
function toggleGroup(content) {
  content.classList.toggle('collapsed');
}

// 初始化渲染（模拟API数据返回后调用）
renderGroups(groupProperties(propertyDetails));

// 动态更新数据示例（比如新数据从API获取后）
function updateData(newData) {
  renderGroups(groupProperties(newData));
}

CSS样式 #

.group-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  margin-top: 8px;
  border-radius: 4px;
}

.group-content {
  padding: 8px 16px;
  transition: max-height 0.3s ease;
  max-height: 1000px;
}

.group-content.collapsed {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
}

.property-row {
  display: flex;
  gap: 20px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

关键说明 #

1. 分组逻辑：通过groupProperties函数根据配置的数值范围对数据进行分组，逻辑清晰且易于修改范围
2. 动态渲染：renderGroups函数负责生成DOM结构，数据更新时只需调用updateData传入新数据即可重新渲染
3. 展开/折叠：通过CSS的max-height过渡实现平滑的展开/折叠效果，点击标题触发切换类名

内容的提问来源于stack exchange，提问作者sumit singh