AcidificationModel/pages/Visualization/Visualization.wxml

<scroll-view class="table-container" scroll-x="true" scroll-with-animation="true">
  <!-- 顶部搜索 -->
  <view class="top">
    <view class="topsearch">
      <view class="frame">
        <input value="{{shoopingtext}}" placeholder="请输入搜索内容" bindinput="shoppinginput" />
      </view>
      <text bindtap="search">搜索</text>
    </view>
  </view>

  <!-- 新增按钮 -->
  <view class="add-btn-container">
    <button class="add-btn" bindtap="onAdd">新增</button>
  </view>

  <!-- 表头 -->
  <view class="table">
    <view class="table-header">
      <view class="table-cell">序号</view>
      <view class="table-cell">0 day pH</view>
      <view class="table-cell">有机质含量</view>
      <view class="table-cell">土壤粘粒重量</view>
      <view class="table-cell">阳离子交换量</view>
      <view class="table-cell">氢离子含量</view>
      <view class="table-cell">铵离子含量</view>
      <view class="table-cell">铝离子含量</view>
      <view class="table-cell">游离氧化铝</view>
      <view class="table-cell">游离氧化铁</view>
      <view class="table-cell">105 day pH</view>
      <view class="table-cell">采集位置</view>
      <view class="table-cell">采集日期</view>
    </view>

    <!-- 数据加载中 -->
    <view wx:if="{{loading}}" class="loading">数据加载中，请稍候...</view>

    <!-- 无数据提示 -->
    <view wx:if="{{!loading && filteredRows.length === 0}}" class="no-data">暂无数据</view>

    <!-- 表格内容 -->
    <scroll-view wx:else scroll-y="true" class="table-body">
      <block wx:for="{{filteredRows}}" wx:key="index">
        <view class="table-row" bindtap="onRowClick" data-index="{{index}}" data-row="{{item}}">
          <view class="table-cell">{{item['0 day pH']}}</view>
          <view class="table-cell">{{item['OM g/kg']}}</view>
          <view class="table-cell">{{item['CL g/kg']}}</view>
          <view class="table-cell">{{item['CEC cmol/kg']}}</view>
          <view class="table-cell">{{item['H+ cmol/kg']}}</view>
          <view class="table-cell">{{item['HN mg/kg']}}</view>
          <view class="table-cell">{{item['Al3plus']}}</view>
          <view class="table-cell">{{item['Free alumina g/kg']}}</view>
          <view class="table-cell">{{item['Free iron oxides g/kg']}}</view>
          <view class="table-cell">{{item['105 day pH']}}</view>
          <view class="table-cell">{{item['Collection location']}}</view>
          <view class="table-cell">{{item['Collection Date']}}</view>
        </view>
      </block>
    </scroll-view>
  </view>
</scroll-view>

<!-- 新增数据弹窗 -->
<view class="modal" wx:if="{{showAddModal}}">
  <view class="modal-content">
    <view class="page-section-title">游离氧化铁 (free iron oxides g/kg)：</view>
    <input 
      class="input-field" 
      type="text" 
      placeholder="请输入游离氧化铁含量" 
      data-field="IronOxides" 
      bindinput="onInputChange" 
    />

    <view class="page-section-title">有机质含量 (OM g/kg)：</view>
    <input class="input-field" placeholder="请输入OM含量" data-field="OM" bindinput="onInputChange" />
    <view class="page-section-title">土壤粘粒重量 (CL g/kg)：</view>
    <input class="input-field" placeholder="请输入CL含量" data-field="CL" bindinput="onInputChange" />
    <view class="page-section-title">阳离子交换量 (CEC cmol/kg)：</view>
    <input class="input-field" placeholder="请输入CEC含量" data-field="CEC" bindinput="onInputChange" />
    <view class="page-section-title">氢离子含量 (H+ cmol/kg)：</view>
    <input class="input-field" placeholder="请输入H+含量" data-field="Hplus" bindinput="onInputChange" />

    <view class="button-container">
      <button class="submit-btn" bindtap="onSubmitAdd">提交</button>
      <button class="cancel-btn" bindtap="onCancelAdd">取消</button>
    </view>
  </view>
</view>

<!-- 底部编辑删除弹窗 -->
<view class="modal" wx:if="{{showModal}}">
  <view class="modal-content">
    <view class="modal-item" bindtap="onEdit">编辑</view>
    <view class="modal-item delete" bindtap="onDelete">删除</view>
    <view class="modal-item cancel" bindtap="onCancel">取消</view>
  </view>
</view>