h5 实现tableview

实现H5中的TableView

在H5中实现类似原生TableView的效果，可以通过HTML、CSS和JavaScript结合完成。以下是几种常见方法：

使用原生HTML和CSS

通过HTML的<table>标签结合CSS样式可以实现基础表格效果：

<table id="tableView">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
  </tbody>
</table>

#tableView {
  width: 100%;
  border-collapse: collapse;
}
#tableView th, #tableView td {
  border: 1px solid #ddd;
  padding: 8px;
}
#tableView tr:nth-child(even) {
  background-color: #f2f2f2;
}

使用CSS Flexbox布局

对于更灵活的布局，可以使用Flexbox模拟表格行为：

<div class="table-view">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
  </div>
  <div class="row">
    <div class="cell">Data 1</div>
    <div class="cell">Data 2</div>
  </div>
</div>

.table-view {
  display: flex;
  flex-direction: column;
}
.header, .row {
  display: flex;
}
.cell {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
}

使用JavaScript动态生成

对于大量数据，建议使用JavaScript动态生成内容：

const data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

function renderTableView(data) {
  const table = document.createElement('table');
  const tbody = document.createElement('tbody');

  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.id}</td>
      <td>${item.name}</td>
    `;
    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  document.body.appendChild(table);
}

renderTableView(data);

使用第三方库

对于更复杂的需求，可以考虑使用以下库：

• DataTables：功能丰富的表格插件
• Handsontable：类似Excel的表格控件
• ag-Grid：企业级表格解决方案

以DataTables为例：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%"></table>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
  $('#example').DataTable({
    data: data,
    columns: [
      { title: "ID", data: "id" },
      { title: "Name", data: "name" }
    ]
  });
});
</script>

实现滚动加载

对于长列表，可以添加滚动加载功能：

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadMoreData();
  }
});

function loadMoreData() {
  // 加载更多数据的逻辑
}

以上方法可以根据具体需求选择或组合使用，实现H5中的TableView功能。