zoukankan      html  css  js  c++  java
  • kendo grid 过滤器

    colums中:

    filterable: { ui: chargeFilter }

    Js中:

        var chs = ["", ""];
        function chargeFilter(element) {
            element.kendoDropDownList({
                dataSource: chs,
                optionLabel: "--请选择--"
            });
        };

     或者直接多选过滤

    filterable: { multi: true }  //最简便

    还有一种多选的过滤

    // 下拉框过滤器或多选过滤器
    // element 元素
    // grid-表格
    // field-要过滤的字段名称
    // ds-下拉框或多选的数据源
    // textField, valueField 下拉框或多选的显示设置
    // optionText optionLabel
    // type true-kendoMultiSelect; false-kendoDropDownList
    ////////////////////////////////////////////
    function selectFilter(element, grid, field, ds, textField, valueField, optionText, type) {
        element.removeAttr("data-bind");
        element.nextAll().remove();
        element.prev().remove();
    
        ds.options.serverPaging = false;
        ds._pageSize = 99999;
        var options = {
            dataSource: ds,
            optionLabel: optionText,
            dataTextField: textField,
            dataValueField: valueField,
            change: function (e) {
                var filter = { name: field, logic: "or", filters: [] };
                var values = this.value();
                if (angular.isArray(values)) {
                    $.each(values, function (i, v) {
                        if (v != optionText)
                            filter.filters.push({ field: field, operator: "eq", value: v });
                    });
                } else {
                    if (values != optionText)
                        filter.filters.push({ field: field, operator: "eq", value: values });
                }
                //当前filters
                var curFilters = grid.dataSource.filter();
                if (angular.isUndefined(curFilters)) curFilters = { filters: [] };
                //删除当前UseType在filter中
                $.each(curFilters.filters, function (i, v) {
                    if (v.name == field) {
                        curFilters.filters.splice(i, 1);
                        return;
                    }
                });
                //添加
                if (filter.filters.length > 0)
                    curFilters.filters.push(filter);
                //过滤
                grid.dataSource.filter(curFilters);
            }
        }
        if (type)
            element.kendoMultiSelect(options);
        else
            element.kendoDropDownList(options);
    }
    {
                        field: "PayStatus", filterable: {
                            logic: "or",
                            extra: false,
                            ui: function (element) {
                                selectFilter(element, $scope.gridWechatBill, 'PayStatus', kendoDs.enums('PayStatus'), "Name", "Name", "--请选择--", true);
                            }
                        }, title: "状态",  70
                    }
  • 相关阅读:
    关于systemgenerator的学习方法
    关于FPGA的非HDL设计方法比较
    vivado simlation post-implementation "not found module"问题分析
    快速重启tomcat的shell脚本
    python2 和python3报错:No module named ‘MySQLdb'”
    CentOS生产环境无网络安装percona-xtrabackup2.4【RPM安装教程】
    磁盘system ID解释
    对硬盘进行扩容,LVM逻辑卷创建案例实记
    LVS的原理
    毕业1年,我是如何走向运维工程师的
  • 原文地址:https://www.cnblogs.com/m110/p/10144267.html
Copyright © 2011-2022 走看看