layui+jsp项目中实现table单元格嵌入下拉选择框功能，下拉选择框可手动输入内容或选择默认值，修改后数据正常回显。

news2024/11/18 6:23:54

需求

table列表中的数据实现下拉框修改数据，当默认的下拉框不符合要求时，可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。

实现

layui框架下拉框组件只能选择存在的数据，不支持将输入的内容显示在input中的功能，通过拼接输入框和下拉框实现该功能。
因使用输入框和下拉框实现，修改数据逻辑也分为两套。
- 输入框：检测input输入框失去焦点时调用更新接口。
- 下拉框：下拉框检测到选择后调用更新接口。
功能要求不刷新表格，因此使用var inputField = tr.find('.input-id-key'); inputField.val(data.value);修改表格显示。
使用自定义组件查询出的数据不能正常回显在单元格中，使用var inputField = row.querySelector('.input-id-key');直接修改页面显示。

效果如下图，样式需自己修改。
在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入LayUI -->
    <link rel="stylesheet" href="plugins/layui2.4.5/css/layui.css" media="all">
</head>
<body class="no-skin">
<script src="plugins/layui2.4.5/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</body>
<!-- 自定义下拉框组件 -->
<script type="text/html" id="selectTpl">
    <div class="layui-form-item">
        <input type="text" id="input_id_key" name="key" placeholder="计划数量修改原因"
               autocomplete="off" class="layui-input input-id-key"
               style="position:absolute;z-index:2;width:80%;">
        <select type="text" id="selectOptions" lay-filter="hc_select" autocomplete="off"
                placeholder="" class="layui-select" style="color:#000000">
            <option value="" disabled selected>请选择或输入</option>
            {{# layui.each(d.dictionaryOptions, function(index, item){ }}
            <option value="{{item.name}}">{{item.name}}</option>
            {{# }); }}
        </select>
    </div>
</script>
<script>
    function tdTitle() {
        $('th').each(function (index, element) {
            $(element).attr('title', $(element).text());
        });
        $('td').each(function (index, element) {
            $(element).attr('title', $(element).text());
        });
    };
    layui.use(['form', 'layedit', 'laydate', 'table', 'element', 'util'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        // 初始化下拉选项数据
        var dictionaryOptions = [];
        // 从接口获取下拉选项数据
        $.ajax({
            url: '/oms/...', // 获取下拉选择框列表接口
            method: 'GET',
            success: function (res) {
                dictionaryOptions = res; // 返回的数组赋值到dictionaryOptions
                form.render('select'); // 更新渲染
            }
        });
        $(document).ready(function () {
            initTab();
            var cols = [[
                {type: 'numbers'},
                {
                    field: 'reason', title: '计划数量修改原因', width: 200, templet: function (d) {
                        d.dictionaryOptions = dictionaryOptions; // 将选项数据绑定到当前行数据
                        return layui.laytpl(document.getElementById('selectTpl').innerHTML).render(d);
                    }
                },
                ......
            ]];
            var type = '';
            initTable1(type, cols);
        });
        //选择框选择后执行，通过获取tr找到对应行的单元格，否则只会修改第一行数据
        form.on('select(hc_select)', function (data) {
            var tr = $(data.elem).closest('tr'); // 确保这能准确找到最近的tr元素
            var index = tr.data('index'); // 使用jQuery的data方法来获取data-index
            var inputField = tr.find('.input-id-key'); // 直接在tr内查找input
            if (inputField.length > 0) {//确保查找到input
                inputField.val(data.value); // 更新值
            } else {
                console.error('未找到指定的输入框。');
            }
            var rowData = table.cache['demoEvent'][index]; // 获取修改单元格的整行数据，调用修改接口时可能需要其他字段
            updateReason(rowData,data.value)//修改逻辑接口
        });
        //鼠标移出输入框执行
        $(document).ready(function () {
            // 使用事件委托方式绑定 blur 事件
            $(document).on('blur', '#input_id_key', function () {
                var inputValue = $(this).val();//单元格输入的值
                var cell = $(this).closest('td');
                var row = cell.closest('tr');
                var rowIndex = row.index(); //行索引
                var rowData = table.cache['demoEvent'][rowIndex];//获取修改单元格的整行数据
                updateReason(rowData,inputValue)//修改逻辑接口
            });
        });
        //table默认加载
        function initTable1(orderType, cols) {
            table.render({
                elem: '#test'
                , url: '/oms/...'
                , height: 'full-150'
                , toolbar: '#myToolbar'
                , cols: cols,
                id: 'demoEvent'
                , where: {
                }
                , page: {
                    layout: ['prev', 'page', 'next', 'countPage', 'count', 'skip'] //自定义分页布局
                    , groups: 2 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }
                , limit: 100
                , done: function (res, curr, count) {
                    if (res.data.length > 0) {
                        // 获取表格的tbody元素
                        var tbody = document.querySelector('#test').nextElementSibling.querySelector('tbody');
                        for (var i = 0; i < res.data.length; i++) {
                            var row = tbody.rows[i];
                            if (row) {
                                // 获取该行的输入框
                                var inputField = row.querySelector('.input-id-key');
                                if (inputField) {
                                    // 回显输入框的值
                                    inputField.value = res.data[i].reason;
                                }
                            }
                        }
                    }
                    tdTitle();
                }
            });
        }
    });
</script>
</html>