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

 

posted @   mingruqi  阅读(1761)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天:
2018-03-16 Fragment 生命周期的详情
2018-03-16 Activity生命周期
点击右上角即可分享
微信分享提示