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

翡翠网站建设ppt网络安全工程师是干嘛的

news 2025/10/21 3:47:55

翡翠网站建设ppt,网络安全工程师是干嘛的,如何网站推广宣传,网站规划包含哪些内容实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中…

实现如图需求，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', // 自动高度，减去200pxpage: 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>

功能说明

表格结构：
- 显示物质名称、CAS No.、物质百分比和重量四列
- A列(均质名称)不显示，但会保存在数据中
编辑功能：
- 物质名称、CAS No.和物质百分比可编辑
- 重量列自动计算(物质百分比 × 总重量)，不可直接编辑
特殊逻辑：
- 如果是硅片(Silicon Die)的第一行(Silver)，其百分比会自动计算为100%减去其他物质百分比的总和
- 其他行按用户输入的百分比计算
工具栏：
- 提供"新增一行"按钮，点击可添加新行
总重量设置：
- 顶部有输入框可设置总重量
- 设置后所有行的重量会自动重新计算