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 }