• 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
                    }
  • 相关阅读:
    js的6种继承方式
    将数组分割成指定长度的小数组
    input file样式美化
    css伪类和伪元素的区别,:before和::before的区别
    css实现垂直居中
    css实现中间文字,两边横线效果
    css中:not()选择器和jQuery中.not()方法
    jQuery中判断input的disabled属性
    jQuery中判断input的checked属性
    HMTL label标签
  • 原文地址:https://www.cnblogs.com/m110/p/10144267.html
Copyright © 2020-2023  润新知