var colsChang=[
[
{type: 'checkbox'},
{type: 'numbers',title: '序号'},
{field: 'id', title: 'id'},
{field: 'reuseDegree',title: '复用度',width:110, templet:function(d){
var opt = '<select name="reuseDegree" id="reuseDegree" class="province-selector" lay-filter="reuseDegreeFileter" >n'
if(d.reuseDegree == "新增"){
opt = opt + ' <option value="新增" selected >新增</option>n' +
' <option value="复用" >复用</option>n' +
' <option value="利旧" >利旧</option>n'
}else if(d.reuseDegree == "复用"){
opt = opt + ' <option value="新增" >新增</option>n' +
' <option value="复用" selected >复用</option>n' +
' <option value="利旧" >利旧</option>n'
}else if(d.reuseDegree == "利旧"){
opt = opt + ' <option value="新增" >新增</option>n' +
' <option value="复用" >复用</option>n' +
' <option value="利旧" selected >利旧</option>n'
}
opt = opt + ' </select>'
return opt
}},
{field: 'remarks', title: '备注',width:100}
]
]
//==================
function gndpgTable() {
tableIns2 = febss.table.init({
elem: '#pgbglTable',
id: 'pgbglTable',
url: 'sjyMydaibanExcel/pageList?projectId='+projectId,
limits : [100, 200, 500],
limit: 100,
height:'full-210',
cols: colsChang,
done: function (res, curr, count) {
$(".layui-table-box").find("[data-field='id']").css("display","none");
},
});
}
有的人说样式需要调整,加一个下边这个,不然下拉选打开会显示不出来,我的没有这种情况,大家根据情况使用
<style>
/*使下拉列表框不被遮挡*/
.layui-table-cell {
overflow: visible !important;
}
/*使列表框与表格单元格重合*/
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
</style>
reuseDegreeFileter是你列表中加的下拉选的lay-filter,value是现在已经选择的值
lineDate是这行数据,可以用来获取id
//table列表中的复用新增利旧下拉选点击事件
form.on('select(reuseDegreeFileter)',data=>{
console.log(data)
var tableCache = table.cache['pgbglTable'], // 获得数据表格的缓存数据
value = data.value, // 得到下拉列表改变后的value值
field = data.othis.parents('td').attr('data-field'), // 获得下拉列表的父级td标签的字段名称
dataIndex = parseInt(data.othis.parents('tr').attr('data-index')), // 获得变化的下拉列表所在的行index
lineDate = tableCache[dataIndex]; // 获得数据表格中该行的缓存数据
console.log(lineDate.id)
febs.get(ctx + 'sjyMydaibanExcel/updateReuseDegree?id='+lineDate.id+'&reuseDegree='+value
, null, function () {
//设置成功刷新大table和小table
tabresidence.reload({where: { }, page: {curr: 1}});
tableIns2.reload({where: { }, page: {curr: 1}});
tableIns1.reload();
tabresidence.reload();
});
});
原文地址:layui学习——数据表格嵌套下拉列表,并实现动态更新 – 夏末蝉未鸣 – 博客园
我文章里是我的代码,跟原文不太一样,大家根据各自需求选择写法。
原文地址:https://blog.csdn.net/qq_37889636/article/details/128252130
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_9737.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。