甘特图控件DHTMLX Gantt教程:dhtmlxGantt 与PHP: Laravel(下)

这篇具有很好参考价值的文章主要介绍了甘特图控件DHTMLX Gantt教程:dhtmlxGantt 与PHP: Laravel(下)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

DHTMLX Gantt 最新下载(qun:764148812)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享有超十年声誉,支持跨浏览器和跨平台,性价比高,可满足项目管理控件应用的所有需求,是较为完善的甘特图图表库。文章来源地址https://www.toymoban.com/news/detail-456088.html

到了这里,关于甘特图控件DHTMLX Gantt教程:dhtmlxGantt 与PHP: Laravel(下)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观

    dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 本文将为大家揭示DHTMLX Gantt自定义的典型用例,包括自定义任务、网格的新外观等,来展示其功能的强大性! DHTMLX Gantt正式版下载 用例 - 新建

    2024年02月08日
    浏览(27)
  • 甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图

    创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求,这就是为什么我们会在这个系列中继续探索DHTMLX Gantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景,DHTMLX Gantt组件如何创建一个项目路线图。 DHTMLX Gantt正式版下载 用例 - 带有自定义时间尺

    2024年02月05日
    浏览(32)
  • 甘特图工具DHTMLX Gantt 8.0抢先看, 改进的资源管理、更新的自动计划等功能,一起查阅吧

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

    2023年04月08日
    浏览(43)
  • DHTMLX JavaScript Gantt Chart 8.0.5 Crack

    8.0.5 September 1, 2023. Bugfix release Fixes Fix incorrect warnings triggered by enabling extensions via the gantt.getGanttInstance configuration Fix the incorrect work of gantt.exportToExcel() when the skip_off_time config is enabled Improvements for the Samples Viewer Comprehensive JavaScript HTML5 Gantt Chart DHTMLX Gantt is the most complete Gantt chart

    2024年02月07日
    浏览(32)
  • 「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图(二)

    DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 在web项目中使用DHTMLX Gantt时,开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力,因此本文仅

    2024年01月21日
    浏览(38)
  • MATLAB | 如何使用MATLAB绘制甘特图(gantt chart)

    好久不见哈,今天带来一个不咋炫酷但是比较实用的甘特图绘制,就画一堆矩形嘛非常简单。 之所以这期工具函数放在最前面是因为比较短哈: 基本使用 设置任务开始时间,结束时间及任务编号后,调用工具函数绘图即可: 不咋好看的圆角 设置 Curvature 为0-1之间的数值即可

    2024年02月09日
    浏览(30)
  • 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能

    在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 实现效果: 2.1 下载element ui 因为我是在vue3中,所以下载element-plus 执行 npm i element-plus --save main.js 里引入element ui 2.2. 创建Gantt.vue组件 这样就可以实现一个简单的功能了。

    2024年02月12日
    浏览(28)
  • vue2实现可拖拽甘特图(结合element-ui的gantt图)

      接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽  拖拽功能是甘特图的主要功

    2024年02月03日
    浏览(40)
  • 【PHP系统学习】——Laravel框架数据库的连接以及数据库的增删改查的详细教程

    👨‍💻个人主页 :@开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏 :PHP程序开发 —   按照 MVC 的架构,对数据的操作应该放在 Model 中完成,但如果不使用 Model,我们也可以用 laravel框架提供的 D8 类

    2024年04月15日
    浏览(36)
  • PHP实践:Laravel中事件使用讲解

    🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于PHP专栏:PHP面试专区,PHP进阶实战教程。。 🎉欢迎 👍点

    2024年02月22日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包