PHP頁面構建器，使用php程式碼生成表單表格頁面，thinkphp laraval Yii

PHP頁面構建器，使用php程式碼生成表單表格頁面，快速構建後臺頁面

介紹

郵件 zswemail@qqcom

主頁 zsw.ink 留言

文件 doc.zsw.ink/surface/

github github.com/iszsw/surface

gitee gitee.com/iszsw/surface

效果

Form 元件

Table元件

安裝

$ composer require iszsw/surface

使用

Table 使用

<?php
use surface\Component;
use surface\Factory;
use surface\table\components\Button;
use surface\table\components\Pagination;

// 註冊全域性配置
Factory::configure(['table' => [...]]);

// 獲得Table
$table = Factory::table();

/**
 * 表配置 
 */
$table->options(
 'props', [ 'emptyText' => "求求你別看了，沒有啦",
 // 'data' => [] // 如果不需要非同步請求資料直接放置值到此變數
 ]);

// 兩種元件註冊方式 1、new Xxx()，2、$table->Xxx()

/**
 * 表格頂部樣式
 */$table->header(
 (new Component(['el' => 'div']))->children(
 [ (new Button('el-icon-check', '提交'))->createSubmit(
 ['method' => 'post', 'data' => ['username' => 'hello'], 'url' => 'data.php'], '確認提交選擇的資料',
 'id' ), $table->button('el-icon-plus', '編輯')->createPage('?form=1'),
 (new Button('el-icon-search', '搜尋'))->createPage('?search=1')->props('doneRefresh', false),
 ] ));

/**
 * 表格列配置
 */$table->columns(
 [ // 選擇框（主鍵）
 $table->selection('id'),
 // 將address注入到<span>標籤的內部顯示
 $table->expand('address', '地址')->scopedSlots([$table->component(['el' => 'span', 'inject' => ['children']])]), 

// 以圖片顯示
 $table->column('avatar', '頭像')->scopedSlots(
 [ $table->component(
 [ 'el'     => 'img', 'style'  => ['width' => '50px'], 'inject' => ['attrs' => ['src']], ] ), ] ),
 // 可編輯的文字 非同步修改
 $table->column('phone', '手機')->scopedSlots(
 [ // 非同步操作的data=[key=>val,value],只有value時將獲取當前列的資料提交
 $table->writable()->props(['method' => 'post', 'async' => ['data' => ['id'], 'url' => 'data.php']]),
 ] )->props('width', '150px'),
 // 可編輯的開關樣式 非同步修改
 $table->column('status', '狀態')->scopedSlots(
 [ $table->switcher()->props(['method' => 'post', 'async' => ['data' => ['id'], 'url' => 'data.php',]]),
 ] ), // 可編輯的下拉框樣式 非同步修改
 $table->column('sex', '性別')->scopedSlots(
 [ $table->select()->props(
 [ 'async'   => ['method' => 'post', 'data' => ['id', 'username' => 'hello'], 'url' => 'data.php'], 'options' => [1 => '男', '女', '未知',],
 ] ), ] ), // 行按鈕操作
 $table->column('options', '操作')->props('fixed', 'right')
 ->scopedSlots(
 [ // 開啟一個頁面 （可以配合Form元件進行互動）
 $table->button('el-icon-edit', '編輯')->createPage('?form=1', ['id', 'username' => 'hello']),
 // 確認框按鈕 非同步提交
 $table->button('el-icon-delete', '刪除')
 ->createConfirm('你要刪除我嗎？', ['method' => 'post', 'data' => ['id', 'username' => 'hello'], 'url' => 'data.php',]),
 ] ), ]);

/**
 * 分頁配置 配置table的非同步請求資料 如果無需非同步請求 可以忽略
 */$table->pagination(
 (new Pagination())->props(
 [ 'async' => [ 'url' => 'data.php', // 請求地址
 // 'data' => [], // 請求擴充套件引數
 // ... // axios 其他引數
 ], ] ));

echo $table->view();

Form 使用

<?php
use surface\Factory;

// 註冊全域性配置
Factory::configure(['form' => [...]]);

$form = Factory::form();

/**
 * 表配置
 */$form->options(
 [ 'search'    => true,
 'submitBtn' => [ 'innerText' => '搜尋',
 ], 'async'     => [ 'url' => '/', // 提交地址
 // ... 其他axios配置
 ], 'form'      => [ 'labelWidth' => '100px', ], ]);

/**
 * 列配置
 */$form->columns(
 [ $form->input('username', '使用者名稱'),
 $form->switcher('postage', '包郵', 0),
 $form->date('section_day', '日期')->props(
 [ 'type'        => "datetimerange", 'format'      => "yyyy-MM-dd HH:mm:ss", 'placeholder' => "請選擇活動日期",
 ] ), ]);

echo $form->view();

更多程式碼功能

助手函式更多程式碼功能

Test

進入verdor/iszsw/surface/test目錄

$ php -S localhost:888

訪問
localhost:888

訪問助手
localhost:888/helper.php

說明

前端基於 iszsw/surface-src

本作品採用《CC 協議》，轉載必須註明作者和本文連結