html下拉列表可以嵌套吗,layui使用遇到的一些问题-- 数据表格中嵌套下拉框

遇到的一些问题：

一、下拉框被遮住了：解决方法 请看步骤3

二、下拉框获取不到值：解决 请看步骤4

1、数据表格

table.render({

id: ‘terminalList‘,

elem: ‘#terminalList‘

, url: url

,toolbar: ‘#topToolbar‘

,done: setAutoWidth

, cols: [[

{checkbox: true, fixed: true}

, {field: ‘achievement_uuid‘, title: ‘id‘, width: ‘15%‘,hide:true}

,{field: ‘zizeng‘, width: ‘6%‘, title: ‘序号‘,fixed: ‘left‘,templet:‘#zizeng‘,align:‘center‘}

, {field: ‘id‘, title: ‘id‘, width: ‘15%‘,hide:true}

, {field: ‘eid‘, title: ‘id‘, width: ‘15%‘,hide:true}

, {field:‘employee_name‘, width: ‘10%‘, align: ‘center‘,title: ‘奖励员工姓名‘,edit: ‘text‘}

, {field: ‘duty_type‘, title: ‘职务级别‘, width: ‘7%‘,align:‘center‘,templet: ‘#selectGxmc‘}

, {field: ‘organization‘, title: ‘所在单位‘, width: ‘14.3%‘,align:‘center‘,edit: ‘text‘}

, {field: ‘post‘, title: ‘岗位名称‘, width: ‘15%‘,align:‘center‘,edit: ‘text‘}

, {field: ‘earnings_type‘, title: ‘奖励兑现类别‘, width: ‘14%‘,align:‘center‘,templet: ‘#selectEarnings‘}

, {field: ‘proportion‘, title: ‘个人奖励比列%‘, width: ‘9.5%‘,align:‘center‘,edit: ‘text‘}

, {field: ‘earnings_price‘, title: ‘个人奖励额度/元‘, width: ‘10%‘,align:‘center‘,templet: ‘#test888‘}

, {field: ‘remark‘, title: ‘备注‘, width: ‘11%‘,align:‘center‘,edit: ‘text‘}

]],

2、下拉框方法

无

正厅

副厅

正处

副处

正科

副科

3、下拉框样式

.layui-table-cell{

overflow: visible !important;

}

td .layui-form-select{

margin-top: -10px;

margin-left: -15px;

margin-right: -15px;

}

.layui-form-select dl{

z-index:9999;

}

.layui-table-cell{

overflow:visible;

}

.layui-table-box{

overflow:visible;

}

.layui-table-body{

overflow:visible;

}

.div-inline{ display:inline}

#fileName {

position: relative;

display: inline-block;

background: #D0EEFF;

border: 1px solid #99D3F5;

border-radius: 4px;

padding: 4px 12px;

overflow: hidden;

color: #1E88C7;

text-decoration: none;

text-indent: 0;

line-height: 20px;

}

#fileName input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;

}

#fileName:hover {

background: #AADFFD;

border-color: #78C3F3;

color: #004974;

text-decoration: none;

}

4、回选下拉框选中的值

form.on(‘select(testSelect)‘, function (data) {

var elem = $(data.elem);

var trElem = elem.parents(‘tr‘);

var tableData = table.cache[‘terminalList‘];

// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值

tableData[trElem.data(‘index‘)][elem.attr(‘name‘)] = data.value;

// 其他的操作看需求 TODO

});

5、获取数据表格所有的值 ，只能获取到 数据表格单元中含有edit：text 的字段

var table_first = layui.table.cache["terminalList"];

6、获取数据单元中不可编辑的字段

for (var i=0 ; table_first.length > i ; i++) {

var id = table_first[i].id;

// 取出要获取的值

var val = $("#test99"+id).html();

// table创建earnings_price字段，然后存入值

table_first[i][‘earnings_price‘]=val; }

var list =JSON.stringify(table_first);

原文：https://www.cnblogs.com/alomsc/p/12573607.html