Angular 4中如何仅为选中列添加caret

Got it, let's work through this table requirement. You want carets (like sorting arrows) to only show up on selected columns, and remain hidden on all other columns until the user clicks the "Select Identifier" button. Here's a practical, straightforward implementation using vanilla HTML, CSS, and JavaScript—no heavy frameworks required:

First, we'll create a basic table with column headers that include a caret element, plus the trigger button for column selection:

<button id="selectIdentifierBtn">Select Identifier</button>
<table id="dataTable" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>User ID <span class="caret">▼</span></th>
      <th>Username <span class="caret">▼</span></th>
      <th>Email <span class="caret">▼</span></th>
      <th>Join Date <span class="caret">▼</span></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>101</td><td>jdoe</td><td>john@example.com</td><td>2023-01-15</td></tr>
    <tr><td>102</td><td>asmith</td><td>anna@example.com</td><td>2023-03-22</td></tr>
  </tbody>
</table>

We'll hide all carets by default, and only show them for columns marked as "active" (selected by the user). We'll also add a subtle highlight to selected columns for better visibility:

/* Hide carets by default */
.caret {
  display: none;
  margin-left: 6px;
  font-size: 0.8em;
}

/* Show caret only for active (selected) columns */
th.active .caret {
  display: inline-block;
}

/* Optional: Highlight selected column headers */
th.active {
  background-color: #f5f5f5;
  font-weight: bold;
}

We'll listen for clicks on the "Select Identifier" button, let users pick columns, and toggle the active class to show/hide carets. For a better user experience, we'll use a modal with checkboxes instead of a text prompt:

First, add the modal HTML right after the table:

<!-- Column Selection Modal -->
<div id="columnModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
  <h3>Select Columns to Show Carets</h3>
  <div id="columnCheckboxes" style="margin: 15px 0;"></div>
  <div style="display: flex; gap: 10px; justify-content: flex-end;">
    <button id="confirmSelection">Confirm</button>
    <button id="cancelSelection">Cancel</button>
  </div>
</div>

Then add the JavaScript to handle the modal and column selection:

const selectBtn = document.getElementById('selectIdentifierBtn');
const tableHeaders = document.querySelectorAll('#dataTable th');
const modal = document.getElementById('columnModal');
const confirmBtn = document.getElementById('confirmSelection');
const cancelBtn = document.getElementById('cancelSelection');
const checkboxContainer = document.getElementById('columnCheckboxes');

// Open modal and populate checkboxes when button is clicked
selectBtn.addEventListener('click', () => {
  checkboxContainer.innerHTML = '';
  
  // Create a checkbox for each column header
  tableHeaders.forEach((header, index) => {
    const checkboxWrapper = document.createElement('div');
    checkboxWrapper.innerHTML = `
      <input type="checkbox" id="col-${index}" value="${index}">
      <label for="col-${index}">${header.textContent.replace('▼', '').trim()}</label>
    `;
    checkboxContainer.appendChild(checkboxWrapper);
  });
  
  modal.style.display = 'block';
});

// Apply selected columns when user confirms
confirmBtn.addEventListener('click', () => {
  const selectedCheckboxes = document.querySelectorAll('#columnModal input:checked');
  const selectedIndices = Array.from(selectedCheckboxes).map(box => parseInt(box.value));
  
  // Reset all columns first
  tableHeaders.forEach(header => header.classList.remove('active'));
  
  // Add active class to selected columns
  selectedIndices.forEach(index => {
    tableHeaders[index].classList.add('active');
  });
  
  modal.style.display = 'none';
});

// Close modal without changes
cancelBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

How It Works #

• Initial State: All carets are hidden (thanks to the CSS rule).
• After Clicking "Select Identifier": A modal pops up with checkboxes for each column. Users can pick one or more columns.
• After Confirming: Only the selected columns get the active class, which makes their carets visible.

You can tweak the styling (like caret color, modal design) to match your app's theme, and even add logic to remember selected columns if needed.

内容的提问来源于stack exchange，提问作者Ankit Prakash