长沙米拓建站,哈尔滨网络优化公司有哪些,网红营销推广,网页制作面试自我介绍需求
table列表中的数据实现下拉框修改数据#xff0c;当默认的下拉框不符合要求时#xff0c;可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。
实现
layui框架下拉框组件只能选择存在的数据#xff0c;不支持将输入的内容显示在input中的功能#x…需求
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 langen
head!-- 引入LayUI --link relstylesheet hrefplugins/layui2.4.5/css/layui.css mediaall
/head
body classno-skin
script srcplugins/layui2.4.5/layui.js charsetutf-8/script
!-- 注意如果你直接复制所有代码到本地上述js路径需要改成你本地的 --
/body
!-- 自定义下拉框组件 --
script typetext/html idselectTpldiv classlayui-form-iteminput typetext idinput_id_key namekey placeholder计划数量修改原因autocompleteoff classlayui-input input-id-keystyleposition:absolute;z-index:2;width:80%;select typetext idselectOptions lay-filterhc_select autocompleteoffplaceholder classlayui-select stylecolor:#000000option value disabled selected请选择或输入/option{{# layui.each(d.dictionaryOptions, function(index, item){ }}option value{{item.name}}{{item.name}}/option{{# }); }}/select/div
/script
scriptfunction 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; // 返回的数组赋值到dictionaryOptionsform.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-indexvar inputField tr.find(.input-id-key); // 直接在tr内查找inputif (inputField.length 0) {//确保查找到inputinputField.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
