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'); }
  • 相关阅读:
    Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
    Linq分区操作之Skip,SkipWhile,Take,TakeWhile源码分析
    Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析
    Linq基础操作之Select,Where,OrderBy,ThenBy源码分析
    PAT 1152 Google Recruitment
    PAT 1092 To Buy or Not to Buy
    PAT 1081 Rational Sum
    PAT 1084 Broken Keyboard
    PAT 1077 Kuchiguse
    PAT 1073 Scientific Notation
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/14543353.html
Copyright © 2011-2022 走看看