DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿(mǎn)足項(xiàng)目管理應(yīng)用程序的大部分開(kāi)發(fā)需求，具備完善的甘特圖圖表庫(kù)，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡(jiǎn)單集成，滿(mǎn)足多種定制開(kāi)發(fā)需求。
DHTMLX JavaScript UI 庫(kù)所開(kāi)發(fā)的 JavaScript 組件易于使用且功能豐富，非常適合任何領(lǐng)域和任何復(fù)雜性的解決方案，能夠節(jié)省創(chuàng)建和維護(hù)業(yè)務(wù)應(yīng)用程序的時(shí)間，提高生產(chǎn)力。
DHTMLX Gantt 最新下載
甘特圖控件交流群：764148812
本教程介紹如何將dhtmlx甘特添加到Laravel應(yīng)用程序中。
第 1 步：初始化項(xiàng)目
創(chuàng)建項(xiàng)目
使用 Composer 創(chuàng)建新應(yīng)用程序：
composer create-project laravel/laravel gantt-laravel-app
下載和創(chuàng)建所有必要的文件應(yīng)該需要一分鐘。 完成所有操作后，您可以檢查到目前為止一切是否正確：
cd gantt-laravel-app
php artisan serve
在此步驟中，您應(yīng)該獲得一個(gè)默認(rèn)的Laravel頁(yè)面：
第 2 步：將甘特圖添加到頁(yè)面
添加視圖
首先，我們將添加一個(gè)帶有dhtmlxGantt的新頁(yè)面到我們的應(yīng)用程序中。 轉(zhuǎn)到資源/視圖文件夾并創(chuàng)建一個(gè)名為 gantt.blade.php 的新視圖：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link rel="stylesheet">
<style type="text/css">
html, body{
height:100%;
padding:0px;
margin:0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
</script>
</body>
在這里，我們定義了一個(gè)簡(jiǎn)單的HTML布局，從CDN添加了dhtmlxGantt的源代碼，并使用init方法初始化了gantt。
請(qǐng)注意，我們還為文檔正文和甘特圖容器指定了 100% 高度。甘特圖將使用其容器的大小，因此需要一些初始大小。
更改默認(rèn)路由
添加新頁(yè)面后，我們需要使其可從瀏覽器訪(fǎng)問(wèn)。在本教程中，我們將甘特圖設(shè)為應(yīng)用的默認(rèn)頁(yè)面。
轉(zhuǎn)到路由/網(wǎng)絡(luò).php并更改默認(rèn)路由：
<?php
Route::get('/', function () {
return view('gantt');
});
再次運(yùn)行應(yīng)用以確保它能解決問(wèn)題：
第 3 步：創(chuàng)建模型和遷移
所以，我們有一個(gè)空的甘特圖。讓我們將其連接到數(shù)據(jù)庫(kù)并用數(shù)據(jù)填充它。
創(chuàng)建數(shù)據(jù)庫(kù)
請(qǐng)務(wù)必更新 .env 中的數(shù)據(jù)庫(kù)配置，例如：
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=gantt-test
DB_USERNAME=root
DB_PASSWORD=
下一步是創(chuàng)建模型類(lèi)和遷移。您可以使用 Artisan 命令生成類(lèi)和遷移文件：
php artisan make:model Task --migration
和
php artisan make:model Link --migration
之后，在文件夾中找到遷移并定義數(shù)據(jù)庫(kù)架構(gòu)。 您可以在此處找到甘特圖所需的數(shù)據(jù)庫(kù)架構(gòu)。database/migrations
“任務(wù)”表的代碼如下所示：
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTasksTable extends Migration
{
public function up()
{
Schema::create('tasks', function (Blueprint $table){
$table->increments('id');
$table->string('text');
$table->integer('duration');
$table->float('progress');
$table->dateTime('start_date');
$table->integer('parent');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('tasks');
}
}
您將在下面找到鏈接表的代碼：
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateLinksTable extends Migration
{
public function up()
{
Schema::create('links', function (Blueprint $table) {
$table->increments('id');
$table->string('type');
$table->integer('source');
$table->integer('target');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('links');
}
}
并運(yùn)行遷移：
php artisan migrate
當(dāng)我們使用它時(shí)，我們可以為我們的應(yīng)用生成一些測(cè)試數(shù)據(jù)。 使用 artisan 命令生成播種器類(lèi)：
php artisan make:seeder TasksTableSeeder
php artisan make:seeder LinksTableSeeder
現(xiàn)在，創(chuàng)建數(shù)據(jù)庫(kù)/種子文件夾，打開(kāi)它并將一些數(shù)據(jù)添加到 TasksTableSeeder：
<?php
use Illuminate\Database\Seeder;
class TasksTableSeeder extends Seeder
{
public function run()
{
DB::table('tasks')->insert([
['id'=>1, 'text'=>'Project #1', 'start_date'=>'2017-04-01 00:00:00',
'duration'=>5, 'progress'=>0.8, 'parent'=>0],
['id'=>2, 'text'=>'Task #1', 'start_date'=>'2017-04-06 00:00:00',
'duration'=>4, 'progress'=>0.5, 'parent'=>1],
['id'=>3, 'text'=>'Task #2', 'start_date'=>'2017-04-05 00:00:00',
'duration'=>6, 'progress'=>0.7, 'parent'=>1],
['id'=>4, 'text'=>'Task #3', 'start_date'=>'2017-04-07 00:00:00',
'duration'=>2, 'progress'=>0, 'parent'=>1],
['id'=>5, 'text'=>'Task #1.1', 'start_date'=>'2017-04-05 00:00:00',
'duration'=>5, 'progress'=>0.34, 'parent'=>2],
['id'=>6, 'text'=>'Task #1.2', 'start_date'=>'2017-04-11 00:00:00',
'duration'=>4, 'progress'=>0.5, 'parent'=>2],
['id'=>7, 'text'=>'Task #2.1', 'start_date'=>'2017-04-07 00:00:00',
'duration'=>5, 'progress'=>0.2, 'parent'=>3],
['id'=>8, 'text'=>'Task #2.2', 'start_date'=>'2017-04-06 00:00:00',
'duration'=>4, 'progress'=>0.9, 'parent'=>3]
]);
}
}
并從 DatabaseSeeder 調(diào)用表播種機(jī).php：
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
$this->call(TasksTableSeeder::class);
$this->call(LinksTableSeeder::class);
}
}
之后，我們可以從命令行為數(shù)據(jù)庫(kù)播種：
php artisan db:seed
定義模型類(lèi)
數(shù)據(jù)通過(guò) Eloquent 模型類(lèi)進(jìn)行管理。我們已經(jīng)在上一步中為任務(wù)和鏈接生成了類(lèi)。 它們已準(zhǔn)備就緒，無(wú)需進(jìn)行任何更改即可使用甘特圖。
但是，我們可以做的是將 Task 類(lèi)的開(kāi)放屬性添加到 JSON 響應(yīng)中。它將在將任務(wù)加載到客戶(hù)端時(shí)擴(kuò)展項(xiàng)目樹(shù)。 否則，所有分支最初都將關(guān)閉：
任務(wù)模型將如下所示：
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
protected $appends = ["open"];
public function getOpenAttribute(){
return true;
}
}
鏈接模型不需要任何更改：
/app/Link.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Link extends Model
{
}
第 4 步：加載數(shù)據(jù)
創(chuàng)建數(shù)據(jù)庫(kù)并定義模型后，我們可以將數(shù)據(jù)加載到甘特圖中。 客戶(hù)端需要以下格式的日期，因此讓我們創(chuàng)建一個(gè)控制器，其中包含生成此類(lèi) JSON 的操作：
<?php
namespace App\Http\Controllers;
use App\Task;
use App\Link;
class GanttController extends Controller
{
public function get(){
$tasks = new Task();
$links = new Link();
return response()->json([
"data" => $tasks->all(),
"links" => $links->all()
]);
}
}
并注冊(cè)一個(gè)路由，以便客戶(hù)端可以調(diào)用此操作。請(qǐng)注意，我們會(huì)將路由添加到 api.php routes 文件中：
<?php
use Illuminate\Http\Request;
use App\Http\Controllers\GanttController;
Route::get('/data', 'GanttController@get');
最后，從視圖中調(diào)用此操作：
resources/views/gantt.blade.php
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.init("gantt_here");
gantt.load("/api/data");
gantt.load 將 AJAX 請(qǐng)求發(fā)送到指定的 URL，并期望我們之前定義的 JSON 響應(yīng)。
另請(qǐng)注意，我們已指定date_format值。 這就是我們?nèi)绾胃嬖V甘特圖數(shù)據(jù)源將使用哪種日期格式，以便客戶(hù)端可以解析它們。
如果您現(xiàn)在檢查應(yīng)用程序，您應(yīng)該會(huì)看到我們的甘特圖中現(xiàn)在有任務(wù)：
第5步：保存更改
目前，我們的甘特圖可以從后端讀取數(shù)據(jù)。讓我們讓它將更改寫(xiě)回?cái)?shù)據(jù)庫(kù)。
客戶(hù)端將在 REST 模式下工作，這意味著它將發(fā)送任務(wù)和鏈接操作的 POST/PUT/DELETE 請(qǐng)求。 您可以在此處找到請(qǐng)求的格式以及甘特圖將使用的所有路由。
我們現(xiàn)在需要的是定義在兩個(gè)模型上處理操作的控制器，為它們創(chuàng)建路由并在客戶(hù)端啟用數(shù)據(jù)保存。
添加控制器
讓我們從控制器開(kāi)始。我們將為每個(gè)模型創(chuàng)建一個(gè) RESTful 資源控制器。 它將包含用于添加/刪除和更新模型的方法。
任務(wù)控制器
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TaskController extends Controller
{
public function store(Request $request){
$task = new Task();
$task->text = $request->text;
$task->start_date = $request->start_date;
$task->duration = $request->duration;
$task->progress = $request->has("progress") ? $request->progress : 0;
$task->parent = $request->parent;
$task->save();
return response()->json([
"action"=> "inserted",
"tid" => $task->id
]);
}
public function update($id, Request $request){
$task = Task::find($id);
$task->text = $request->text;
$task->start_date = $request->start_date;
$task->duration = $request->duration;
$task->progress = $request->has("progress") ? $request->progress : 0;
$task->parent = $request->parent;
$task->save();
return response()->json([
"action"=> "updated"
]);
}
public function destroy($id){
$task = Task::find($id);
$task->delete();
return response()->json([
"action"=> "deleted"
]);
}
}
還有一條路線(xiàn)：
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
關(guān)于此代碼的一些說(shuō)明：
-
當(dāng)插入一個(gè)新任務(wù)時(shí)，我們?cè)陧憫?yīng)對(duì)象的 tid 屬性中將其 id 返回給客戶(hù)端
-
我們?yōu)檫M(jìn)度參數(shù)分配默認(rèn)值。 許多請(qǐng)求參數(shù)是可選的，這意味著如果客戶(hù)端任務(wù)未分配它們，則不會(huì)將它們發(fā)送到服務(wù)器操作。
-
響應(yīng) JSON 可以具有任意數(shù)量的附加屬性，它們都可以從客戶(hù)端處理程序訪(fǎng)問(wèn)
現(xiàn)在讓我們?yōu)?LinkController 實(shí)現(xiàn)相同的方法。
鏈路控制器
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Link;
class LinkController extends Controller
{
public function store(Request $request){
$link = new Link();
$link->type = $request->type;
$link->source = $request->source;
$link->target = $request->target;
$link->save();
return response()->json([
"action"=> "inserted",
"tid" => $link->id
]);
}
public function update($id, Request $request){
$link = Link::find($id);
$link->type = $request->type;
$link->source = $request->source;
$link->target = $request->target;
$link->save();
return response()->json([
"action"=> "updated"
]);
}
public function destroy($id){
$link = Link::find($id);
$link->delete();
return response()->json([
"action"=> "deleted"
]);
}
}
及其路線(xiàn)：
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
Route::resource('link', 'LinkController');
在客戶(hù)端啟用數(shù)據(jù)保存
最后，我們將配置客戶(hù)端以使用我們剛剛實(shí)現(xiàn)的 API：
resources/views/gantt.blade.php
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.init("gantt_here");
gantt.load("/api/data");
var dp = new gantt.dataProcessor("/api");
dp.init(gantt);
dp.setTransactionMode("REST");
現(xiàn)在，您有一個(gè)完全交互式的甘特圖，能夠查看，添加，更新和刪除任務(wù)和鏈接。
請(qǐng)查看我們的更多指南，了解 dhtmlx甘特的更多功能。
DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性?xún)r(jià)比高，可滿(mǎn)足項(xiàng)目管理控件應(yīng)用的所有需求，是較為完善的甘特圖圖表庫(kù)
甘特圖控件交流群：764148812
歡迎進(jìn)群交流討論，獲取更多幫助請(qǐng)聯(lián)系
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
金喜正規(guī)買(mǎi)球 
20次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買(mǎi)球相關(guān)的文章 
微信
在線(xiàn)咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線(xiàn)