甘特图控件DHTMLX Gantt教程：dhtmlxGantt 与PHP: Laravel（下）

柔光的暖阳◎ 2023-10-10 20:39 56阅读 0赞

[DHTMLX Gantt][]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。

[DHTMLX][] JavaScript UI 库所开发的 JavaScript 组件易于使用且功能丰富，非常适合任何领域和任何复杂性的解决方案，能够节省创建和维护业务应用程序的时间，提高生产力。

[DHTMLX Gantt 最新下载（qun：764148812）![icon-default.png?t=N4HB][icon-default.png_t_N4HB]https://www.evget.com/product/4213/download][DHTMLX Gantt _qun_764148812_icon-default.png_t_N4HB_icon-default.png_t_N4HB_https_www.evget.com_product_4213_download]

**存储任务的顺序**

客户端甘特图允许使用拖放对任务进行重新排序。因此，如果您使用此功能，则必须将此订单存储在数据库中。 您可以在此处查看常见说明。

现在让我们将此功能添加到我们的应用程序中。

**在客户端上启用任务重新排序**

首先，我们需要允许用户在 UI 中更改任务顺序。打开*索引*视图并更新甘特图的配置：

>     gantt.config.order_branch = true;
>     gantt.config.order_branch_free = true;
>     
>     gantt.init("gantt_here");

**在服务器上启用任务重新排序**

现在，让我们在后端反映这些更改。我们将订单存储在名为“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攻击。重要的是，确保应用程序安全的责任在于实现后端的开发人员。阅读相应文章中的详细信息。

**故障排除**

如果您已完成上述步骤以实现甘特图与 PHP 的集成，但甘特图不会在页面上呈现任务和链接，请查看排查后端集成问题一文。它描述了 找出问题根源的方法。

**下一步是什么**

现在你有一个功能齐全的甘特图。您可以在 GitHub 上查看完整代码，克隆或下载它并将其用于您的项目。

您还可以查看有关甘特图众多功能的指南或有关将甘特图与其他后端框架集成的教程。

[DHTMLX Gantt][DHTMLX Gantt _qun_764148812_icon-default.png_t_N4HB_icon-default.png_t_N4HB_https_www.evget.com_product_4213_download]享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足**[项目管理控件][DHTMLX Gantt _qun_764148812_icon-default.png_t_N4HB_icon-default.png_t_N4HB_https_www.evget.com_product_4213_download]**应用的所有需求，是较为完善的甘特图图表库。

[DHTMLX Gantt]: https://www.evget.com/product/4213/license
[DHTMLX]: https://www.evget.com/vendor/520
[icon-default.png_t_N4HB]: https://csdnimg.cn/release/blog_editor_html/release2.2.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N4HB
[DHTMLX Gantt _qun_764148812_icon-default.png_t_N4HB_icon-default.png_t_N4HB_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download