layui使⽤遇到的⼀些问题--数据表格中嵌套下拉框遇到的⼀些问题：
⼀、下拉框被遮住了：解决⽅法请看步骤3
⼆、下拉框获取不到值：解决请看步骤4
1、数据表格
layui框架怎么用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、下拉框⽅法
<script type="text/html" id="selectGxmc" >
<select name='duty_type' id="duty_type" lay-filter="testSelect" lay-search='' >
<option value="0" {{# if (d.duty_type==null){ }} selected="selected" {{# } }}>⽆</option>
<option value="1" {{# if (d.duty_type==1){ }} selected="selected" {{# } }}>正厅</option>
<option value="2" {{# if (d.duty_type==2){ }} selected="selected" {{# } }}>副厅</option>
<option value="3" {{# if (d.duty_type==3){ }} selected="selected" {{# } }}>正处</option>
<option value="4" {{# if (d.duty_type==4){ }} selected="selected" {{# } }}>副处</option>
<option value="5" {{# if (d.duty_type==5){ }} selected="selected" {{# } }}>正科</option>
<option value="6" {{# if (d.duty_type==6){ }} selected="selected" {{# } }}>副科</option>
</select>
</script>
  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、回选下拉框选中的值
<('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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。