layui 下拉选择框数据显示空白_怎样用数据透视表进行出入库管理

方法/步骤1/11分步阅读

选中表格数据区域,点击插入,点开数据透视表下拉箭头,选择数据透视表,弹出创建数据透视表对话框。

41338d01c8480324fea18d371cce0f60.png

2/11

在对话框中选择放置数据透视表的位置下面的选项中点选“现有工作表”,插入点放到位置后面的空白框,点击任一空白单元格,点击确定。

b930e70b6fe3430ae4cbf2b8424ae550.png

3/11

在数据透视表字段列表对话框中将产品名称拖到行标签下方空白框,将入库和出库拖到数值下方空白框,关闭对话框。

78972f1dd23e2b4a4491136e458ab859.png

4/11

点击数据透视表,上方菜单栏会出现透视表选项,点开设计,在左侧点开总计下拉箭头,选择“对行和列禁用”。

afafd5c52d066559eb8ed52ac1ac3de8.png

5/11

点击数据透视表的标题,这里点击出库,点击选项,在选项中计算区域点开“域、项目和集”下拉箭头。

6663b38c893a09f7c09e3225ee838638.png

6/11

在下拉选项中选择“计算字段”,弹出插入计算字段对话框。

6b6337e522b855c67fa3c44494c3c528.png

7/11

如下图所示,在对话框中名称后面的空白框内输入要增加的计算项的名称,这里输入“剩余库存”,在公式后面的空白框中输入=,到下方字段列表中双击入库,可以看到入库已引用到等号后面,在入库后面输入减号,然后双击出库。意思为剩余库存=入库-出库。点击添加,点击确定。这时可以看到已在透视表中添加了剩余库存字段并进行了计算。

fc77dc273f09f9d184981d2092a27a6a.png

8dd98a1db36154c71e7e653f904e6fc6.png

8/11

当我们在选中的表格区域内,插入数据时,点击选项中的刷新-全部刷新,即可看到透视表中的进销存数据可以自动更新。

52cbe7bf4e50328afb42f8d3180bb358.png

c3539edb9740b27b2cc1ba4f83bb2af9.png

9/11

当我们在原选中的表格区域之外录入数据时,我们点击选项中的刷新-全部刷新,可以看到数据无法进行自动更新,怎么办呢?

7776a1ba814892ffd8ba3087aba5fd12.png

7650bda6e4aae0f03929fc5f64524ab5.png

10/11

我们点开选项,点击更改数据源下拉箭头,选择更改数据源,这时会弹出选择数据对话框,我们将新录入的数据选择在计算范围内,点击确定,回到透视表即可看到数据已更新完成。

25a6e5d2a991674226bba1e6129fb947.png

1cb9cc697280663b757ced35c2241e85.png

11/11

以上就是用数据透视表进行进出库管理的操作过程。

部分图文来自网络,侵删。

aabfb787aecdd4d7b9f02c296a147bb4.png

layui架下的下拉选择实现树形复选结构通常需要结合它的table组件和select组件来构建。以下是一个基本的Demo示例: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/layui@2.6.9/css/layui.css"> </head> <body> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.9/layui.js"></script> <style> .tree-check { display: none; } </style> <div id="demo"> <select lay-filter="treeSelect" multiple class="layui-input tree-check"> <!-- 树状数据源 --> <option value="">请选择</option> <volist name="treeData" id="vo"> <option value="{{ vo.id }}">{{ vo.name }}</option> <option lay-uncheck-strict="true" lay-skin="tree" lay-checked="{ checked: vo.subChecked }" lay-text="{{ vo.name }} ({{ vo.subChecked ? '已选中' : '未选中' }})"> {{ vo.name }} <volist name="vo.children" id="subVo"> <option lay-skin="tree-child" lay-checked="{ checked: $.inArray(subVo.id, selectedIds) !== -1 }">{{ subVo.name }}</option> </volist> </option> </volist> </select> </div> <script> var layui = layui; // 模拟数据,实际项目中可以替换为你自己的树状数据源 var treeData = [ {id: 1, name: '父节点1', children: [{id: 2, name: '子节点1'}, {id: 3, name: '子节点2'}]}, // ... 其他节点 ]; layui.use(['laytable', 'layselect'], function () { var table = layui.laytable({ elem: '#demo', cellMinWidth: 80, toolbar: ['refresh'], cols: [[ {field: 'name', title: '名称', type: 'text'}, {field: 'status', title: '状态', width: 80, align: 'center'} ]] }); // 初始化选择并绑定树形数据 var treeSelect = layui.layselect.render({ elem: '.tree-check', skin: 'tree', filter: true, placeholder: '请选择', dataSource: treeData, checkStrictly: true, // 禁止循环引用 itemRender: function(obj){ return '<span>' + obj.name + ' (' + (obj.checked ? '已选中' : '未选中') + ')</span>'; }, onchange: function(value, index, dom) { // 处理复选状态变化,value就是当前选中的节点id数组 // 在这里可以根据需要更新表格的数据或者其他逻辑处理 console.log('选中项:', value); } }); // 填充表格数据 table.data(treeData); }); </script> </body> </html> ``` 在这个例子中,我们首先初始化了一个`layselect`的树形复选选择,并设置了其数据源。然后通过`onchange`事件监听选择的变化,你可以在这里添加业务逻辑处理复选选择。 注意:这个示例假设你已经引入了layui库并且有一个名为`treeData`的模拟数据源,你需要根据实际情况修改这部分内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值