当前位置： 首页 > article >正文

Layui实现table动态添加行，可删除、表格可编辑，小数校验

article 2025/4/1 10:02:46

实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中会传过来一个总的重量weight，E列是根据D列填写的百分比自动相乘计算的，其中行都是动态变化的，工具栏有个新增按钮，点击新增按钮，就会增加一行，点击行的删除按钮，就会删除

直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>物质描述表格</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
  <style>
    .layui-table-cell {
      height: auto;
      line-height: 1.5;
    }
    .layui-table-edit {
      text-align: right;
    }
    .layui-card-body {
      overflow: auto;
      max-height: 80vh;
    }
    .layui-table-box {
      overflow: visible;
    }
    .layui-table-body {
      overflow: visible;
    }
    .row-operate {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">物质描述表格</div>
          <div class="layui-card-body">
            <div class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label">总重量(g)</label>
                <div class="layui-input-inline">
                  <input type="number" id="totalWeight" class="layui-input" placeholder="请输入总重量">
                </div>
                <button class="layui-btn" id="setWeight">设置重量</button>
              </div>
            </div>
            <table id="materialTable" lay-filter="materialTable"></table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 行操作按钮模板 -->
  <script type="text/html" id="rowOperate">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
  </script>

  <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
  <script>
    layui.use(['table', 'jquery'], function(){
      var table = layui.table;
      var $ = layui.jquery;
      var totalWeight = 0;
      
      // 初始化表格
      table.render({
        elem: '#materialTable',
        data: [],
        height: 'full-200', // 自动高度，减去200px
        page: false, // 关闭分页
        toolbar: '<div><button class="layui-btn layui-btn-sm" lay-event="addRow"><i class="layui-icon"></i>新增一行</button></div>',
        cols: [[
          {field: 'substanceName', title: '物质名称<br>Substance Name', edit: 'text', width: 200},
          {field: 'casNo', title: 'CAS No.', edit: 'text', width: 150},
          {field: 'substancePercent', title: '物质%<br>Substance %', edit: 'text', width: 150, style: 'text-align: right;', event: 'editPercent'},
          {field: 'weight', title: '重量(g)<br>Weight', width: 150, templet: function(d){
            return (d.substancePercent * totalWeight / 100).toFixed(6);
          }},
          {title: '操作', width: 100, align: 'center', toolbar: '#rowOperate', fixed: 'right'}
        ]],
        done: function(res, curr, count){
          // 监听单元格编辑
          table.on('edit(materialTable)', function(obj){
            var data = obj.data; // 得到所在行所有键值
            var value = obj.value; // 得到修改后的值
            var field = obj.field; // 得到字段
            
            if(field === 'substancePercent') {
              // 验证输入是否为数字且最多5位小数
              var regex = /^\d+(\.\d{1,5})?$/;
              if(!regex.test(value)) {
                layer.msg('请输入有效的数字，最多5位小数');
                return false;
              }
              
              var percent = parseFloat(value);
              if(percent < 0 || percent > 100) {
                layer.msg('百分比必须在0-100之间');
                return false;
              }
              
              // 当百分比修改时，更新重量显示
              table.reload('materialTable', {
                data: table.cache.materialTable
              });
              
              // 检查第一行是否是硅片(Silicon Die)的特殊情况
              var tableData = table.cache.materialTable;
              if(tableData.length > 0 && tableData[0].substanceName === 'Silver' && tableData[0].homogeneousMaterial === 'Silicon Die') {
                // 计算其他行的百分比总和
                var sum = 0;
                for(var i = 1; i < tableData.length; i++) {
                  if(!isNaN(parseFloat(tableData[i].substancePercent))) {
                    sum += parseFloat(tableData[i].substancePercent);
                  }
                }
                // 更新第一行的百分比
                tableData[0].substancePercent = (100 - sum).toFixed(5);
                table.reload('materialTable', {
                  data: tableData
                });
              }
            }
          });
          
          // 百分比列点击事件，限制输入为数字
          table.on('tool(materialTable)', function(obj){
            if(obj.event === 'editPercent') {
              var td = $(this);
              var field = td.data('field');
              var input = td.find('.layui-table-edit');
              
              if(input.length > 0) {
                input.attr('type', 'number');
                input.attr('step', '0.00001');
                input.on('input', function(){
                  var value = $(this).val();
                  // 限制小数点后最多5位
                  if(value.indexOf('.') !== -1 && value.split('.')[1].length > 5) {
                    $(this).val(value.substring(0, value.indexOf('.') + 6));
                  }
                });
              }
            }
          });
          
          // 行工具事件（删除按钮）
          table.on('tool(materialTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'delete') {
              layer.confirm('确定要删除这行数据吗？', function(index){
                if(data.id) {
                  // 如果有id，调用后台接口删除
                  $.ajax({
                    url: '/api/material/delete', // 替换为实际删除接口
                    type: 'POST',
                    data: {id: data.id},
                    success: function(res) {
                      if(res.success) {
                        obj.del(); // 删除表格行
                        layer.msg('删除成功');
                      } else {
                        layer.msg(res.message || '删除失败');
                      }
                    },
                    error: function() {
                      layer.msg('删除请求失败');
                    }
                  });
                } else {
                  // 没有id，直接删除当前行
                  obj.del();
                  layer.msg('已删除');
                  
                  // 如果是硅片(Silicon Die)的第一行被删除，需要重新计算第一行的百分比
                  var tableData = table.cache.materialTable;
                  if(tableData.length > 0 && tableData[0].substanceName === 'Silver' && tableData[0].homogeneousMaterial === 'Silicon Die') {
                    // 计算其他行的百分比总和
                    var sum = 0;
                    for(var i = 1; i < tableData.length; i++) {
                      if(!isNaN(parseFloat(tableData[i].substancePercent))) {
                        sum += parseFloat(tableData[i].substancePercent);
                      }
                    }
                    // 更新第一行的百分比
                    tableData[0].substancePercent = (100 - sum).toFixed(5);
                    table.reload('materialTable', {
                      data: tableData
                    });
                  }
                }
                layer.close(index);
              });
            }
          });
        }
      });
      
      // 工具栏事件
      table.on('toolbar(materialTable)', function(obj){
        if(obj.event === 'addRow') {
          var tableData = table.cache.materialTable || [];
          tableData.push({
            substanceName: '',
            casNo: '',
            substancePercent: '0',
            weight: 0
          });
          table.reload('materialTable', {
            data: tableData
          });
          
          // 滚动到表格底部
          setTimeout(function(){
            $('html, body').animate({
              scrollTop: $(document).height()
            }, 500);
          }, 100);
        }
      });
      
      // 设置总重量
      $('#setWeight').on('click', function(){
        var weight = parseFloat($('#totalWeight').val());
        if(!isNaN(weight) && weight > 0) {
          totalWeight = weight;
          table.reload('materialTable', {
            data: table.cache.materialTable
          });
          layer.msg('总重量已设置为: ' + weight + 'g');
        } else {
          layer.msg('请输入有效的总重量');
        }
      });
      
      // 示例数据加载（可根据需要移除）
      function loadSampleData() {
        var sampleData = [
          {id: 1, homogeneousMaterial: 'Silicon Die', substanceName: 'Silver', casNo: '7439-89-6', substancePercent: (100-0.003-0.008-0.42-0.00025-0.00025-0.001-0.001-0.0005-0.0005).toFixed(5)},
          {id: 2, homogeneousMaterial: 'Silicon Die', substanceName: 'Silicon', casNo: '7440-21-3', substancePercent: '0.003'},
          {id: 3, homogeneousMaterial: 'Silicon Die', substanceName: 'Manganese', casNo: '7439-96-5', substancePercent: '0.008'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Nickel', casNo: '7440-02-0', substancePercent: '0.42'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Sulfur', casNo: '7704-34-9', substancePercent: '0.00025'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Phosphorus', casNo: '7723-14-0', substancePercent: '0.00025'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Aluminum', casNo: '7429-90-5', substancePercent: '0.001'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'chromium', casNo: '7440-47-3', substancePercent: '0.001'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Carbon', casNo: '7440-44-0', substancePercent: '0.0005'},
          {homogeneousMaterial: 'Silicon Die', substanceName: 'Silver', casNo: '7440-22-4', substancePercent: '0.0005'},
          {homogeneousMaterial: 'WIRE', substanceName: 'Copper', casNo: '7440-50-8', substancePercent: '0.98'},
          {homogeneousMaterial: 'WIRE', substanceName: 'Palladium', casNo: '7440-05-3', substancePercent: '0.019'},
          {homogeneousMaterial: 'WIRE', substanceName: 'Gold', casNo: '7440-57-5', substancePercent: '0.001'}
        ];
        
        table.reload('materialTable', {
          data: sampleData
        });
      }
      
      // 加载示例数据（可根据需要移除）
      // loadSampleData();
    });
  </script>
