需求
table列表中的数据实现下拉框修改数据，当默认的下拉框不符合要求时，可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。
实现
- layui框架下拉框组件只能选择存在的数据，不支持将输入的内容显示在input中的功能，通过拼接输入框和下拉框实现该功能。
- 因使用输入框和下拉框实现，修改数据逻辑也分为两套。
- 输入框：检测input输入框失去焦点时调用更新接口。
- 下拉框：下拉框检测到选择后调用更新接口。
- 功能要求不刷新表格，因此使用
var inputField = tr.find('.input-id-key'); inputField.val(data.value);修改表格显示。 - 使用自定义组件查询出的数据不能正常回显在单元格中，使用
var inputField = row.querySelector('.input-id-key');直接修改页面显示。
效果如下图，样式需自己修改。
实现代码
html
<!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>