layui表格内可编辑下拉框
表格内可编辑下拉框扩展自别人的表格内下拉框
一、列模板,这是列配置的templet字段需要使用的。
1.inputdiv,输入框覆盖在下拉框上面左半部。这个样式用来调整输入框和下拉框不会超出单元格。
2.method,和该列字段名一致
3.z-filter,只要有这个属性就够了,没有判断值
4.tb,layui表格的名字,和表格lay-filter一致
<script type="text/html" id="selectTpl"> <div class="inputdiv"> <input class="layui-input" name="method" z-filter="input" data-tableName="tb" style="position:absolute;z-index:2;width:calc(100% - 30px);" /> <select name="mehtod" lay-filter="select" data-tableName="tb" class="layui-border"> <option value=""></option> <option value="更换">更换</option> <option value="维修">维修</option> </select> </div> </script>
二、样式。主要是别人写的,由于我在select外有加了一层div,因此这两个元素样式有所改动
/* 防止下拉框的下拉列表被隐藏*/ .layui-table-cell { /*overflow: visible !important;*/ } .layui-table-box { overflow: visible; } .layui-table-body { overflow: auto; } /* 使得下拉框与单元格刚好合适 */ td .layui-form-select { margin-top: -10px; margin-left: -15px; margin-right: -15px; } td .inputdiv>input { margin-left: -15px; } .layui-form-selected .layui-anim { bottom: auto; }
三、表格列配置
{ field: 'method', title: '类别', templet: (d) => { var temp = $($("#selectTpl").html()); temp.find("select").attr("data-value", d.method)//给下拉框赋值 temp.find("input").attr("value", d.method);//给输入框赋值 return temp[0].outerHTML; } }
三、回调。第一个回调时layui的select的回调,第二个是我自定义的输入框回调,在回调中更新表格缓存数据。这些代码与具体表格无关,没有其他要求不需要更改。
//选择下拉框 form.on("select(select)", function (obj) { var elem = $(obj.elem); var trElem = elem.parents('tr'); var tableName = elem.attr("data-tableName"); var tableData = table.cache[tableName]; $(elem.prev("input")).val(obj.value) tableData[trElem.data('index')][elem.attr('name')] = obj.value; console.log(table.cache); }) //通过事件冒泡监听z-filter元素的change事件 document.onchange = function (e) { if (e.target.getAttribute("z-filter") == null) { return; } var tableName = e.target.getAttribute("data-tableName");//使用触发元素判断所属表格 var elem = $(e.target); var trElem = elem.parents('tr'); var tableData = table.cache[tableName]; tableData[trElem.data('index')][elem.attr('name')] = elem.val();//使用触发元素的name属性判断字段 console.log(table.cache); };