zoukankan      html  css  js  c++  java
  • 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',  '15%',hide:true}
                    ,{field:  'zizeng',  '6%', title: '序号',fixed: 'left',templet:'#zizeng',align:'center'}
                    , {field: 'id', title: 'id',  '15%',hide:true}
                    , {field: 'eid', title: 'id',  '15%',hide:true}
                    , {field:'employee_name',  '10%',  align: 'center',title: '奖励员工姓名',edit: 'text'}
                    , {field: 'duty_type', title: '职务级别',  '7%',align:'center',templet: '#selectGxmc'}
                    , {field: 'organization', title: '所在单位',  '14.3%',align:'center',edit: 'text'}
                    , {field: 'post', title: '岗位名称',  '15%',align:'center',edit: 'text'}
                    , {field: 'earnings_type', title: '奖励兑现类别',  '14%',align:'center',templet: '#selectEarnings'}
                    , {field: 'proportion', title: '个人奖励比列%',  '9.5%',align:'center',edit: 'text'}
                    , {field: 'earnings_price', title: '个人奖励额度/元',  '10%',align:'center',templet: '#test888'}
                    , {field: 'remark', title: '备注',  '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);

      

  • 相关阅读:
    整理+学习《骆昊-Java面试题全集(下)》
    整理+学习《骆昊-Java面试题全集(中)》
    Linux专家心目中的最佳Linux发行版有哪些?
    常用的Git Tips
    Python 3 加密简介
    LXD 2.0 系列(一):LXD 入门
    英特尔构建云集成编排工具
    Unix操作系统中UUCP知识详细讲解
    Windows 的 AD 域寄生于 Linux 机器
    Git秘籍:在 Git 中进行版本回退
  • 原文地址:https://www.cnblogs.com/alomsc/p/12573607.html
Copyright © 2011-2022 走看看