先别和我说话 - layui
type: channel
link: https://www.anantree.cn/index.php/category/layui/
items: Layui带dropdown的动态新增表格
items: layui三栏穿梭框

Layui带dropdown的动态新增表格
type: item
date: 2023-10-13T11:08:00+08:00
description: 效果图表格占位 工具栏占位 操作栏占位 dropdown占位 table渲染和dropdown渲染解决思路：用数组来渲染table，新增或删除行之后，更新数组并重新渲染table。css是为了解决dropdown的下拉框嵌入table里var saleList = [] tableIns2 = table.render({ elem: '#myTable' , data: saleList , page: true //开启分页 , cols: [ [ {field: 'number', title: '序号', width: 80, fixed: 'left'}, {field: 'specification', title: '规格', width: 230, templet: '#specDropdown'}, {field: 'specificationName', title: '规格', hide: true}, {field: 'price', title: ' 单价', edit: 'text', width: 130}, {field: 'weight', title: '重量', edit: 'text', width: 130}, {field: 'amount', title: '金额', edit: 'text', width: 130,}, {fixed: 'right', width: '160', title: '操作', toolbar: '#myTableBar'} ] ], css: [ // 设置单元格样式 // 取消默认的溢出隐藏，并设置适当高度 '.layui-table-cell{height: 50px; line-height: 40px;}', '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}', '.layui-table-cell select{height: 36px; padding: 0 5px;}' ].join('') , toolbar: '#myTableToolbar' , done: function (res, curr, count) { var options = this; table.getRowData = function (elem) { var index = $(elem).closest('tr').data('index'); return table.cache[options.id][index] || {}; }; $.ajax({ url: "/dataProClass/getParentList?itemType=8&idLength=4", type: "get", dataType: "json", headers: {"Content-Type": "application/json;charset=UTF-8", "authorization": token}, success: function (res) { dataSpec = res.data; let data = [] for (let i = 0; i < dataSpec.length; i++) { let item = {}; item.id = dataSpec[i].id; item.title = dataSpec[i].item_name data.push(item); } dropdown.render({ elem: '.dropdpwn-demo', // trigger: 'hover', // 此处的 data 值，可根据 done 返回的 res 遍历来赋值 data: data, click: function (obj) { var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) this.elem.find('span').html(obj.title); // 更新数据中对应的字段 data.specification = obj.id; data.specificationName = obj.title; } }); } }); } });表头工具//表头工具 table.on('toolbar(myTable)', function (obj) { switch (obj.event) { case 'addRow': var oldData = table.cache['myTable']; let newData = {number: …

layui三栏穿梭框
type: item
date: 2023-08-28T14:15:45+08:00
description: 组件地址https://github.com/Anantree/layui-transferThree