• 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
                    }
  • 相关阅读:
    Django 安装步骤
    Django day01 web应用程序 , http协议
    如何让 vue 在 sublime 中变成彩色的
    HTML 14 JS事件
    HTML中常用的颜色词汇
    HTML 13 常用构造函数( 类 )
    sublime 的快捷键大全
    python 46 盒模型 与盒模型布局
    python 46 边界圆角 、a_img_list标签 、伪类选择器
    python 46 css组合选择器 及优先级 、属性选择器
  • 原文地址:https://www.cnblogs.com/m110/p/10144267.html
Copyright © 2020-2023  润新知