layui数据表单怎么写出此效果？

问题遇到的现象和发生背景

获取页面固定五行空数据行，然后鼠标移入序号列，序号变为加减按钮，点击加则动态添加一行空数据，反之，则减；

还有鼠标移入则会有伪类属性，input输入框还有选择商品按钮则会显示出来，在点击输入框出现光标，则会有隐藏下拉菜单弹出，然后选择一项，后面的数据内容则会回填；

点击选择商品则会有模态框弹出；

我想要解答思路和方法（最好有代码，用JQ写更好）

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

ZionHH 2021-12-08 11:14

关注

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
        <style>
            .layui-table-cell .btn {
                display: none;
            }
            .layui-table-cell:hover .index {
                display: none;
            }
            .layui-table-cell:hover .btn {
                display: block;
            }
            .layui-table-cell .layui-input-inline {
                display: none;
                align-items: center;
            }
            .layui-table-cell .layui-input-inline.active,
            .layui-table-cell:hover .layui-input-inline {
                display: flex;
            }
            .layui-table-cell .layui-input-inline > input {
                height: 28px;
                margin-right: 4px;
            }
            .layui-table-cell .layui-input-inline > a {
                color: #145eff;
            }
            .layui-table-cell .layui-input-inline > a:hover {
                opacity: .8;
            }
            #goodsLayer {
                display: none;
            }
            #goodsSelector {
                position: absolute;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
                display: none;
            }
            #goodsSelector li {
                cursor: pointer;
                padding: 0 10px;
                line-height: 36px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #goodsSelector li:hover {
                background-color: #5fb878;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <table id="table" lay-filter="table"></table>
        <!-- 选择商品层 -->
        <div id="goodsLayer">
            <table id="goodsTable" lay-filter="goodsTable"></table>
        </div>
        <div id="goodsSelector" class="goods-selector">
            <ul id="selectUl">
                <script id="selectLi" type="text/html">
                    {{#  layui.each(d, function(index, item){ }}
                        <li data-code="{{item.code}}">{{item.name}}</li>
                      {{#  }); }}
                </script>
            </ul>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
        <script>
            layui.use(['jquery', 'table', 'layer', 'laytpl'], function(){
                let $ = layui.jquery,
                    table = layui.table,
                    layer = layui.layer,
                    laytpl = layui.laytpl
                
                const data = [
                    { serialNum: '', name: '', code: null},
                    { serialNum: '', name: '', code: null},
                    { serialNum: '', name: '', code: null},
                    { serialNum: '', name: '', code: null},
                    { serialNum: '', name: '', code: null}
                ]
                const emptyData = { serialNum: '', name: '', code: null}
                const searchData = [
                    { serialNum: 'SP121', name: '篮球', code: 001 },
                    { serialNum: 'SP122', name: '足球', code: 002 },
                    { serialNum: 'SP123', name: '平板', code: 003 },
                    { serialNum: 'SP124', name: '手机', code: 004 },
                    { serialNum: 'SP125', name: '耳机', code: 005 }
                ]
                // 渲染table
                table.render({
                    elem: '#table',
                    height: 312,
                    data: data,
                    page: true,
                    cols: [[
                        { title: '序号', width: 100, align: 'center', templet: function(e) {
                            return '<span class="index">'+ e.LAY_INDEX +'</span>'
                                    +'<div class="btn">'
                                        +'<button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">+</button>'
                                        +'<button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="remove">-</button>'
                                    +'</div>'
                        } },
                        { field: 'name', title: '商品名称', width: 300, templet: function(e) {
                            const active = e.name ? 'active' : ''
                            return '<div class="layui-input-inline add-input-'+ e.LAY_INDEX +' '+ active +'" lay-event="handelSelect">'
                                        +'<input class="layui-input" value="'+ e.name +'" lay-event="selectGoods" />'
                                        +'<a class="" href="javascript:;" lay-event="addGoods">添加商品</a>'
                                    +'</div>'
                        } },
                        { field: 'serialNum', title: '商品编号' },
                        { field: 'code', title: '条形码', width:80 }
                    ]]
                })
                let dataIndex = null
                let curItem = null
                // 行内点击事件
                table.on('tool(table)', function(obj) {
                    const layEvent = obj.event
                    dataIndex = Number($(obj.tr[0]).attr('data-index'))
                    // 获取add-input盒子距离x,y 加上高度
                    const x = $('.add-input-'+ (dataIndex+1) +'')[0].getBoundingClientRect().x + 'px'
                    const y = $('.add-input-'+ (dataIndex+1) +'')[0].getBoundingClientRect().y + 28 + 'px'
                    switch(obj.event) {
                        case 'add':
                            data.splice(dataIndex + 1, 0, emptyData)
                            table.reload('table', {
                                data: data
                            })
                        break
                        case 'remove':
                            layer.confirm('确认删除当前行吗？', function(index){
                                data.splice(dataIndex, 1)
                                layer.close(index)
                                table.reload('table', {
                                    data: data
                                })
                            })
                        break
                        case 'handelSelect':
                            // 点击添加 active 让当前点击选择一直显示
                            $(obj.tr).find('.layui-input-inline').addClass('active')
                        break
                        case 'selectGoods':
                            const width = $('.add-input-'+ (Number(dataIndex)+1) +'').find('.layui-input').innerWidth()
                            $('#goodsSelector').css({
                                top: y,
                                left: x,
                                width: width,
                                display: 'block'
                            })
                        break
                        case 'addGoods':
                            layer.open({
                                type: 1,
                                title: false,
                                shade: 0.1,
                                offset: [y, x],
                                content: $('#goodsLayer'),
                                btn: ['确定', '取消'],
                                yes: function(index, layero) {
                                    layer.close(index)
                                    renderSelTable(dataIndex, checkData)
                                },
                                end: function(index, layero) {
                                    // 选框关闭没有选择，隐藏添加商品
                                    !obj.data.name && $(obj.tr).find('.layui-input-inline').removeClass('active')
                                }
                            })
                        break
                    }
                })
                
                
                // 渲染下拉列表
                var getTpl = selectLi.innerHTML, view = document.getElementById('selectUl');
                laytpl(getTpl).render(searchData, function(html){
                    view.innerHTML = html;
                });
                // 下拉框选择
                $('#goodsSelector li').click(function() {
                    checkData = searchData[$(this).index()]
                    renderSelTable(dataIndex, checkData)
                    hideSelect()
                })
                
                
                // 渲染选择商品表格
                table.render({
                    elem: '#goodsTable',
                    height: 312,
                    data: searchData,
                    page: true,
                    cols: [[
                        { type: 'radio' },
                        { field: 'name', title: '商品名称', width: 300 },
                        { field: 'serialNum', title: '商品编号' },
                        { field: 'code', title: '条形码', width:80 }
                    ]]
                })
                let checkData = null
                table.on('radio(goodsTable)', function(obj){
                    checkData = obj.data
                })
                // 点击空白处隐藏下拉框
                $(document).click(function(e) {
                    const tClass = $(e.target).attr('class')
                    if (tClass !== 'layui-input') {
                        hideSelect()
                    }
                })
                
                // 渲染选择后的table
                function renderSelTable(dataIndex, checkData) {
                    data[dataIndex] = checkData
                    table.reload('table', {
                        data: data
                    })
                }
                // 隐藏下拉框
                function hideSelect() {
                    $('#goodsSelector').css('display', 'none')
                    // 下拉框没有选择，隐藏添加商品
                    const value = $('.add-input-'+ (dataIndex+1) +'').find('.layui-input').val()
                    console.log(value)
                    !value && $('.add-input-'+ (dataIndex+1) +'').removeClass('active')
                }
            })
        </script>
    </body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

报告相同问题？

关注问题

layui数据表单怎么写出此效果？ jquery layui 前端
2021-12-08 08:33

回答 1 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt
关于#layui#下拉框数据回显的问题，如何解决？ jquery layui 前端
2022-10-05 14:34

回答 1 已采纳应该是异步问题吧，表单赋值在下拉框请求时就执行了但下拉框数据还没加上导致不回显表单赋值在异步里试试
layui表单数据提交后台失败 c# 前端
2023-03-17 13:39

回答 6 已采纳前端js是没有问题的，你要看下接口返回了的错误信息是什么，因为是接口返回的result.success不为真导致的
解决Layui 表单提交数据为空的问题
2020-12-29 06:04

今天踩了个坑，就是使用layui表单提交时，提交的数据为空。例如，layer.msg(JSON.stringify(data.field));这句代码执行后，页面显示为空对象。 <form class=layui-form action=> <div class=layui-form-...
layui如何将表单数据提交到后台并进行校验 java layui spring
2021-12-19 22:09

回答 2 已采纳 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="
layui(2.2.5)关闭分页，显示全部数据 javascript layui 前端
2022-01-05 16:00

回答 1 已采纳你可以尝试着将分页这个dom节点隐藏直接给pageNum、pageSize 设置 1,99999
layui中如何获取上一层页面表格的数据 javascript layui 前端
2022-03-16 17:24

回答 2 已采纳在图一的时候，把id放到localStorage 里，在图三页面里再获取一下
使用layui前端框架弹出form表单以及提交的示例
2021-01-21 14:13

skin: 'layui-layer-molv' //样式类名自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , icon: 6 // icon , yes: function () { //layer.msg('确定') $....
（layui）在form表单中如何获取选中或点击的button value值 html layui 前端
2021-12-09 09:39

回答 3 已采纳建议使用radio修改样式实现，用layui表单取值一并获取了；使用button又要处理点击添加样式，又要单独获取数据。
从数据库提交到layui表单的图片是数据库中的图片地址，我要怎么样才能转化成图片显示出来 layui 前端框架
2022-03-21 17:08

回答 2 已采纳需要知道你的文件是存放在哪台服务器下及存放的路径。因为数据库仅仅保存了一个相对的图片地址。需要跟你的服务器存放路径拼接后形成完整的访问路径，才可以正常显示出来。比如你的数据库里的图片的url保存是im
layui无法获取到表格中的数据，无法传到layui的iframe进行数据回显 json layui 前端
2021-09-01 14:29

回答 2 已采纳 table.on("tool(tableFilter)", function (obj) {//绑定事件，其中tableFilter是table表情里的 lay-filter="tableFilter
layui清空表单数据_layui如何清除表单的数据？
2020-12-23 12:52

weixin_39520979的博客 layui如何清除表单的数据？下面本篇文章给大家介绍一下layui清空，重置表单数据的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。最近在使用layui框架，在页面进行表单数据提交后，要是...
Layui搜索下拉框无法选择内容 javascript layui 前端
2021-12-23 15:18

回答 2 已采纳经过一步步测试调试，终于找到问题所在：如果使用搜索选择框，select的option的value中必须得有值，才可以正常反馈；普通下拉选择框，即便是value中值为空，也可以正常反馈，故容易忽略该点。
【前端框架】 layui form 表单提交获取数据、解决ajax提交数组问题
2023-09-13 23:12

愚小二的博客获取 layui-form 表单数据。
layui实现多选或批量删除数据表格行数据.rtf
2020-07-11 10:34

layui实现多选或批量数据表格行数据
没有解决我的问题, 去提问