DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的大部分開發(fā)需求，具備完善的甘特圖圖表庫，功能強大，價格便宜，提供豐富而靈活的JavaScript API接口，與各種服務器端技術（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發(fā)需求。

DHTMLX JavaScript UI 庫所開發(fā)的 JavaScript 組件易于使用且功能豐富，非常適合任何領域和任何復雜性的解決方案，能夠節(jié)省創(chuàng)建和維護業(yè)務應用程序的時間，提高生產力。

DHTMLX Gantt 最新下載

甘特圖控件交流群：764148812

存儲任務的順序

客戶端甘特圖允許使用拖放對任務進行重新排序。因此，如果您使用此功能，則必須將此訂單存儲在數(shù)據(jù)庫中。 您可以在此處查看常見說明。

現(xiàn)在讓我們將此功能添加到我們的應用程序中。

在客戶端上啟用任務重新排序

首先，我們需要允許用戶在 UI 中更改任務順序。打開索引視圖并更新甘特圖的配置：

gantt.config.order_branch = true;
gantt.config.order_branch_free = true;

gantt.init("gantt_here");

在服務器上啟用任務重新排序

現(xiàn)在，讓我們在后端反映這些更改。我們將訂單存儲在名為“sortorder”的列中。完整的任務架構可能如下所示：

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->integer('sortorder')->default(0);
$table->timestamps();
});

或者，可以將遷移添加到我們之前生成的架構：

php artisan make:migration add_sortorder_to_tasks_table --table=tasks

遷移文件的代碼為：

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AddSortorderToTasksTable extends Migration
{
public function up()
{
Schema::table('tasks', function (Blueprint $table) {
$table->integer('sortorder')->default(0);
});
}

public function down()
{
Schema::table('tasks', function (Blueprint $table) {
$table->dropColumn('sortorder');
});
}
}

并應用遷移：

php artisan migrate

之后，我們需要更新控制器中定義的 CRUD。

1 .GET /data 必須返回按列排序的任務：sortorder

<?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->orderBy('sortorder')->get(),
"links" => $links->all()
]);
}
}

2 .新添加的任務必須接收初始值：sortorder

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->sortorder = Task::max("sortorder") + 1;

$task->save();

return response()->json([
"action"=> "inserted",
"tid" => $task->id
]);
}

3 升最后，當用戶對任務重新排序時，必須更新任務訂單：

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();

if($request->has("target")){
$this->updateOrder($id, $request->target);
}

return response()->json([
"action"=> "updated"
]);
}

private function updateOrder($taskId, $target){
$nextTask = false;
$targetId = $target;

if(strpos($target, "next:") === 0){
$targetId = substr($target, strlen("next:"));
$nextTask = true;
}

if($targetId == "null")
return;

$targetOrder = Task::find($targetId)->sortorder;
if($nextTask)
$targetOrder++;

Task::where("sortorder", ">=", $targetOrder)->increment("sortorder");

$updatedTask = Task::find($taskId);
$updatedTask->sortorder = $targetOrder;
$updatedTask->save();
}

應用程序安全性

甘特圖不提供任何方法來防止應用程序受到各種威脅，例如SQL注入或XSS和CSRF攻擊。重要的是，確保應用程序安全的責任在于實現(xiàn)后端的開發(fā)人員。閱讀相應文章中的詳細信息。

故障排除

如果您已完成上述步驟以實現(xiàn)甘特圖與 PHP 的集成，但甘特圖不會在頁面上呈現(xiàn)任務和鏈接，請查看排查后端集成問題一文。它描述了 找出問題根源的方法。

下一步是什么

現(xiàn)在你有一個功能齊全的甘特圖。您可以在 GitHub 上查看完整代碼，克隆或下載它并將其用于您的項目。

您還可以查看有關甘特圖眾多功能的指南或有關將甘特圖與其他后端框架集成的教程。

DHTMLX Gantt享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是較為完善的甘特圖圖表庫。

甘特圖控件交流群：764148812

歡迎進群交流討論，獲取更多幫助請聯(lián)系