【问题标题】:Angular Kendo Scheduler FilterAngular Kendo 调度程序过滤器
【发布时间】:2015-09-18 13:29:57
【问题描述】:

我在我的项目中使用剑道调度程序,我的角度控制器调用服务器以获取数据,但是当我尝试动态过滤事件时,事件并没有消失,有没有人有任何建议关于如何动态过滤我的调度程序数据?这是我的控制器

        $scope.exercises = data.Data;

        $scope.result = new kendo.data.ObservableArray([]);
        $scope.transformData = function (response) {
            var event;
            for (var idx = 0, length = response.length; idx < length; idx++) {
                event = response[idx];

                $scope.result.push(new kendo.data.SchedulerEvent({
                    id: event.TaskID,
                    taskId: event.TaskID,
                    ownerId: event.OwnerID,
                    start: kendo.parseDate(event.start),
                    end: kendo.parseDate(event.end),
                    title: event.Title,
                    description: event.Description,
                    isAllDay: event.IsAllDay
                }));
            }
        };

        $scope.schedulerOptions = {
            showWorkHours: false,
            editable: false,
            views: [
                "day",
                "workWeek",
                "week",
                {type: "month", selected: true},
            ],
            resources: [
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource: [
                        {value: "sazonalidade_padrao", color: "red" },
                        {value: "volumetrica_anual", color: "green" },
                        {value: "flexibilidade_mensal", color: "yellow"},
                        {value: "volumetrica_mensal", color: "orange"}
                    ]
                }
            ],
            dataSource: {
                data: $scope.result,
                filter: {
                    logic: "or",
                    filters: [
                        { field: "ownerId", operator: "eq", value: "sazonalidade_padrao" },
                        { field: "ownerId", operator: "eq", value: "volumetrica_anual" },
                        { field: "ownerId", operator: "eq", value: "flexibilidade_mensal" },
                        { field: "ownerId", operator: "eq", value: "volumetrica_mensal" }
                    ]
                }
            }
        };


        $scope.generateObjToScheduler = function() {
            var i = 0;
            var resultado = [];
            angular.forEach($scope.exercises, function (exercise) {
                if (exercise.Operation.generalStatus == 'aprovado') {
                    i++;
                    var dateStart = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var dateEnd = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var response = {
                        "TaskID": i,
                        "OwnerID": exercise.OperationFlexibility.type,
                        "Title": exercise.Operation.code+'-'+exercise.OperationFlexibility.name,
                        "Description": exercise.OperationFlexibility.name,
                        "IsAllDay": true,
                        "start": "/Date(" + dateStart + ")/",
                        "end": "/Date(" + dateEnd + ")/"
                    };
                    resultado.push(response);
                }
            });
            $scope.transformData(resultado);
        };
        $scope.generateObjToScheduler();

        $scope.filterFlexibility = function() {
            $scope.schedulerOptions.dataSource.filter.filters.splice(0,1);
        };
    }
]);

我从一个复选框触发 filterFlexibility 函数

【问题讨论】:

    标签: javascript angularjs kendo-ui kendo-scheduler


    【解决方案1】:

    我会回答我自己的问题,我找到了解决方案,当你从 kendo.data.ObservableArray 拼接一个项目时,kendo 会重新组织这个数组的所有索引,所以这是我过滤 itens 的解决方案

    $scope.exercises = data.Data;
            var i = 0;
            $scope.result = new kendo.data.ObservableArray([]);
            $scope.transformData = function (response) {
                var event;
                for (var idx = 0, length = response.length; idx < length; idx++) {
                    event = response[idx];
    
                    $scope.result.push(new kendo.data.SchedulerEvent({
                        id: event.TaskID,
                        taskId: event.TaskID,
                        ownerId: event.OwnerID,
                        start: kendo.parseDate(event.start),
                        end: kendo.parseDate(event.end),
                        title: event.Title,
                        description: event.Description,
                        isAllDay: event.IsAllDay
                    }));
                }
            };
    
            $scope.schedulerOptions = {
                showWorkHours: false,
                views: [
                    "day",
                    "workWeek",
                    "week",
                    {type: "month", selected: true}
                ],
                resources: [
                    {
                        field: "ownerId",
                        title: "Owner",
                        dataSource: [
                            {text: "sazonalidade_padrao",value: "sazonalidade_padrao", color: "red" },
                            {text: "volumetrica_anual",value: "volumetrica_anual", color: "green" },
                            {text: "flexibilidade_mensal",value: "flexibilidade_mensal", color: "yellow"},
                            {text: "volumetrica_mensal",value: "volumetrica_mensal", color: "orange"}
                        ]
                    }
                ],
                dataSource: {
                    data: $scope.result
                }
            };
    
    
            $scope.generateObjToScheduler = function() {
                var resultado = [];
                angular.forEach($scope.exercises, function (exercise) {
                    if (exercise.Operation.generalStatus == 'aprovado') {
                        i++;
                        var dateStart = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                        var dateEnd = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                        var response = {
                            "TaskID": i,
                            "OwnerID": exercise.OperationFlexibility.type,
                            "id": exercise.dOperationFlexibilityId,
                            "Title": exercise.Operation.code+'-'+exercise.OperationFlexibility.name,
                            "Description": exercise.OperationFlexibility.name,
                            "IsAllDay": true,
                            "start": "/Date(" + dateStart + ")/",
                            "end": "/Date(" + dateEnd + ")/"
                        };
                        resultado.push(response);
                    }
                });
                $scope.transformData(resultado);
            };
            $scope.generateObjToScheduler();
    
            $scope.filterFlexibility = function(flexibility) {
                var a = 0;
                var j = 0;
                var inArray = false;
                while(a < $scope.result.length){
                    if($scope.result[a].ownerId == flexibility){
                        inArray = true;
                        $scope.result.splice(a, 1);
                        a=0;
                    }else{
                        a++
                    }
                }
                if(inArray == false) {
                    for (j; j < $scope.exercises.length; j++) {
                        if ($scope.exercises[j].type == flexibility) {
                            i++;
                            $scope.result.push(new kendo.data.SchedulerEvent({
                                id: i,
                                taskId: i,
                                ownerId: flexibility,
                                start: kendo.parseDate("/Date(" + moment($scope.exercises[j].dueDate, 'YYYY-MM-DD').format('x') + ")/"),
                                end: kendo.parseDate("/Date(" + moment($scope.exercises[j].dueDate, 'YYYY-MM-DD').format('x') + ")/"),
                                title: $scope.exercises[j].Operation.code + '-' + $scope.exercises[j].OperationFlexibility.name,
                                description: $scope.exercises[j].OperationFlexibility.name,
                                isAllDay: true
                            }));
                        }
                    }
                }
            };
    

    【讨论】:

      猜你喜欢
      • 2016-10-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-02-27
      • 1970-01-01
      • 2019-07-12
      • 1970-01-01
      • 2014-12-08
      相关资源
      最近更新 更多