翻譯|使用教程|編輯:顏馨|2023-05-19 10:58:14.017|閱讀 149 次
概述:本章講述如何將dhtmlx甘特添加到Laravel應用程序中,歡迎查閱~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的大部分開發需求,具備完善的甘特圖圖表庫,功能強大,價格便宜,提供豐富而靈活的JavaScript API接口,與各種服務器端技術(PHP,ASP.NET,Java等)簡單集成,滿足多種定制開發需求。
DHTMLX JavaScript UI 庫所開發的 JavaScript 組件易于使用且功能豐富,非常適合任何領域和任何復雜性的解決方案,能夠節省創建和維護業務應用程序的時間,提高生產力。
甘特圖控件交流群:764148812
本教程介紹如何將dhtmlx甘特添加到Laravel應用程序中。
使用 Composer 創建新應用程序:
composer create-project laravel/laravel gantt-laravel-app
下載和創建所有必要的文件應該需要一分鐘。 完成所有操作后,您可以檢查到目前為止一切是否正確:
cd gantt-laravel-app php artisan serve
在此步驟中,您應該獲得一個默認的Laravel頁面:
首先,我們將添加一個帶有dhtmlxGantt的新頁面到我們的應用程序中。 轉到資源/視圖文件夾并創建一個名為 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>
在這里,我們定義了一個簡單的HTML布局,從CDN添加了dhtmlxGantt的源代碼,并使用init方法初始化了gantt。
請注意,我們還為文檔正文和甘特圖容器指定了 100% 高度。甘特圖將使用其容器的大小,因此需要一些初始大小。
添加新頁面后,我們需要使其可從瀏覽器訪問。在本教程中,我們將甘特圖設為應用的默認頁面。
轉到路由/網絡.php并更改默認路由:
<?php
Route::get('/', function () {
return view('gantt');
});
再次運行應用以確保它能解決問題:
所以,我們有一個空的甘特圖。讓我們將其連接到數據庫并用數據填充它。
請務必更新 .env 中的數據庫配置,例如:
.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gantt-test DB_USERNAME=root DB_PASSWORD=
下一步是創建模型類和遷移。您可以使用 Artisan 命令生成類和遷移文件:
php artisan make:model Task --migration
和
php artisan make:model Link --migration
之后,在文件夾中找到遷移并定義數據庫架構。 您可以在此處找到甘特圖所需的數據庫架構。database/migrations
“任務”表的代碼如下所示:
<?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');
}
}
并運行遷移:
php artisan migrate
當我們使用它時,我們可以為我們的應用生成一些測試數據。 使用 artisan 命令生成播種器類:
php artisan make:seeder TasksTableSeeder php artisan make:seeder LinksTableSeeder
現在,創建數據庫/種子文件夾,打開它并將一些數據添加到 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 調用表播種機.php:
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
$this->call(TasksTableSeeder::class);
$this->call(LinksTableSeeder::class);
}
}
之后,我們可以從命令行為數據庫播種:
php artisan db:seed
數據通過 Eloquent 模型類進行管理。我們已經在上一步中為任務和鏈接生成了類。 它們已準備就緒,無需進行任何更改即可使用甘特圖。
但是,我們可以做的是將 Task 類的開放屬性添加到 JSON 響應中。它將在將任務加載到客戶端時擴展項目樹。 否則,所有分支最初都將關閉:
任務模型將如下所示:
<?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
{
}
創建數據庫并定義模型后,我們可以將數據加載到甘特圖中。 客戶端需要以下格式的日期,因此讓我們創建一個控制器,其中包含生成此類 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()
]);
}
}
并注冊一個路由,以便客戶端可以調用此操作。請注意,我們會將路由添加到 api.php routes 文件中:
<?php
use Illuminate\Http\Request;
use App\Http\Controllers\GanttController;
Route::get('/data', 'GanttController@get');
最后,從視圖中調用此操作:
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 請求發送到指定的 URL,并期望我們之前定義的 JSON 響應。
另請注意,我們已指定date_format值。 這就是我們如何告訴甘特圖數據源將使用哪種日期格式,以便客戶端可以解析它們。
如果您現在檢查應用程序,您應該會看到我們的甘特圖中現在有任務:
目前,我們的甘特圖可以從后端讀取數據。讓我們讓它將更改寫回數據庫。
客戶端將在 REST 模式下工作,這意味著它將發送任務和鏈接操作的 POST/PUT/DELETE 請求。 您可以在此處找到請求的格式以及甘特圖將使用的所有路由。
我們現在需要的是定義在兩個模型上處理操作的控制器,為它們創建路由并在客戶端啟用數據保存。
讓我們從控制器開始。我們將為每個模型創建一個 RESTful 資源控制器。 它將包含用于添加/刪除和更新模型的方法。
任務控制器
<?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"
]);
}
}
還有一條路線:
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
關于此代碼的一些說明:
現在讓我們為 LinkController 實現相同的方法。
鏈路控制器
<?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"
]);
}
}
及其路線:
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
Route::resource('link', 'LinkController');
最后,我們將配置客戶端以使用我們剛剛實現的 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");
現在,您有一個完全交互式的甘特圖,能夠查看,添加,更新和刪除任務和鏈接。
請查看我們的更多指南,了解 dhtmlx甘特的更多功能。
DHTMLX Gantt享有超十年聲譽,支持跨瀏覽器和跨平臺,性價比高,可滿足項目管理控件應用的所有需求,是較為完善的甘特圖圖表庫
甘特圖控件交流群:764148812
歡迎進群交流討論,獲取更多幫助請聯系
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn