zoukankan      html  css  js  c++  java
  • 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">
    ' +
                                '        <option value=""></option>
    ' +
                                '        <option value="1001">1号</option>
    ' +
                                '        <option value="1000">2号</option>
    ' +
                             
                                '      </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'); }
  • 相关阅读:
    delphi 线程的使用
    mysql + unidac 使用事务例子
    unidac 执行Execute后取得受影响行数。
    关于UNIDAC连接SQLITE3的心得笔记
    FIREDAC的心得
    unidac连接ORACLE免装客户端驱动
    delphi 2010安装unidac
    DELPHI中使用UNIDAC连接ORACLE数据库
    Struts2思维导图
    面试经验And总结
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/14543353.html
Copyright © 2011-2022 走看看