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
                }
原文地址:https://www.cnblogs.com/m110/p/10144267.html