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