怎么给表格加入搜索框?

提问 未结
16 363
632a
632a 2019-1-5
悬赏:20飞吻
版本:layui 浏览器:
大概如图这样。 这个是官网的例子。我给他加的搜索, 怎么样才能给他加上搜索框呢?
回帖

  • 需要做的有两件事情,一个是取消头部th里面div的高度限制,不然后面再列的title里面写了html它也会因为高度限定然后超出就不显示了

    然后是在需要加入input的cols对应的加入input的html

    因为修改了这个th里面的div的高度限制,所以最好不要用fixed固定列
    完整的测试代码可以直接在layui的调试预览里面试试看
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1545041465480" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    .table_th_search+ div.layui-table-view .layui-table-header div.layui-table-cell {
    height: auto;
    }
    </style>
    </head>
    <body>

    <table class="layui-hide table_th_search" id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <div class="layui-tab layui-tab-brief" lay-filter="demo">
    <ul class="layui-tab-title">
    <li class="layui-this">演示说明</li>
    <li>日期</li>
    <li>分页</li>
    <li>上传</li>
    <li>滑块</li>
    </ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">

    <div class="layui-carousel" id="test1">
    <div carousel-item>
    <div><p class="layui-bg-green demo-carousel">在这里,你将以最直观的形式体验 layui!</p></div>
    <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
    <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
    <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
    <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域,然后滑动鼠标滚轮即可</p></div>
    </div>
    </div>
    </div>
    <div class="layui-tab-item">
    <div id="laydateDemo"></div>
    </div>
    <div class="layui-tab-item">
    <div id="pageDemo"></div>
    </div>
    <div class="layui-tab-item">
    <div class="layui-upload-drag" id="uploadDemo">
    <i class="layui-icon"></i>
    <p>点击上传,或将文件拖拽到此处</p>
    </div>
    </div>
    <div class="layui-tab-item">
    <div id="sliderDemo" style="margin: 50px 20px;"></div>
    </div>
    </div>
    </div>

    <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>


    <script src="//res.layui.com/layui/dist/layui.js?t=1545041465480"></script>
    <script>
    layui.config({
    version: '1545041465480' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,layer = layui.layer //弹层
    ,table = layui.table //表格
    ,carousel = layui.carousel //轮播
    ,upload = layui.upload //上传
    ,element = layui.element //元素操作
    ,slider = layui.slider //滑块

    //向世界问个好
    layer.msg('Hello World');

    //监听Tab切换
    element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +':'+ this.innerHTML, this, {
    tips: 1
    });
    });

    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
    {type: 'checkbox'}
    ,{field: 'id', title: 'ID', width:80, sort: true, totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市<br><input class="layui-input">', width:150}
    ,{field: 'sign', title: '签名<br><input class="layui-input">', width: 200}
    ,{field: 'classify', title: '职业', width: 100}
    ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
    ,{width: 165, align:'center', toolbar: '#barDemo'}
    ]]
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
    case 'add':
    layer.msg('添加');
    break;
    case 'update':
    if(data.length === 0){
    layer.msg('请选择一行');
    } else if(data.length > 1){
    layer.msg('只能同时编辑一个');
    } else {
    layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
    }
    break;
    case 'delete':
    if(data.length === 0){
    layer.msg('请选择一行');
    } else {
    layer.msg('删除');
    }
    break;
    };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
    layer.msg('查看操作');
    } else if(layEvent === 'del'){
    layer.confirm('真的删除行么', function(index){
    obj.del(); //删除对应行(tr)的DOM结构
    layer.close(index);
    //向服务端发送删除指令
    });
    } else if(layEvent === 'edit'){
    layer.msg('编辑操作');
    }
    });

    //执行一个轮播实例
    carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
    });

    //将日期直接嵌套在指定容器中
    var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
    '0-10-14': '生日'
    ,'2018-08-28': '新版'
    ,'2018-10-08': '神秘'
    }
    ,done: function(value, date, endDate){
    if(date.year == 2017 && date.month == 11 && date.date == 30){
    dateIns.hint('一不小心就月底了呢');
    }
    }
    ,change: function(value, date, endDate){
    layer.msg(value)
    }
    });

    //分页
    laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
    if(!first){
    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
    }
    }
    });

    //上传
    upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
    console.log(res)
    }
    });

    slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
    });

    //底部信息
    var footerTpl = lay('#footer')[0].innerHTML;
    lay('#footer').html(layui.laytpl(footerTpl).render({}))
    .removeClass('layui-hide');
    });
    </script>
    </body>
    </html>
    2 回复
  • 632a
    2019-1-5
    有没有大兄弟有相关的demo我看看呀
    0 回复
  • 632a
    2019-1-6
    @岁月小偷 全部都可以加吗? 牛逼啊大佬 ,我整了很久都不行,
    0 回复
  • 632a
    2019-1-7
    @岁月小偷 选择显示的功能失效了。
    0 回复
  • @632a 嗯嗯,的确会有这个问题,忘了筛选是直接读取config的title的,所以不能在title里面直接写这个input;现在有个思路就是在cols里面只要设置一个配置说需要这个功能,然后再done回调里面再去添加input到对应的th中;

     //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
    {type: 'checkbox'}
    ,{field: 'id', title: 'ID', width:80, sort: true, totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市',search: true, width:150}
    ,{field: 'sign', title: '签名',search: true, width: 200}
    ,{field: 'classify', title: '职业', width: 100}
    ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
    ,{width: 165, align:'center', toolbar: '#barDemo'}
    ]],
    done: function(){
    var tableView = this.elem.next();
    table.eachCols(this.id, function (index, col) {
    if (col.search && col.field) {
    tableView.find('th[data-field="'+col.field+'"]').find('div.layui-table-cell').append('<br><input class="layui-input">');
    }
    })
    }
    });
    0 回复
  • 632a
    2019-1-7
    @岁月小偷 我复制了你的代码, 发现if (col.search && col.field) {
    tableView.find('th[data-field="'+col.field+'"]').find('div.layui-table-cell').append('<br><input class="layui-input">');
    } 这里没有执行? 是需要添加什么来回调? 没有添加input成功,
    0 回复
  • @632a 这里加了吗?
    0 回复
  • 632a
    2019-1-7
    @岁月小偷 加了。 我直接放layui在线试的。 是不是要调整div什么的? 可以放出来看看
    0 回复
  • @632a 一样的要给这些表格的th里面的div给添加上height: auto的样式额,样式调了没呢?
    0 回复
  • 632a
    2019-1-7
    0 回复
  • 632a
    2019-1-7
    @岁月小偷 没有发现有input输入框
    0 回复
  • @632a 额,你审查用户名里面肯定没有额,你加的是id列还有积分财富,你重点审查这几个才对,
    0 回复
  • 632a
    2019-1-9
    @岁月小偷 好了。 但是我没发监听输入框的状态。
    $("#input_tab").bind("input propertychange", function(event) {

    console.log($("#input_tab").val())
    });
    用这个不行。 怎么监听用户输入然后搜索呢?
    0 回复
  • 632a
    2019-1-9
    @632a 直接给元素绑定事件也不行呢
    0 回复
  • @632a 你在什么时候执行的这句代码呢?这个一般是要在table的done回调里面去加监听,就是说得等到页面存在这个节点才能绑定上,
    0 回复
  • 632a
    2019-1-9
    @岁月小偷 $(document).on('input propertychange', '.zidingyi', function() {});
    0 回复