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

news2025/1/15 7:39:53

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

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

DHTMLX Gantt 最新下载(qun:764148812)icon-default.png?t=N4HBhttps://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享有超十年声誉,支持跨浏览器和跨平台,性价比高,可满足项目管理控件应用的所有需求,是较为完善的甘特图图表库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/557777.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实在智能魅力抢眼!携超自动化解决方案和校企合作新范式点燃第七届世界智能大会

为深入实施创新驱动发展战略&#xff0c;推动智能科技赋能经济社会发展&#xff0c;促进校企双方交换需求清单&#xff0c;全方位搭建校企握手通道&#xff0c;5月18日&#xff0c;由国家发展和改革委员会、科学技术部、国家广播电视总局、中国科学院等联合主办的第七届世界智能…

通过九点选择CRM系统

众所周知&#xff0c;CRM系统对于企业的发展至关重要。它可以帮助企业增强市场竞争力&#xff0c;拓展新的市场机会&#xff0c;提升品牌形象和口碑&#xff0c;提高客户满意度和忠诚度&#xff0c;实现业绩的大幅增长。那么选型时&#xff0c;CRM系统哪家好&#xff1f;看准这…

企业如何利用方舟低代码平台快速构建营销系统?

前言 国家在十四五规划中明确将“加快发展现代产业体系、推动经济体系优化”作为数字化转型的重要指导方针 &#xff0c;数字化转型已经成为企业的主要工作&#xff0c;在传统的方式下先采购产品后进行定制改造的模式已经很难适应快速多变的市场&#xff0c;为了应对市场或自主…

广告商业该如何突破重围

广告商业也算是 我们日常生活中不可 缺少的商业渠道 但是广告商业太广了 很多小伙伴是无从下手的 今天智龙就简单的和你们 分享一下广告商业的 一些心得。 首先从用户类型开始入手 今天我们先讲网络用户群体 从图中可以看出 其实网络购物用户 群体是非常庞大的 意味着如果广告 …

chatgpt赋能Python-python_for_line

Python for Line: A Powerful Tool for Streamlining Your Business Communication In today’s fast-paced business world, effective communication is key to success. Whether you’re collaborating with colleagues, sharing information with clients, or dealing wit…

印刷八木天线的仿真与设计

前言 前篇介绍了俄罗斯的网红Wi-Fi天线&#xff0c;其可看作是八木天线。对于八木天线&#xff0c;相信很多业内朋友都不陌生&#xff0c;这类天线长成这个样子。本篇详细介绍八木天线的原理&#xff0c;并设计印刷八木天线。 ​图 1 八木天线 八木天线的工作原理 天线工作原…

「远程开发」VSCode使用SSH远程linux服务器 - 公网远程连接

文章目录 前言视频教程1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 转…

【LeetCode: 面试题 17.24. 最大子矩阵 | 动态规划 】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

多模态方法(更新中)

待coding&#xff1a; moco pcl 文章目录 Semantic Representation for Dialogue ModelingPCL: Peer-Contrastive Learning with Diverse Augmentations for Unsupervised Sentence Embeddings深度网络的公理归因 Axiomatic Attribution for Deep NetworksNLU模型的捷径学习行…

面试可以问面试官哪些问题?这些问题需要弄清楚

在参加面试过程中&#xff0c;面试官通常会给你提供询问的机会&#xff0c;让你了解公司、职位和工作环境。在这个过程中&#xff0c;你可以通过提问来更好地了解公司、职位和工作环境&#xff0c;也能够让面试官感受到你对公司的兴趣和热情。那么都有哪些问题我们是有必要进行…

阿里成立AIDC,用“增长”解题国际化

随着阿里巴巴集团2023财年年报的披露&#xff0c;AIDC也随即浮出了水面。 AIDC是阿里国际数字商业集团的英文简称&#xff0c;AIDC即Alibaba International Digital Commerce。阿里是在5月18日公布的截至2023年3月31日的2023财年Q4及全年财报&#xff0c;财报数据之外&#xff…

Windows 11部署WSL(Windows Subsystem for Linux——适用于Windows的Linux子系统)

文章目录 前言一、Windows 11部署WSL&#xff08;Windows Subsystem for Linux&#xff09;1.打开控制面板→程序→启动或关闭 Windows 功能2.勾选 “适用于 Linux 的 Windows 子系统” 和 “虚拟机平台”3.立即重新启动电脑4.按win键或者点击左下角的windows图标打开微软的应用…

Gitee+Jenkins+SonarQube代码上线的实战操作

代码上线-流程图 添加Nexus流程图 机器的环境 172.168.0.1 jenkins # 建议-机器环境&#xff1a;1C以上&#xff0c;2G以上&#xff0c;40G磁盘以上 172.168.0.2 SonarQube # 建议-机器环境&#xff1a;2C以上&#xff0c;4G以上&#xff0c;40G磁盘以上 172.…

面对数字化新技术的变革风口,企业应如何借由技术创新开拓新局,完成数字化转型和升级?

为使企业有效借力科技创新&#xff0c;实现数字化转型升级&#xff0c;企业可以采取以下几个关键步骤&#xff1a; 评估业务目标&#xff1a;首先明确企业的业务目标并确定技术创新可以帮助企业实现这些目标的领域。了解企业当前的挑战、竞争格局和客户需求&#xff0c;以确定数…

Unity:圆底烧瓶中液体液面升降变化的效果

一、效果展示 二、实现的原理 1、从image的filled模式说起 image的filled模式&#xff0c;适合用来做进度条&#xff1a; 2、能否为一个3D object实现一个image filled 的shader &#xff1f; Shader "Custom/FilledImageEffect" {Properties{_MainTex ("…

Qt编程基础 | 第三章-控件 | 3.1、组合框

一、组合框 1.1、定义 QComboBox提供了一种向用户呈现选项列表的方式&#xff0c;以占用最少的屏幕空间。 组合框是一个显示当前项目的选择小部件&#xff0c;可以弹出可选择项目的列表。 组合框可以是可编辑的&#xff0c;允许用户修改列表中的每个项目。 QComboBox 除了显示…

2023款ECMAScript

2023款ECMAScript 新的数组api findLast 反向迭代数组&#xff0c;并返回满足提供的测试函数的第一个元素的值, 如果没有找到返回undefined const isEven (number) > number % 2 0; const numbers [1, 2, 3, 4]; console.log(numbers.findLast(isEven)); // 4 findLastI…

华为战略方法论:BLM模型之市场洞察-五看工具篇(加餐)

欢迎大家继续来到华为战略方法论系列内容。 今天主要介绍一下市场洞察篇的延伸内容 —— 五看工具篇。 在BLM模型中&#xff0c;战略意图篇提到的愿景和目标能否实现&#xff0c;以及怎么实现呢&#xff1f; 要回答这个问题&#xff0c;你就需要从市场上去寻找依据。 企业需…

央国企数字化转型难在哪?为什么要数字化转型?

随着新一轮科技革命和产业变革深入发展&#xff0c;数字化成为央国有企业的必答题。 但就目前情况来看&#xff0c;央国有企业数字化转型还面临着许多挑战&#xff0c;必然是一个长期的过程。 01 央国企数字化转型难在哪&#xff1f; 根据调研数据&#xff0c;中央企业数字化…

linux修改ip地址详解

修改IP地址分为临时修改&#xff08;仍然属于动态分配&#xff09;&#xff0c;和永久修改&#xff08;设置静态ip&#xff09;。临时修改就是使用ifconfig命令直接修改&#xff0c;但是一段时间过后&#xff0c;或者重启又会动态重新分配。而永久修改则是直接将ip写在配置文件…