</body>
</html>

功能说明

  1. 表格结构：

    • 显示物质名称、CAS No.、物质百分比和重量四列

    • A列(均质名称)不显示，但会保存在数据中

  2. 编辑功能：

    • 物质名称、CAS No.和物质百分比可编辑

    • 重量列自动计算(物质百分比 × 总重量)，不可直接编辑

  3. 特殊逻辑：

    • 如果是硅片(Silicon Die)的第一行(Silver)，其百分比会自动计算为100%减去其他物质百分比的总和

    • 其他行按用户输入的百分比计算

  4. 工具栏：

    • 提供"新增一行"按钮，点击可添加新行

  5. 总重量设置：

    • 顶部有输入框可设置总重量

    • 设置后所有行的重量会自动重新计算

使用说明

  1. 引入LayUI的CSS和JS文件

  2. 设置总重量后，表格中的重量列会自动计算

  3. 点击"新增一行"可添加新的物质记录

  4. 编辑百分比时，如果是硅片的第一行，会自动重新计算


http://www.kler.cn/a/614916.html

相关文章：

  • Android ViewModel学习总结（源码级理解）
  • python 如何打包成exe文件
  • 可拖动对象编辑器使用指南
  • 【Linux】了解基础指令（超详细）
  • Python3基础库入门（个人学习用）
  • Epoll 的本质与原理：高性能网络编程的基石
  • 调用 DeepSeek制作简单的电子宠物
  • 区块链技术在投票系统中的应用：安全、透明与去中心化
  • Linux CentOS 7 搭建我的世界服务器详细教程 （丐版 使用虚拟机搭建）
  • 横扫SQL面试——连续性登录问题
  • 【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页
  • AIDD-人工智能药物设计-利用自动化机器学习（AutoML）方法促进计算机模拟的ADMET特性预测
  • 破界·共生：生成式人工智能（GAI）认证重构普通人的AI进化图谱
  • 【KEIL5.3.7以上版本ARM compiler5 version】
  • 【大模型基础_毛玉仁】5.3 附加参数法：T-Patcher
  • OkHttps工具类的简单使用
  • 测试BioMaster: AI生信分析的demo测试
  • 【HarmonyOS 5】初学者如何高效的学习鸿蒙？
  • Apache Tomcat 深度解析：企业级Java Web容器的架构与实践
  • 深入了解ChatGPT之类的大语言模型笔记