在数据库的DHTMLX Scheduler Timeline视图中添加资源(y_units)

时间:2014-06-12 15:16:29

标签: javascript php json dhtmlx dhtmlx-scheduler

我需要一个调度程序,我想过拥有DHTMLX时间轴调度程序。我发现它正是我想要的。但问题是我无法从数据库加载资源。当我对资源进行硬编码时,它工作正常..

这是我的剧本

function init() {

            scheduler.locale.labels.timeline_tab = "Timeline";
            scheduler.locale.labels.section_custom = "Section";
            scheduler.config.details_on_create = true;
            scheduler.config.details_on_dblclick = true;
            scheduler.config.xml_date = "%Y-%m-%d %H:%i";

            //===============
            //Configuration
            //===============
            var sections = [
                {key:1, label:"James Smith"},
                {key:2, label:"John Williams"},
                {key:3, label:"David Miller"},
                {key:4, label:"Linda Brown"}
            ];

            var durations = {
                day: 24 * 60 * 60 * 1000,
                hour: 60 * 60 * 1000,
                minute: 60 * 1000
            };

            var get_formatted_duration = function(start, end) {
                var diff = end - start;

                var days = Math.floor(diff / durations.day);
                diff -= days * durations.day;
                var hours = Math.floor(diff / durations.hour);
                diff -= hours * durations.hour;
                var minutes = Math.floor(diff / durations.minute);

                var results = [];
                if (days) results.push(days + " days");
                if (hours) results.push(hours + " hours");
                if (minutes) results.push(minutes + " minutes");
                return results.join(", ");
            };


            var resize_date_format = scheduler.date.date_to_str(scheduler.config.hour_date);

            scheduler.templates.event_bar_text = function(start, end, event) {
                var state = scheduler.getState();
                if (state.drag_id == event.id) {
                    return resize_date_format(start) + " - " + resize_date_format(end) + " (" + get_formatted_duration(start, end) + ")";
                }
                return event.text; // default
            };

            scheduler.createTimelineView({
                name:   "timeline",
                x_unit: "minute",
                x_date: "%H:%i",
                x_step: 30,
                x_size: 48,
                x_start: 0,
                x_length:   48,
                y_unit: sections,
                y_property: "section_id",
                render:"bar",
                event_dy: "full"
            });


            //===============
            //Data loading
            //===============
            scheduler.config.lightbox.sections = [
                {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
                {name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
                {name:"time", height:72, type:"time", map_to:"auto"}
            ];

            scheduler.init('scheduler_here', new Date(2009, 5, 30), "timeline");
            scheduler.parse([
                { start_date: "2009-06-30 09:00", end_date: "2009-06-30 12:00", text:"Task A-12458", section_id:1},


                { start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Task B-48865", section_id:2},
                { start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"Task B-44864", section_id:2},

                { start_date: "2009-06-30 08:00", end_date: "2009-06-30 12:00", text:"Task C-32421", section_id:3},
                { start_date: "2009-06-30 14:30", end_date: "2009-06-30 16:45", text:"Task C-14244", section_id:3},

                { start_date: "2009-06-30 12:00", end_date: "2009-06-30 18:00", text:"Task D-12458", section_id:4}
            ], "json");
        }

以上是可以正常工作的脚本..当我对资源进行硬编码时..

但是当我像var sections = 'resources-feed.php'那样给它时,调度程序不起作用..

resources-feed.php的输出如下:

[{key:1, label:"James Smith"},{key:2, label:"John Williams"},{key:3, label:"David Miller"}]

以下是resources-feed.php

 try {
        $db_host = 'localhost';  //  hostname
        $db_name = 'scheduler';  //  databasename
        $db_user = 'root';  //  username
        $user_pw = '';  //  password
        // Establish new connection with database
        $connection = new PDO('mysql:host='.$db_host.'; dbname='.$db_name, $db_user, $user_pw);

        // Prepare and Execute query
        $query = "SELECT * FROM rooms";
        $sth = $connection->prepare($query);
        $sth->execute();

        // Returning array
        $return_array = array();
        // Event array
        $event_array;

        // Get the result
        while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
            // Create a new array for the event
            $event_array = array();
            // Add data from database to the event array
            $event_array['key'] = $row["ResourceDescription"];
            $event_array['label'] = $row["ResourceName"];

            // Merge the event array into the return array
            array_push($return_array, $event_array);
        }
        // Output the json feed as we need it to render the calendar
        echo json_encode($return_array);

    } catch (PDOException $e){
        // Output PDO error message
        echo $e->getMessage();
    }

任何人,请帮助我......提前谢谢..

2 个答案:

答案 0 :(得分:1)

实际上它非常简单。 Dhtmlx附带一个数据处理器,用于轻松地从数据库加载和保存数据。

您需要做的就是添加数据处理器的Javascript文件及其依赖项。并在初始化调度程序后初始化它。

请参阅此处的步骤6-9以获取示例。http://docs.dhtmlx.com/scheduler/how_to_start.html

希望这是你想要的。

答案 1 :(得分:1)

您可以使用dhtmlxAjax(内置在调度程序核心中)通过AJAX加载资源。 所以,你可以定义:

scheduler.createTimelineView({              
  y_unit: scheduler.serverList("sections"),
  ...
});

然后:

dhtmlxAjax.get("resources-feed.php", function(resp){
    var sections = JSON.parse(resp.xmlDoc.responseText);
    scheduler.updateCollection("sections", sections);
});