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);

  

猜你喜欢

转载自www.cnblogs.com/alomsc/p/12573607.html