bootstrap 多条件筛选_bootstrap多条件筛选样式 - CSDN
精华内容
参与话题
  • bootstrap筛选下拉框

    2019-07-30 14:00:12
    <div class="btn-group searchDiv"> <button class="hj-btn dropdown-toggle" data-toggle="dropdown">筛选 <i class="fa fa-angle-down icon-on...
    <div class="btn-group">
                            <button class="hj-btn dropdown-toggle" data-toggle="dropdown">筛选
                                <i class="fa fa-angle-down icon-on-right"></i>
                            </button>
                            <div class="dropdown-menu" style="width: 350px;left: 10px;padding: 10px;line-height: 26px">
                                <div class="form-group clearfix">
                                    <label class="control-label col-sm-3 text-nowrap">业务日期</label>
                                    <div class="col-sm-9 col-xs-9">
                                        <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/>
                                        <span class="hj-label" style="margin: 0 5px">至</span>
                                        <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/>
                                    </div>
                                </div>
                                <div class="form-group m-t-xs clearfix">
                                    <label class="control-label col-sm-3 text-nowrap">物资分类:</label>
                                    <div class="col-sm-9 col-xs-9">
                                        <select class="hj-select" name="classification" style="width: 180px">
    
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group m-t-xs clearfix">
                                    <label class="control-label col-sm-3 text-nowrap">盘点状态:</label>
                                    <div class="col-sm-9 col-xs-9">
                                        <select class="hj-select" name="state" style="width: 180px">
    
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group m-t-xs clearfix">
                                    <label class="control-label col-sm-3 text-nowrap">库存数量:</label>
                                    <div class="col-sm-9 col-xs-9">
                                        <select class="hj-select" name="quantity" style="width: 180px">
    
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group m-t-xs clearfix">
                                    <input type="checkbox" name="isZero" class="hj-checkbox" style="margin-left: 10px!important;"/>
                                    <span class="hj-label">不显示零库存物资</span>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 text-center">
                                        <button class="sure btn btn-info">确定</button>
                                    </div>
                                </div>
                            </div>
                        </div>
    

    因事件冒泡会出现bug,点击弹出下拉框会直接消失,影响筛选框中的其他功能
    解决办法:

    //点击确定按钮隐藏筛选框
       $(".dropdown-menu").click(function (e) {
            var type = $(e.target).attr('name');
            console.log(type);
            if(type === "sure"){
                //点击确定按钮
    
            }else {
                e.stopPropagation();
            }
        });
    
    展开全文
  • 基于Bootstarp多条件筛选插件 基于Bootstarp多条件筛选插件
  • bootstrap-table表格做条件筛选,筛选出来的结果在table里用红色字体标识关键字

    //查询结果--关键字标识为红色

                $("#ValueItemTable").on('post-body.bs.table', function () {

                    var txtReportName = $("#ReportTempletelName").val();

                    var reg = new RegExp(txtReportName, 'ig');

                    var tableId = document.getElementById("ValueItemTable");


                    if (txtReportName != null) {


                        for (var i = 1; i < tableId.rows.length; i++) {

                            var bb = tableId.rows[i].cells[0].innerHTML;

                            var displayColor = '<span style="color:red">' + txtReportName + '</span>';

                            var cc = bb.replace(reg, displayColor);

                            tableId.rows[i].cells[0].innerHTML = cc;

                        }


                    }

                })

    展开全文
  • 这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很重新的认识,看了Bootstrap的样式偏,插件现在还没有学习到几个,也有写几个插件自己用的想法。正好工作上也会用到,现在就写一个京东上...

       这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法。正好工作上也会用到,现在就写一个京东上筛选商品的插件,不多说上图。

         

    首先看下API

          

    这次只是用来说明下功能 下篇开始说具体的思路,其实也不难自己可以学习下,Demo奉上,但是js代码加密,有想学习都请邮件联系我:Wells_fuwei@163.com

    下载地址:https://u7704756.pipipan.com/fs/7704756-323508894

     

    转载于:https://www.cnblogs.com/OceanHeaven/p/4808844.html

    展开全文
  • bootstrap过滤

    2019-11-20 16:31:34
    bootstrap过滤 $('#table').bootstrapTable('filterBy', {'filed':'value'}); $('#table').bootstrapTable('filterBy', {'nodeType':'合格'}); $('#table').bootstrapTable('filterBy', {'nodeType':'不合格'}); ...

    bootstrap筛选

    加载所有之后筛选,数量较少适用

    $('#table').bootstrapTable('filterBy', {'filed':'value'}); 
    
    $('#table').bootstrapTable('filterBy', {'nodeType':'合格'});
    $('#table').bootstrapTable('filterBy', {'nodeType':'不合格'}); 
    $('#table').bootstrapTable('filterBy', {}); 
    

    在这里插入图片描述

    展开全文
  • bootstrap 查询条件布局

    千次阅读 2019-12-23 22:44:47
    效果如下: 代码: <div class="container-fluid"> <div class="row"> <div class="panel panel-default"> <div class="panel-head...
  • //查询结果--关键字标识为红色 $("#ValueItemTable").on('post-body.bs.table', function () { var txtReportName = $("#ReportTempletelName").val(); var reg = new RegExp(tx...
  • bootstrap table 条件查询

    万次阅读 多人点赞 2016-09-29 14:35:59
    1、 data-toggle="table" class="table table-striped table-bordered table-hover" id="userOperationTable" data-url="/Logistics/userOperationManager/userOperationList" data-query-params="q
  • 基于Bootstarp 仿京东多条件筛选插件的开发
  • bootstrap-multiselect,使用了bootstrap风格实现下拉框的条件检索、多选、单选控制
  • 获取表格行数 $("#tableId").find("td").length; 获取当前行的列数 ... $("#exampleTable tr").each(function(rowIndex) { // 遍历表格行 ...不废话直接上代码 // 对整个表格进行模式匹配,可以..
  • 遇到问题:自定义搜索 大量字段筛选传值 (个字段传值没问题,放入到form表单 进行序列化提交数值无法传入后台)如下图字段传值代码不够简洁问题解决:定义筛选字段VO优化table自带分页查询方法---将分页查询...
  • 实现思路:通过正则匹配到字段是否符合条件,时间段转换为时间戳比对。 这是大体的效果图: 页面的html代码 <div class="content-head mgb10"> <div class="form-group"> <...
  • jQuery bootstrap带分页表格数据搜索筛选代码
  • bootstrap-table 筛选数据报400错误

    千次阅读 2016-07-29 16:52:53
    参数到后台 指明参数@RequestParam(“xxx”) String xxx function search(){ var startTime = $("#inpstart").val(); var endTime = $("#inpend").val();... var status = $("#status").val
  • BootStrapVue Tags 标签搜索、筛选 排除选择标签 实例 - 详解 文章涉及: Vuex、Vue、BoostrapVue 文章解析 : Vue 中 使用 tags 标签 实现 输入名称查询标签列表 排除 已选择标签 默认展示全部 可搜索 tags 标签...
  • bootstrap-table很容易上手,方便易用。自己在使用bootstrap-table时查询的参数如下:{ limit: params.limit, //页面大小 offset: params.offset, //页码 order: params.order, //排位命令(desc,asc) month:...
  •  bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一,需要定制化组合搜索 前端:  注意前端的加大加粗的部分,就是为了自定义查询新增的 {% load staticfiles %} <!DOCTYPE ...
  • 首先简单介绍,bootstrapTable是基于bootstrap样式做的一款表格,方便我们组建表格使用。这里我们就不解释bootstrap怎么引入,使用问题。 1. 引入js,css <link href="../bootstrap/css/bootstrap.css" type=...
1 2 3 4 5 ... 20
收藏数 3,544
精华内容 1,417
关键字:

bootstrap 多条件筛选