自定义 angular 甘特图行过滤器

Question

我有一个带有 table 列 'status' 的甘特图。该列可以有多个值，如（活动、关闭、运行、停止）。我希望能够按具有多个值的项目状态列进行过滤，例如，为每个状态值（活动、关闭等）设置多个复选框。

我知道您可以像这样将输入文本绑定到行过滤器，但是如果我想在同一个过滤器中使用多个值怎么办？

<input type="text" data-ng-model="options.filterRow" />
                                <div gantt="gantt" 
                                        data="data" 
                                        options="options"
                                        filter-row="{'status': options.filterRow}">
                                    <gantt-table columns="['model.status']"></gantt-table>
                                    <gantt-tree></gantt-tree>
                                    <gantt-groups></gantt-groups>
                                    <gantt-tooltips></gantt-tooltips>
                                    <gantt-bounds></gantt-bounds>
                                    <gantt-progress></gantt-progress>
                                    <gantt-sortable></gantt-sortable>
                                    <gantt-movable></gantt-movable>
                                    <gantt-draw-task></gantt-draw-task>
                                    <gantt-resize-sensor></gantt-resize-sensor>
                                </div>

Answer 1

我找到了解决问题的方法。

<select id="status" data-ng-model="filter1"><option .. /></select>
<select id="project" data-ng-model="filter2"><option .. /></select>

<div gantt="gantt" data="data" options="options" filter-row="filterFunction" current-date="column" current-date-value="getToday" column-width="100"
                            api="registerApi">
                            <gantt-table columns="['model.name', 'model.planned', 'model.delayed']"
                                headers="{'model.name': 'Project', 'model.planned': 'Planned [days]', 'model.delayed': 'Delayed [days]'}"
                                classes="{'model.name': 'gantt-project', 'model.planned' : 'gantt-column-days', 'model.delayed' : 'gantt-column-days'}"> </gantt-table>
                            <gantt-tree></gantt-tree>
                            <gantt-groups></gantt-groups>
                            <gantt-tooltips></gantt-tooltips>
                            <gantt-bounds></gantt-bounds>
                            <gantt-progress></gantt-progress>
                            <gantt-sortable></gantt-sortable>
                            <gantt-movable enabled="false"></gantt-movable>
                            <gantt-draw-task></gantt-draw-task>
                            <gantt-resize-sensor></gantt-resize-sensor>
                        </div>

这进入 angular 控制器。

    $scope.registerApi = function(api) {
        $scope.api = api;
    }

    // refresh grid on filter change
    for (i=0 ; i<filters.length; i++) {
        $scope.$watch('filter'+filters[i], function() {
            $scope.api.rows.refresh();
        })
    }

    $scope.filterFunction = function(row){
        var valid = true;
        //all filters implementations go here
        return valid;
    }

自定义 angular 甘特图行过滤器

Custom angular gantt row filter

angularjs

filter

gantt-chart