Question

背景

从2016年1月开始学习本教程，（https://dhtmlx.com/blog/using-dhtmlxgantt-with-laravel/）我开始尝试DHTMLXGantt（v4.1）和Laravel（v5.4）并遇到一些麻烦，从mysql / mariadb数据库获取样本数据显示在甘特图中。最初的麻烦与DHTMLX连接器有关，而不是与Laravel的一些变化保持同步。为了其他人可能会阅读并解决同样的问题，我已经解决的两个基本问题是：

（1）我被提到这个[更新]连接器，它与Laravel的最新版本（https://github.com/mperednya/connector-php/tree/modern）兼容。和，

（2）我指定的日期范围与样本数据的日期（从2013年）相匹配，例如......

gantt.config.start_date = new Date(2013, 04, 01);
gantt.config.end_date = new Date(2013, 04, 30);

此时我能够成功使用Laravel作为DHTMLXGantt图表的后端服务器（包括带有示例数据的读写）。

问题

我现在遇到的问题是试图从简单化的样本转向稍微复杂的样本。具体来说，当我使用Laravel的扩展模板时，我会在屏幕上绘制甘特图，但图表中不会显示任何项目/任务数据。

为了更具体地解释这一点，包含整个页面的简单Laravel视图按预期工作。例如，此刀片文件（gantt.blade.php）可以正常工作。

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="codebase/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="codebase/dhtmlxgantt.css">
    <link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>

<body>
<div class="container">
    <h1>Placeholder Header</h1>
    <div id="gantt_here" style='width:100%; height:500px;'></div>
    <script type="text/javascript">

        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
        gantt.config.step = 1;
        gantt.config.scale_unit= "week";
        gantt.config.autosize = "xy";
        gantt.config.fit_tasks = true;

        gantt.config.columns = [
            {name:"text",       label:"Task name",  width:"*", tree:true },
            {name:"start_date", label:"Start time", align: "center" },
            {name:"duration",   label:"Duration",   align: "center" },
            {name:"add",        label:"",           width:44 }
        ];

        gantt.init("gantt_here");
        gantt.load("./gantt_data", "xml");
        var dp = new gantt.dataProcessor("./gantt_data");
        dp.init(gantt);
    </script>
    <h1>Placeholder Footer</h1>
</div>
</body>

但是，如果我尝试使用扩展的应用程序布局，意图构建标准外观＆amp;感觉在所有页面上，甘特图出现并按照我的预期形成，但甘特图中没有数据。这是顶级布局文件（app.blade.php）

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="codebase/dhtmlxgantt.css">
    <link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
    <script src="codebase/dhtmlxgantt.js"></script>
</head>
<body>

<div id="app">
    <!-- menus and other bootstrap styling removed for brevity -->
    @yield('content')
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

这是＆＃34;内容＆＃34; view（index.blade.php）...

@extends('layouts.app')
@section('content')

<div id="gantt_here" style='width:100%; height:500px;'></div>
    <script type="text/javascript">
        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
        gantt.config.step = 1;
        gantt.config.scale_unit= "week";
        gantt.config.autosize = "xy";
        gantt.config.fit_tasks = true;

        gantt.config.columns = [
            {name:"text",       label:"Task name",  width:"*", tree:true },
            {name:"start_date", label:"Start time", align: "center" },
            {name:"duration",   label:"Duration",   align: "center" },
            {name:"add",        label:"",           width:44 }
            ];

        gantt.init("gantt_here");
        gantt.load("./gantt_data", "xml");
        var dp = new gantt.dataProcessor("./gantt_data");
        dp.init(gantt);
    </script>
</div>
@endsection

我尝试过的其他事情：

使用Chrome开发人员工具，我可以看到两个示例中的xml数据都已正确传递到浏览器。这让我觉得这可能是某种时间问题。所以我在页面上放了一些链接，只是为了测试清理图表并重新加载它。但仍然没有变化。

<a onclick="gantt.clearAll()" href="javascript:void(0);">Clear</a>
<a onclick="gantt.load('./gantt_data', 'xml')" href="javascript:void(0);">Refresh</a>

我也试过移动div块＆＃34; gantt_here＆＃34;到Laravel模板指令上下的各种其他地方。它在所有情况下都失败了，除非这个div块在＆＃34; app＆＃34;之外（在上面或下面）。 div标签在＆＃34; app.blade.php＆＃34;当然，这无法实现我想要实现的目标。

我的目标是在Laravel的扩展模板功能中使用此图表。但我无法弄清楚错误是什么。有什么想法吗？

Answer 1

经过进一步的故障排除后，我发现了这个问题。事实证明，在app.blade.php中，我正在加载body标签底部的app.js.当我将其移动到HTML标题区域时，数据开始正常显示。

DHTMLXGantt和Laravel - 数据不会显示在扩展模板

1 个答案: