也许是最好的 X-Editable 插件了

分享 NicolaBonelli ⋅ 于 2017-11-08 19:56:39 ⋅ 538 阅读

php-x-editable

可能是史上最好用的X-Editable PHP插件了


travis-ci.svg
packagist-version.svg
license.svg
download-count.svg
open-issue.png
open-pull-request.png
last-commit.png
contributors.png

安装

composer require diana/php-x-editable -vvv

在安装完成后,javascript和css是引用jsdelivr的URL来载入的。
如果您的项目是内网,或者因为其他限制需要本地托管的,请执行下面的命令即可托管在本地。

composer require diana/php-x-editable-assets -vvv
composer run-script post-autoload-dump -d vendor/diana/php-x-editable-assets

其中,第二个命令是发布CSS/JS到项目的WEB目录的。针对laravel(lumen)和thinphp5框架,会发布到public目录。
其他情况默认发布到根目录。
如果框架不满足上面情况,需要手工执行

cp -R ./vendor/diana/php-x-editable-assets/assets/ 你项目的WEB根目录/

使用

<?php
$editable = new \Editable\Editable(
    [
        'id'            => 12,
        'name'          => '张君宝',
        'home'          => '武当山',
        'prefer'        => 'php,html',
        'gender'        => 1,
        'job'           => 2,
        'about'         => 'Throne of the seven kingdoms,<br/> <i>Father of the dragon</i>, <b>stormborn</b>, <u>unburn</u>.',
        'created_at'    => date('Y-m-d H:i:s'),
    ], 
    'id', 
    [], 
    'test.php?action=save'
);

$editable->typeahead('home', null, [
    '武当山',
    '华山',
    '峨眉山',
    '井冈山',
], 0);

$editable->checklist('job', null, [
    ['value' => 1, 'text' => '一代弱鸡'],
    ['value' => 2, 'text' => '一代宗师'],
    ['value' => 3, 'text' => '一代刺客']
], 0);

$editable->select('gender', null, [
    ['value' => 0, 'text' => '未知'],
    ['value' => 1, 'text' => '男'],
    ['value' => 2, 'text' => '女'],
], 0);

$editable->tag('prefer', null, ['css', 'js', 'google']);

$editable->wysiwyg('about');
$editable->datetime('created_at');
echo $editable->render()->getBody();

完整的DEMO例子请见 https://github.com/xiaohuilam/php-x-editable/blob/dev/example/Editable.php

Input[Text]

1.png

Typeahead

2.png

Tag

3.png

Checklist

5.png

Select

4.png

Wysiwyg(所见即所得)

6.png

Datetime(日期时间)

7.png

功能进度

功能 描述 状态
text 已完结
select 已完结
tags 已完结
datetime 已完结
wysiwyg 已完结
静态资源本地托管 安装 已完结
后端自动保存 就是你不用写保存的代码,因为你在读取时候已经写了所必要的信息 跳票中
多行编辑 一次编辑多行数据,考虑和datatables插件做支持 跳票中
二次异步加载 select和typeahead的下拉数据,做AJAX加载的支持 部分支持(单选框select已支持)
文件上传 x-editable是不支持上传文件的,我打算支持他 跳票中
追加额外的POST参数 如CSRF_TOKEN 跳票中

特别鸣谢

授权

MIT

链接 Github

本帖已被设为精华帖!
本帖由 Summer 于 1周前 加精
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
      请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
    Ctrl+Enter