DHTMLXGantt和Laravel - 數據不擴展模板顯示

背景DHTMLXGantt和Laravel - 數據不擴展模板顯示

在從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>

但是，如果我嘗試使用擴展的應用程序佈局建設了意向標準看&所有網頁上的感覺，甘特圖顯示，當我想到的是格式化的，但甘特圖中沒有數據顯示。這裏是頂級配置文件（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>

而這裏的「內容」視圖（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塊「gantt_here」移動到Laravel模板指令上下的各個其他位置。它在所有情況下都會失敗，除非這個div塊在「app.blade.php」中的「app」div標籤之外（高於或低於），這當然會破壞我試圖達到的目的。

我的目標是在Laravel的擴展模板功能中使用此圖表。但我無法弄清楚什麼是錯的。有任何想法嗎？

來源

2017-06-04 GPJ

我只是努力設置和測試。除了按照指示使用新的軟件包（沒有這個失敗），其他一切都按照本教程正常工作。即使使用partials和佈局也沒問題。我使用了教程中提供的示例項目存檔中的JavaScript文件。 – Sandeesh

經過進一步的故障排除後，我發現了這個問題。事實證明，在app.blade.php中，我正在加載app.js在body標籤的底部。當我將其移至HTML標題區時，數據開始正確顯示。

來源

2017-06-05 23:15:48 GPJ

DHTMLXGantt和Laravel - 數據不擴展模板顯示

回答

相關問題