精华内容
下载资源
问答
  • 怎样使用? 工程的Gradle发布方式: repositories { google() jcenter() mavenCentral() } allprojects { repositories { google() jcenter() maven { url 'https://jitpack.io' } mavenCentral() } } ...
  • 安卓自定义条件筛选组件
  • 在软件应用中有时候会出现这样的界面:上面是利用多选框和下拉框组合的筛选条件.下面表格展示筛选后的数据。如下图 上面是筛选条件,表格是根据筛选条件筛选的结果。 如果表格不支持筛选功能。可以利用Linq对...

    在软件应用中有时候会出现这样的界面:上面是利用多选框和下拉框组合的筛选条件.下面表格展示筛选后的数据。如下图

    上面是筛选条件,表格是根据筛选条件筛选的结果。

    如果表格不支持筛选功能。可以利用Linq对Datatable进行筛选。

    C#:

    DataTable data = new DataTable();

    data=getdata();//获取data数据
    var result = data.AsEnumerable().Where(p => ( cmbsf.selected ? p.Field<string>("省份") == "北京" : true)
                                                                           || (cmbxb.selected ? p.Field<string>("性别") == "男"  : true)
                                                                           || ( cmbsf.selected ? p.Field<int>("年龄") <= 30 && p.Field<int>("年龄") >= 20  : true))
                                                                            .Select(q => q);

    然后把result赋值给datagridview即可。

    也可以把该方法写到事件中。然后把每个下拉框或多选框的改变事件指向该事件.

     

    转载于:https://www.cnblogs.com/yiyecao/p/8746269.html

    展开全文
  • 安卓 自定义条件筛选布局 定义了多条件标签切换监听接口
  • function judgejiaoji(arr1,arr2){ for (var i = 0;i<arr1.length;i++){ for(var j = 0;j<arr2.length;j++){ if(arr1[i] == arr2[j]){ return true }
    function judgejiaoji(arr1,arr2){
            for (var i = 0;i<arr1.length;i++){
                    for(var j = 0;j<arr2.length;j++){
                            if(arr1[i] == arr2[j]){
                                    return true
                            }
            }
            }
            return false
    
    }
    async function demo(index, sleept = 1) { 
            
            //人物对话框 
            renwu =  document.getElementsByClassName('candidate-list-content')
            action = document.getElementsByClassName('btn btn-greet')
            console.log(renwu)
            console.log(action)
            var dazhaohucount = 0
    
    
            schoollist = ["厦门大学","武汉大学","四川大学","北京大学","清华大学","中山大学","浙江大学","中南大学","上海交通大学","南京大学","天津大学","山东大学","同济大学","湖南大学","重庆大学","复旦大学","吉林大学","华南理工大学","华中科技大学","东南大学",
    展开全文
  • [img=https://img-bbs.csdn.net/upload/201808/03/1533289857_718135.png][/img]
  • 201703:SuiteCRM自定义筛选界面

    千次阅读 2017-04-04 22:15:02
    SuiteCRM自定义筛选界面 (Popup) 筛选界面显示自定义 自定义筛选条件字段 关于列表排序

    SuiteCRM自定义筛选界面 (Popup)


    1. 筛选界面显示自定义
    2. 自定义筛选条件字段
    3. 关于列表排序

    Popup视图关系图

    这里写图片描述

    1. 筛选界面显示自定义

    定义文件结构

    <?php
    $popupMeta = array (
        'moduleMain' => 'HAC_Bank_Accounts',
        'varName' => 'HAC_Bank_Accounts',
        //排序字段,可以扩展成多个字段
        'orderBy' => 'hac_bank_accounts.name',
        'whereClauses' => array (
              //请求参数到数据库字段的映射
    ),
        //追加查询语句
        'whereStatement' => ''
        'searchInputs' => array (
      //请求参数名
    ),
        'searchdefs' => array (
      //搜索字段定义
    ),
        'listviewdefs' => array (
      //结果列表字段定义
    )
    );
    

    1.增加字段和自定义

    在对应定义添加字段定义即可:

    'CONTRACT_NAME' =>
           array (
                //字段类型
                'type' => 'relate',
                'default' => true,
                //是否在工作室中显示
                'studio' => 'visible',
                //标签名,可自定义
                'label' => 'LBL_CONTRACT_NAME_1',
                //宽度
                'width' => '24%',
                //对应模块字段名,可省略
                'name'  => 'contract_name'
                //附加参数
                'displayParams'=> array() 
                //...
            ),
    

    对于列表定义注意需设置
    'default' => true,,否则不会显示列

    2. Popup视图的调用

    前端调用

    open_popup(
        module_name, //模块名
        width,       //窗口宽度
        height,      //窗口高度
        initial_filter,       //追加查询条件
        close_popup,          //是否自动关闭,,默认true
        hide_clear_button,    //是否隐藏清除按钮,默认true
        popup_request_data,   //请求报文,处理选择后的回调
        popup_mode,           //POPUP模式(多选和单选),多选时,返回记录ID为键数组
        create,               //默认false,是否可创建模块
        metadata              //指定使用的popup定义文件名称
    )

    请求报文定义,可附加在编辑界面的字段定义中

    popupRequestData = {
              "call_back_function" : "setFuncReturn",//回调函数
              "form_name" : "EditView",
              //返回值和页面元素映射
              "field_to_name_array" : {
                   "id":"line_function_id",
                   "name":"line_function_name",
                   "func_icon":"line_func_icon",
              }
         }

    3. Popup列表添加字段
    包括在自定义列表表头和添加非本模块字段,修改表头通过添加label可以实现,添加字段包块以下两步:
    其一、在popupdef的listviewdefs中添加字段定义

    'CONTRACT_NUMBER' =>
            array(
                'type'  => 'varchar',
                'label' => 'LBL_CONTRACT_NUMBER',
                'width' => '10%',
                'name'  => 'contract_number',
                'studio' => 'visible',
                'default' => true,
           ),

    其二、对其进行赋值

    重写模块的get_list_view_data方法:

    function get_list_view_data() {
            global $app_list_strings,$db;
            //get_list_view_array与get_list_view_data相同
            $line_fields = $this->get_list_view_array();
            if(isset($_REQUEST['popuptype']) && $_REQUEST['popuptype'] == '<特定List>'){
                    //获取当前
                    $line_fields['<自定义字段(大写)>'] = <要附的值>;
                }
            }
            return $line_fields;
        }

    后端控制

    在后台PopupView中,通过设置请求参数中的metadata,sqlClause参数控制Popup视图的调用和控制条件

    class <ModuleName>ViewPopup extends ViewPopup
    {
         function Display() {
              if ($_REQUEST['<Params>']!= <Value>){
                  $_REQUEST['metadata'] = '<Def文件名>';
                  //可以附加其他参数
              }
              parent::Display();
          }
    }
    

    3. 自定义筛选条件字段

    主要针对非本模块字段,对于本模块字段在searchdefs中添加即可

    几点注意:
    1. 对于非数据库字段,只要在verdefs中有定义,框架仍会当成本模块字段来拼接SQL语句,除非它为空,所以一般只在popupdef中定义字段
    2. 关联字段创建必须有id属性,无论是在verdef还是popupdef中
    3. 对于非本模块字段的查询条件需要手动处理,追加SQL条件,常用过的有EXISTS语句
    4. 对于非本模块字段在查询结果界面不会保留上次查询条件,需要查询字段的回写,即在查询结果页面保留查询条件

    1. 添加一般类型字段

    第一步 在popupdef中添加字段定义,不需要添加到verdefs中

    'contract_number' =>
            array(
                'type'  => 'varchar',
                'label' => 'LBL_CONTRACT_NUMBER',
                'width' => '10%',
                'name'  => 'contract_number',
            ),

    第二步 在PopupView中设置处理查询参数和字段回写
    处理REQUEST参数,并在页面嵌入js代码实现查询条件回写

    //字段名有advanced后缀
    if(isset($_REQUEST['<字段名>']) && $_REQUEST['<字段名>'] != ''){
                //对字段参数进行预处理,保存到重命名字段中,并清空原字段
                $origin_value = $_REQUEST['<字段名>'];
                $_REQUEST['<重命名字段名>'] = $_REQUEST['<字段名>'];
                $_REQUEST['<字段名>'] = '';
                parent::Display();
                echo '<script>$("#<字段名>").val("'.origin_value .'");</script>';
    }

    第三步 追加查询条件
    在popupdef中根据传入参数是否为空,拼接where条件并添加到whereStatement属性中

    $condition = "";
    if(isset($_REQUEST['<重命名字段名>']) && $_REQUEST['<重命名字段名>']!=""){
        $condition .= " EXISTS (<SQL语句>) ";
    }
    ...
    'whereStatement'=>....$condition,
    

    2. 添加关联字段
    对于查询字段是关联字段的需要在popupdef中定义关联字段和id字段,并且组合的查询条件相比于一般字段更加复杂

    第一步 在popupdef中定义字段

    'hit_racks_s' =>
            array (
                    'name' => 'hit_racks_s',
                    'vname' => 'LBL_HIT_RACKS_S',
                    'type' => 'relate',
                    'default' => true,
                    'id_name' => 'hit_racks_id_s',
                    'ext2'   => 'HIT_Racks',
                    'module' => 'HIT_Racks',
                    'rname' => 'name',
                    'quicksearch' => 'enabled',
                    'studio' => 'visible',
                    'width'  => '10%'
           ),
    'hit_racks_id_s' =>
        array (
                'name' => 'hit_racks_id_s',
                'vname' => 'LBL_HIT_RACKS_ID_S',
                'type' => 'id',
                'len' => 36,
                'size' => '20',
     ),
    

    第二步和第三步与一般字段类似;

    3. 添加布尔值字段

    popupdef中定义:

    'has_sub_location' =>
        array(
            'type' => 'bool',
            'label' => 'LBL_HAS_SUB_LOCATION',
            'width' => '10%',
            'default' => true,
            'name' => 'has_sub_location',   
        ),

    bool类型的查询条件在界面上以下拉列表呈现,且以“0”、“1”多为值,未选择时为空,不会加入查询条件

    3. 关于列表排序

    1. 默认排序
    排序字段:在popupdef中通过“orderBy”定义
    排序方式:

    //默认排序方式 asc
     $desc = $this->getSessionVariable($varName, $sortBy."S");
    
        if (empty($desc))
            {
                $desc = $defaultOrder;
            }
            $defaultOrder = $desc ? 'desc' : 'asc';
            $orderByValue = $defaultOrder;
    
    //ListView的setQuery方法可设置order by
    if(!$allowOrderByOveride) {
            $this->query_orderby = $orderBy;
            return;
        }
        $this->getOrderBy($varName, $orderBy);
    
    ...
    
    //通过请求参数修改排序方式
    http://....lvso=DESC&HAT_Assets2_HAT_ASSETS_ORDER_BY=asset_group
    
    

    注:
    对于列表中有非本模块字段的,框架并不会进行排序,可以去掉排序功能,或在PopupView中进行处理

    
    //一种参考
    <script>
     $(".list.view thead tr th:eq(<所在列>)").children().eq(1).hide();
    $(".list.view thead tr th:eq(<所在列>)").children().eq(0).children().eq(0).attr("href","#");
    </script>
    展开全文
  • vue 自定义 移动端筛选条件

    千次阅读 2018-04-15 21:01:00
    1.创建组件 components/FilterBar/FilterBar.vue &lt;template&gt; &lt;div class="filterbar" :style="{'top': top + 'px'}"&gt; &lt;div class="...

    1.创建组件

    components/FilterBar/FilterBar.vue

    <template>
      <div class="filterbar" :style="{'top': top + 'px'}">
        <div class="container">
          <div class="row">
            <div
              class="col"
              :class="{'selected': index == selectedIndexMenu}"
              @click="handleShowDialog(barMenu, index)"
              v-for="(barMenu, index) in barMenus"
              :key="index"
            >
              {{barMenu.name}}<span :class="index == selectedIndexMenu ? barMenu.selectIcon : barMenu.defaultIcon"></span>
            </div>
          </div>
          <filter-bar-pop
            :filterTop="top"
            :show-dialog="isShow"
            :hasTabHeader="hasTabHeader"
            :menu="selectedMenu"
            @changeTab="handleChangeTab"
            @changeMainItem="handleChangeMainItem"
            @changeSelect="changeSelect"
            @closeDialog="handleCloseDialog"
          ></filter-bar-pop>
        </div>
      </div>
    </template>
    
    <script>
      import FilterBarPop from './FilterBarPop'
      export default {
        props: {
          barMenus: {
            type: Array,
            required: true,
            validator: function (value) {
              //TODO:验证数据有效性
              return true;
            }
          },
          top: String
        },
        data() {
          return {
            isShow: false,
            hasTabHeader: false,
            selectedMenu: {},
            selectedIndexMenu: undefined
          }
        },
        methods: {
          handleShowDialog(menu, index) {
            this.isShow = true;
            this.selectedMenu = menu;
            this.selectedIndexMenu = index;
            if (menu.showTabHeader) {
              this.hasTabHeader = true;
            } else {
              this.hasTabHeader = false;
            }
            let _menu = JSON.parse(JSON.stringify(menu));
            _menu.tabs = {};
            this.$emit('showDialog', _menu);
          },
          handleChangeTab(tab) {
            this.$emit('changeTab', tab.index);
          },
          handleChangeMainItem(mainItem) {
            let _mainItem = JSON.parse(JSON.stringify(mainItem));
            this.$emit('changeMainItem', _mainItem);
          },
          handleCloseDialog() {
            this.isShow = false;
            this.selectedIndexMenu = -1;
            this.$emit('closeDialog');
          },
          changeSelect() {
            var selectData = [];
            this.barMenus.forEach(function (barMenu, index, arr) {
              let _selectBarData = {};
              // console.log("barMenu.name: " + barMenu.name);
              _selectBarData.name = barMenu.name;
              _selectBarData.value = barMenu.value;
              _selectBarData.tab = {};
              let tab = barMenu.tabs[barMenu.selectIndex];
              // console.log("tab.name: " + tab.name);
              _selectBarData.tab.name = tab.name;
              _selectBarData.tab.value = tab.value;
              let mainItem = tab.detailList[tab.selectIndex];
              _selectBarData.tab.mainItem = {}
              // console.log("mainItem.name: " + mainItem.name);
              _selectBarData.tab.mainItem.name = mainItem.name;
              _selectBarData.tab.mainItem.value = mainItem.vaule;
              let subItem = false;
              if (mainItem.list) {
                subItem = mainItem.list[mainItem.selectIndex];
                _selectBarData.tab.mainItem.subItem = {};
                // console.log("subItem.name: " + subItem.name);
                _selectBarData.tab.mainItem.subItem.name = subItem.name;
                _selectBarData.tab.mainItem.subItem.value = subItem.value;
              } else {
                _selectBarData.tab.mainItem.subItem = subItem;
              }
              selectData.push(_selectBarData);
            });
            this.$emit('changeSelect', selectData);
          }
        },
        components: {
          'filter-bar-pop': FilterBarPop
        }
      }
    </script>
    
    <style lang="scss">
      .filterbar {
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        .container {
          width: 100%;
          outline: 1px solid #DBDCDE;
          position: relative;
          .row {
            display: flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: -webkit-box;
            display: -webkit-flex;
            flex-direction: row;
            -webkit-flex-direction: row;
            justify-content: space-around;
            -webkit-box-pack: space-around;
            -moz-box-pack: space-around;
            -ms-flex-pack: space-around;
            width: 90%;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
            .selected {
              color: orange;
            }
            .col {
              span {
                margin-left: 5px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    </style>

    components/FilterBar/FilterBarPop.vue

    <template>
      <transition name="fade">
        <div class="filterbarpop-wrap" v-if="visible" :style="{'top': bgTop + 'px'}">
          <div class="filterbarpop-bg" @click="closeDialog" :style="{'top': bgTop + 'px'}"></div>
          <div class="filterbarpop">
            <div class="tab-bar" v-show="hasTabHeader">
              <a href="javascript:;" :style="{'flex': column}" role="button" @click="clickTab(tab, index)" v-for="(tab, index) in menu.tabs"
                :class="{'selected': selectIndexTab == index}"><span :class="tab.icon"></span>{{tab.name}}</a>
            </div>
            <div class="main">
              <div class="main-sidebar" :class="{'full-line': !items,'bg-style':items,'line-style':!items,}">
                <div v-if="menu.type !== 'filter'" class="item" @click="clickSidebar(sidemenu, index)" v-for="(sidemenu, index) in sideMenus.detailList"
                  :class="{'selected': currentSelectIndex == index}">
                  <span :class="sidemenu.icon"></span>{{ sidemenu.name }}
                </div>
                <div v-if="menu.type == 'filter'" v-for="(sm, _index) in menu.tabs">
                  <div class="filter-name">{{sm.name}}</div>
                  <div class="filter-item">
                    <span v-for="(sidemenu, index) in sm.detailList" class="item-operation" @click="clickFilterbar(sm, _index, index)" :class="{'multi-selected': sidemenu.selectIndex == index}">
                    {{ sidemenu.name }}
                    </span>
                  </div>
                </div>
                <div v-if="menu.type == 'filter'" class="filter-btns">
                  <a href="javascript:;" role="button" @click="handleClean">取消</a>
                  <a href="javascript:;" role="button" @click="handleEnsure">确认</a>
                </div>
              </div>
              <div class="main-list line-style" v-if="items">
                <span class="item" @click="clickItem(item, index)" v-for="(item, index) in items.list" :class="{'selected': currentSelectIndex == sideMenus.selectIndex && items.selectIndex == index}">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
      export default {
        props: {
          menu: {
            type: Object
          },
          showDialog: {
            type: Boolean,
            default: true
          },
          hasTabHeader: {
            type: Boolean,
            default: true
          },
          filterTop: {
            type: String
          }
        },
        data() {
          return {
            selectIndexTab: 0,
            currentSelectIndex: 0,
            sideMenus: {},
            items: {},
            column: '',
            visible: false,
            top: 1,
            bgTop: 0,
            range: {}
          }
        },
        mounted() {
          this.bgTop = document.querySelector('.filterbar').offsetHeight + this.filterTop / 1;
        },
        watch: {
          showDialog(v) {
            this.visible = v;
            if (v) {
              //初始化数据
              this.initData();
            }
          },
          menu(m) {
            //根据tabs数量计算列宽
            this.column = '0 0 ' + 100 / m.tabs.length + '%';
            //初始化数据
            this.initData();
          }
        },
        methods: {
          //初始化数据
          initData(tabIndex) {
            var tmpTabIndx = 0;
            tabIndex === undefined ? tmpTabIndx = this.menu.selectIndex : tmpTabIndx = tabIndex
            //判断tabindex的范围是否在数组内
            if (tmpTabIndx >= 0 && tmpTabIndx < this.menu.tabs.length) {
              this.selectIndexTab = tmpTabIndx;
            } else {
              this.selectIndexTab = 0;
            }
            //确认选中tab的一级列表
            this.sideMenus = this.menu.tabs[this.selectIndexTab];
            //如果当前选中tab是对应选中结果的tab
            // debugger;
            if (this.selectIndexTab == this.menu.selectIndex) {
              this.currentSelectIndex = this.sideMenus.selectIndex;
            }
            // else{
            //   this.sideMenus.selectIndex = -1;
            //   this.currentSelectIndex = -1;
            // }
            //判断是否包含二级列表,包含则赋值
            //如果一级列表的选中状态正确,则查询二级列表
            if (this.currentSelectIndex >= 0 && this.currentSelectIndex < this.sideMenus.detailList.length) {
              //判断是否有二级列表
              if (this.sideMenus.detailList[this.currentSelectIndex].list) {
                this.items = this.sideMenus.detailList[this.currentSelectIndex];
              } else {
                //不显示二级列表
                this.items = false;
              }
            } else { //如果一级列表选中状态不正确,按第一项的的数据判断
              //判断是否有二级列表
              if (this.sideMenus.detailList[0].list) {
                //显示空的二级列表
                this.items = [];
              } else {
                //不显示二级列表
                this.items = false;
              }
            }
          },
          //修改选项
          changeSelect(index) {
            //记录tabIndex
            this.menu.selectIndex = this.selectIndexTab;
            //记录一级列表选项
            this.sideMenus.selectIndex = this.currentSelectIndex;
            if (this.items) {
              //确认二级列表选项
              this.items.selectIndex = index;
              //显示名称
              this.menu.name = this.items.list[this.items.selectIndex].name;
              this.menu.value = this.items.list[this.items.selectIndex].value;
            } else {
              //显示名称
              this.menu.name = this.sideMenus.detailList[this.sideMenus.selectIndex].name;
              this.menu.value = this.sideMenus.detailList[this.sideMenus.selectIndex].value;
            }
            this.$emit('changeSelect');
            this.closeDialog();
          },
          // 帅选修改选项
          changeRangeSelect() {
            this.menu.name = '筛选';
            for(var i in this.range){
              if(Object.keys(this.range[i].value).length == 0){
                delete this.range[i]
              }
            }
    
            this.menu.value = Object.keys(this.range).length > 0 ? this.range : '';
            this.$emit('changeSelect');
            this.closeDialog();
          },
          // 选择Tab菜单
          clickTab(tab, index) {
            if (index !== this.selectIndexTab) {
              //根据选中的tab初始化数据
              this.initData(index);
              this.$emit('changeTab', {
                tab,
                index
              })
            }
          },
          // 筛选方法
          clickFilterbar(v, I, i) {
            v.detailList[i].selectIndex = i;
            // debugger
            if(!this.range[I]){
              this.range[I] = {name: v.name, value: {}};
              this.range[I].value[i] = v.detailList[i].value;
            } else {
              if(!this.range[I].value[i]){
                this.range[I].value[i] = v.detailList[i].value;
              } else {
                delete this.range[I].value[i];
                v.detailList[i].selectIndex = -1;
              }
            }
          },
          // 点击左侧列表
          clickSidebar(v, i) {
            if (this.currentSelectIndex !== i) {
              this.currentSelectIndex = i;
              //存在二级列表
              if (this.sideMenus.detailList[this.currentSelectIndex].list) {
                this.items = this.sideMenus.detailList[this.currentSelectIndex];
              } else {
                //只有一级列表,记录选项,退出
                this.changeSelect();
              }
              this.$emit('changeMainItem', {
                v,
                i
              });
            }
          },
          // 点击右侧列表
          clickItem(v, i) {
            //只有一级列表,记录选项,退出
            this.changeSelect(i);
          },
          // 关闭弹框
          closeDialog() {
            this.visible = false;
            this.$emit('closeDialog');
          },
          // 提交已选内容
          handleEnsure() {
            this.changeRangeSelect();
            this.$emit('changeMainItem', this.range);
            // this.closeDialog();
          },
          // 清除已选内容
          handleClean() {
            this.menu.tabs.map(item => {
              item.detailList.map(_item => {
                _item.selectIndex = -1;
              })
            });
            this.range = {};
          }
        }
      }
      /**
        TODOS:
        1. 需要一个属性去辨别帅选项
        2. 多选
        3. 添加多选框
    
       */
    </script>
    
    <style lang="scss">
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity .5s
      }
      .fade-enter,
      .fade-leave-active {
        opacity: 0
      }
      .filterbarpop-wrap {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        max-height: 100%;
        .filterbarpop-bg {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0, 0, 0, .6);
        }
        .filterbarpop {
          position: absolute;
          width: 100%;
          border-top: 1px solid #ccc;
          .tab-bar {
            width: 100%;
            display: flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: -webkit-box;
            display: -webkit-flex;
            flex-directives: row;
            -webkit-flex-direction: row;
            align-items: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            height: 40px;
            .selected {
              border-bottom: 2px solid orange;
              box-sizing: border-box;
            }
            a {
              background: #fff;
              height: 100%;
              line-height: 40px;
              text-decoration: none;
              color: #323232;
              text-align: center;
            }
          }
          .main {
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            -webkit-flex-direction: row;
            height: 250px;
            background: #fff;
            .main-sidebar {
              flex: 0 0 50%;
              overflow: auto;
              width: 100%;
            }
            .full-line {
              flex: 0 0 100%;
              div {
                text-align: left; // text-indent: 1.5em;
              }
            }
            .item-operation {
              display: inline-block;
              padding: 10px 4px 10px 4px;
              border: 1px solid rgb(91, 149, 255);
              border-radius: 3px;
              height: 0;
              line-height: 1px;
            }
            .multi-selected {
              background: rgb(91, 149, 255);
              color: #fff !important;
            }
            .filter-item {
              border-top: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
              padding: 13px 0 5px 10px;
              span {
                margin-right: 8px;
                margin-bottom: 8px;
              }
            }
            .filter-name {
              padding: 10px 0 10px 10px;
            }
            .filter-btns {
              display: flex;
              display: -webkit-flex;
              flex-direction: row;
              -webkit-flex-direction: row;
              justify-content: space-around;
              -webkit-box-pack: space-around;
              -moz-box-pack: space-around;
              -ms-flex-pack: space-around;
              position: absolute;
              bottom: -40px;
              width: 100%;
              line-height: 40px;
              z-index: 100;
              background: #fff;
              a {
                display: block;
                width: 100%;
                text-align: center;
                text-decoration: none;
                color: #ccc;
                border-top: 1px solid #ccc;
                &:last-child {
                  background: #39f;
                  color: #fff;
                }
              }
            }
            .main-list {
              flex: 0 0 50%;
              overflow: auto;
              span:active {
                background: #f5f5f5;
              }
            }
            .line-style {
              .item {
                text-align: left;
                margin-left: 10px;
                padding-left: 15px;
                border-bottom: 1px solid #ccc;
                position: relative;
                &.selected {
                  color: orange;
                  border-color: orange;
                  span {
                    color: orange;
                  }
                }
                .checkbox {
                  position: absolute;
                  right: 50px;
                  top: 10px;
                }
              }
            }
            .bg-style {
              .item {
                background-color: #f5f5f5;
                &.selected {
                  background-color: #FFF;
                }
              }
            }
            .item {
              display: inline-block;
              height: 40px;
              background: #fff;
              line-height: 40px;
              width: 100%;
              text-decoration: none;
              color: #444;
              span {
                font-size: 14px;
                color: #888;
                margin-right: 10px;
                vertical-align: middle;
              }
              &:active {
                color: #fff;
              }
            }
          }
        }
      }
    </style>

    2.页面调用

    pages/FilterBarTest

    <!-- 移动端筛选条件 测试页 -->
    <template>
      <div>
        <!-- 标题栏 -->
        <x-header title="移动端筛选条件 测试页"></x-header>
        <!-- 内容部分 -->
        <FilterBar
          top="40"
          :barMenus="barMenus"
          @showDialog="handleShowDialog"
          @closeDialog="handleCloseDialog"
          @changeTab="handleChangeTab"
          @changeMainItem="handleChangeMainItem"
          @changeSelect="changeData">
        </FilterBar>
      </div>
    </template>
    
    <script>
      import { XHeader } from 'vux'
      // 引入组件
      import FilterBar from '../../components/FilterBar/FilterBar.vue'
      // 引入假数据
      import barMenus from './data.js';
    
      export default {
        name: 'FilterBarTest',
        components: {
          XHeader,
          FilterBar,
        },
        data(){
          return {
            barMenus: barMenus
          }
        },
        methods: {
          handleShowDialog(v) {
            // console.log(v);
          },
          handleCloseDialog(v) {
            // console.log(v);
          },
          handleChangeTab(v) {
            // console.log(v);
          },
          handleChangeMainItem(v) {
            // console.log(v)
          },
          changeData(v) {
            console.log(v);
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      //
    </style>
    

    data.js

    export default [
    {
      name: '附近',
      icon: '',
      value: 'area',
      showTabHeader: true,
      defaultIcon: '',
      selectIcon: '',
      selectIndex: 0,
      tabs: [
        {
          icon: '',
          name: '商圈',
          selectIndex: 0,
          detailList: [
            {
              name: '附近',
              icon: '',
              selectIndex: 0,
              list: [{
                name: '默认',
                value: 'all'
              }, {
                name: '500米',
                value: '500'
              }, {
                name: '1000米',
                value: '1000'
              }]
            },
            {
              name: '朝阳区',
              icon: '',
              selectIndex: 1,
              list: [{
                name: '全部',
                value: 'all'
              }, {
                name: '建国门',
                value: 'jianguomen'
              }, {
                name: '亚运村',
                value: 'yayuncun'
              }]
            },
            {
              name: '海淀区',
              icon: '',
              selectIndex: 2,
              list: [{
                name: '全部',
                value: 'all'
              }, {
                name: '中关村',
                value: 'zhongguancun'
              }, {
                name: '五道口',
                value: 'wudaokou'
              }]
            }
          ]
        },
        {
          icon: '',
          name: '地铁沿线',
          selectIndex: 1,
          detailList: [
            {
              name: '1号线',
              icon: '',
              selectIndex: 0,
              list: [{
                name: '平果圆',
                value: 'pingguoyuan'
              }, {
                name: '古城',
                value: 'gucheng'
              }, {
                name: '八角游乐园',
                value: 'bajiaoyouleyuan'
              }]
            },
            {
              name: '2号线',
              icon: '',
              selectIndex: 1,
              list: [{
                name: '积水潭',
                value: 'jishuitan'
              }, {
                name: '鼓楼大街',
                value: 'guloudajie'
              }, {
                name: '安定门',
                value: 'andingmen'
              }]
            },
            {
              name: '4号线',
              icon: '',
              selectIndex: 2,
              list: [{
                name: '安和桥北',
                value: 'anheqiaobei'
              }, {
                name: '北宫门',
                value: 'beigongmen'
              }, {
                name: '西宛',
                value: 'xiwan'
              }]
            }
          ]
        }
      ]
    },
    {
      name: '菜系',
      icon: '',
      value: 'food',
      showTabHeader: false,
      defaultIcon: '',
      selectIcon: '',
      selectIndex: 0,
      tabs: [
        {
          icon: '',
          name: '',
          selectIndex: 0,
          detailList: [
            {
              name: '全部',
              icon: '',
              value: '全部',
              selectIndex: 0,
              list: [{
                name: "全部",
                value: 'all'
              }]
            },
            {
              name: '中餐馆',
              icon: '',
              value: '中餐馆',
              selectIndex: 1,
              list: [{
                name: '全部',
                value: 'all'
              }, {
                name: '火锅',
                value: 'hot pot'
              }, {
                name: '川菜',
                value: 'Sichuan cuisine'
              }]
            },
            {
              name: '西餐馆',
              icon: '',
              value: '西餐管',
              selectIndex: 2,
              list: [{
                name: '全部',
                value: 'all'
              }, {
                name: '披萨',
                value: 'pizza'
              }, {
                name: '牛排',
                value: 'steak'
              }]
            }
          ]
        }
      ]
    },
    {
      name: '排序',
      icon: '',
      value: 'compositor',
      showTabHeader: false,
      defaultIcon: '',
      selectIcon: '',
      selectIndex: 0,
      tabs: [
        {
          icon: '',
          name: '',
          selectIndex: 0,
          detailList: [
            {
              name: '只能排序',
              icon: '',
              value: '0',
              selectIndex: 0
            },
            {
              name: '离我最近',
              icon: '',
              value: '1',
              selectIndex: 1
            },
            {
              name: '评价最好',
              icon: '',
              value: '2',
              selectIndex: 2
            }
          ]
        }
      ]
    },
    {
      name: '筛选',
      icon: '',
      value: 'filter',
      type: 'filter',
      showTabHeader: false,
      defaultIcon: '',
      selectIcon: '',
      selectIndex: 0,
      tabs: [
        {
          icon: '',
          name: '价格',
          selectIndex: 0,
          detailList: [
            {
              name: '0-50',
              value: '0-50',
              selectIndex: -1
            },
            {
              name: '50-100',
              value: '50-100',
              selectIndex: -1
            },
            {
              name: '100-150',
              value: '100-150',
              selectIndex: -1
            },
            {
              name: '150-200',
              value: '150-200',
              selectIndex: -1
            },
            {
              name: '200-250',
              value: '200-250',
              selectIndex: -1
            },
            {
              name: '300-350',
              value: '300-350',
              selectIndex: -1
            }
          ]
        },{
          icon: '',
          name: '入住类型',
          selectIndex: 1,
          detailList: [
            {
              name: '不限',
              value: 'all',
              selectIndex: -1
            }, {
                name: '全日房',
                value: 'daily',
                selectIndex: -1
            }, {
                name: '钟点房',
                value: 'time',
                selectIndex: -1
            },
            {
              name: '支持团购',
              value: 'group buy',
              selectIndex: -1
            }
          ]
        }
      ]
    }]
    

    3.效果图

      

    .

    展开全文
  • WPF DevExpress grid 设置自定义筛选栏的条件为包含关系根据 DevExpress.Xpf.Grid改造 来源:CSDN  原文:https://blog.csdn.net/alisa525/article/details/41910443 DevExpress.Xpf.Grid:  foreach (DevExpress...
  • 使用datatables按自定义条件筛选数据

    万次阅读 2017-09-27 17:04:53
    datatables中用过自定义条件进行过滤筛选数据的设置方法 使用jquery.datatables.js插件封装表格数据,可以方便快捷地对表格数据进行处理。该插件内置的方法诸如:列排序、数据统计、分页、数据过滤(数据查询)在这里...
  • 基于Table类开发的后台控制器支持自定义条件查询,例如:cms框架内置了常用的模糊匹配和时间段匹配方式在开发中,会有增加筛选查询条件的需求,下面来介绍如何把某些自定义字段作为查询条件增加上去1、首先需要在...
  • 织梦DEDECMS的自定义字段筛选功能+多重筛选功+联动类别筛选+gbk+utf8,亲测无误,方便使用。直接通过FTP上传到对应的文件就行。
  • 主要介绍了element-ui组件table实现自定义筛选功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 采用el-table事件自定义筛选 <el-table class="el-table-layout" ref="table" :data="Table.slice((currentPage-1)*PageSize,currentPage*PageSize)" @filter-change="filterchange"> filterchange...
  • 织梦dedecms自定义条件筛选插件,有gbk+ut8编码版本,大家根据你的源码编码版本来替换使用,用起来就是这样的 下载后,有两个文件夹include和templets,上传到根目录替换,templets是演示的模板 PS:后台需要开启...
  • 自定义筛选器前言代码效果 前言 找了半天Dev自带数据筛选 记录下 代码 private void button1_... // Dev 中 设置自定义筛选条件 gridView1.ActiveFilterString = "当前状态='张三'"; this.gridControl1.Refresh();
  • django admin 筛选器:自定义筛选范围

    千次阅读 2020-01-03 17:28:57
    自定义模板 template = 'admin/NumberRangeFilter.html' {% load i18n %} <span class="range_filter_label">HK$</span><input type="number" class="filter_amount" name="{{ field_name }}__gte" placeholder...
  • 安卓 自定义条件筛选布局 定义了多条件标签切换监听接口.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • wordpress 自定义条件筛选文章

    千次阅读 2011-08-22 11:36:38
    wordpress中的loop真的非常的强大,以前都有点忽略它,越来越多的做了...注意:query_posts函数是一个非常有用的函数,你可以在posts循环前加上你需要的查询条件,然后loop循环的结果就是你需要的过滤之后的结果了
  • 方式1:用调接口的方式去筛选数据 <el-popover v-model="isShowFilter" placement="right" width="400" trigger="click"> <el-checkbox-group v-model="filterResVal"> <el-checkbox :label=...
  • 强迫症得我觉得 筛选 - 添加自定义筛选 - ID 很碍眼,这里显示的是所有的存储字段,我想把它去掉: 安排 在当前模型下继承fields_get方法: @api.model def fields_get(self, allfields=None, attributes=None): ...
  • ant design vue 表头自定义筛选

    千次阅读 2020-05-22 16:28:55
    其实搜索里面已经有这一搜索条件了,我不知道为啥还要加一个。 那既然提了,就得想办法实现。然后我找了官方文档。 这是官方网站给的示例及代码: 地址点【这里】 怎么说代码还是挺晦涩难懂的,而且还没有注释。...
  • 任何页面实现自定义筛选,不二开内核文件,全部在模板中实现,不影响升级,不使用搜索功能。首页在页头引入jquery.min.js 文件,默认的模板是有这个的。如果不是默认的模板,也没这个文件,请去下载个。然后在筛选的...
  • FM实现F4帮助系列四:弹出框多筛选条件的搜索帮助(自定义筛选字段) 函数: F4IF_INT_TABLE_VALUE_REQUEST 效果图: 本例子代码: *&-------------------------------------------------------------...
  • varints =new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9 }; // var r = ints.Where(i => (i > 5 && i <= 7) || (i == 3)); // 要a实μ现?的?表í达?式? // 创′建¨...
  • WebApi:自定义筛选

    2015-06-26 12:14:00
    最近在项目中有这样一个需求,记录每次Api访问的调用时间,运行时间,传入数据,返回数据等信息。...在这里简单记录一下自定义筛选器的创建过程 1:创建一个类:LogActionFilter,继承ActionFilterAttribut...
  • 源于一直负责的组件库需求,对Antd表格组件进行了二次封装,简化了很多功能配置项(分页、排序、筛选、样式等),其中对多个列筛选进行统一清空功能遇到了不少坑,记录一下…… 重点是合理使用filteredValue属性。 ...
  • 但在搜索视图中【添加自定义筛选】【添加自定义分组】下的可选字段中,会将当前模型的所有字段都显示出来,包括原有的和新增的。这样的话,我们搜索的时候,就得在所有字段的列表中寻找,很气人。 怎么将原有的,不...
  • excel宏-自定义筛选查询

    千次阅读 2020-08-10 19:02:01
    valuename As String) db_rowmax = Worksheets("detail").UsedRange.Rows.Count tmp = "=*" & valuename & "*" '包含 tmpid = ">=" & valueid '大于等于筛选 Range("B6:C6").Select Selection.AutoFilter Field:=1,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,049
精华内容 20,019
关键字:

怎样自定义筛选条件