layui數據表格加入下拉框


<table id="demo" lay-filter="test"></table>

<script>
  layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var tableObject;
        //第一個實例
        tableObject = table.render({
            elem: '#demo'
            , height: 500
            , url: 'http://localhost:8080/findAll' //數據接口
            //, page: true //開啟分頁
            , method: 'post'  //提交方式 get/post
            , toolbar: true    //開啟表頭工具欄
            , cols: [[ //表頭
                {field: 'name', title: '名稱',align:'center'}
                , {field: '', title: '號碼',templet:function(d){
                        return '<select name="city" lay-verify="required">\n' +
                            '        <option value=""></option>\n' +
                            '        <option value="1001">1號</option>\n' +
                            '        <option value="1000">2號</option>\n' +
                         
                            '      </select>';
                    },align:'center'}
                , {field: 'dataDesc', title: '保存',templet:function (d) {
                    return '  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">保存</button>';

                    },align:'center'}

            ]]
            ,done: function (res, curr, count) {
                //數據渲染完的回調。
                //由於layui 設置了超出隱藏,所以這里改變下,以兼容操作按鈕的下拉菜單
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); }


        });
    })
    <script>

由於layui自帶的樣式中定義的表格高度會自動隱藏下拉框內容,所以要加上,上面代碼里已經加上了,加上下面這段代碼問題解決

 ,done: function (res, curr, count) {
                //數據渲染完的回調。
                //由於layui 設置了超出隱藏,所以這里改變下,以兼容操作按鈕的下拉菜單
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM