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、下拉框方法
<script type="text/html" id="selectGxmc" > <select name='duty_type' id="duty_type" lay-filter="testSelect" lay-search='' style="text-align: center"> <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、回选下拉框选中的值
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);