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

使用

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();

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();

更多程式碼功能

助手函式更多程式碼功能

Test

進入verdor/iszsw/surface/test目錄

$ php -S localhost:888

訪問
localhost:888

訪問助手
localhost:888/helper.php

說明

前端基於 iszsw/surface-src

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