꧁小ۣۖิ鸽ۣۖิ子ۣۖิ꧂ 2021-12-08 08:33 采纳率: 66.7%
浏览 70
已结题

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

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

img

img

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

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

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

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

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 12月17日
  • 已采纳回答 12月9日
  • 创建了问题 12月8日

悬赏问题

  • ¥15 能给我一些人生建议吗
  • ¥15 mac电脑，安装charles后无法正常抓包
  • ¥18 visio打开文件一直显示文件未找到
  • ¥15 请教一下，openwrt如何让同一usb储存设备拔插后设备符号不变？
  • ¥30 使用quartz框架进行分布式任务定时调度，启动了两个实例，但是只有一个实例参与调度，另外一个实例没有参与调度，不知道是为什么？请各位帮助看一下原因！！
  • ¥50 怎么获取Ace Editor中的python代码后怎么调用Skulpt执行代码
  • ¥30 fpga基于dds生成幅值相位频率和波形可调的容易信号发生器。
  • ¥15 R语言shiny包和ncdf4包报错
  • ¥15 origin绘制有显著差异的柱状图和聚类热图
  • ¥20 simulink实现滑模控制和pid控制对比，提现前者优势