README

版本 1.0.0

一个用于 CakePHP 的内联编辑插件，利用 jQuery 的力量。此插件允许您轻松地将视图中的任何字段设置为可编辑。

结合 Ajax 的强大功能，您可以直接在视图中更改数据，而无需重新加载页面。

要求

jQuery
Jeditable
PHP 版本：PHP 7.1+
CakePHP 版本：3.5.X

安装

使用终端进入 CakePHP 应用程序目录。
输入 composer require emilushi/in-place-editing
要加载插件，输入： bin/cake plugin load InPlaceEditing
在 src/View/Application.php 中的 initialize 方法中添加以下行：$this->loadHelper('InPlaceEditing.InPlaceEditing');

在视图中使用 InPlaceEditing

编辑助手将允许您在视图中添加一个 input 控件，该控件将表现得像视图中的 div 元素（默认情况下，或任何您希望的其他 HTML 元素）直到您点击/双击/悬停等，然后它将显示为文本输入，下拉列表，或任何由 Jeditable jQuery 插件支持的元素。假设我们的模型是 OrdersTable，控制器 Orders，要编辑的字段名为 comments。在您的视图中添加以下代码以生成触发 jeditable 所需的字段。

<?= $this->InPlaceEditing->input('Order', 'comments', $order->id, [
    'value'         => $order->comments,
    'actionName'    => $this->Url->build([
        'controller' => 'orders',
        'action'     => 'in_place_editing'
    ]),
    'type'          => 'textarea',
    'rows'          => 4,
    'cancelText'    => 'Cancel',
    'submitText'    => 'Save',
    'toolTip'       => 'Click to edit',
    'containerType' => 'div'
]) ?>

包含 CSRF 令牌

要通过设置 X-CSRF-Token 将 CSRF 令牌添加到 Ajax 请求中，请将以下设置添加到视图中

'csrfToken' => json_encode($this->request->getParam('_csrfToken'))

例如，按照上面的示例

    'toolTip'       => 'Click to edit',
    'containerType' => 'div',
    'csrfToken' => json_encode($this->request->getParam('_csrfToken'))
]) ?>

不要忘记在最后一个设置后面添加逗号（在这种情况下，containerType）。您可能需要在控制器中的 initialize() 函数中解锁操作

$this->Security->setConfig('unlockedActions', ['inPlaceEditing']);

在控制器中添加操作处理程序

在您可能需要禁用安全组件以针对此特定操作添加之前，请添加： $this->Security->setConfig('unlockedActions', ['inPlaceEditing']); 在控制器的 beforeFilter 方法上。然后在您的控制器中添加以下操作，该操作将更新我们的 $order->comments 字段并返回新值到视图。

public function inPlaceEditing($id = null) {
    $this->getRequest()->allowMethod('ajax');
    
    $order = $this-Orders->get($id);
    
    //You may need to unset data['id']
    if(isset($data['id'])) {
        unset($data['id']);
    }      
    
    $order = $this->Orders->pathchEntity($order, $data);
    
    if($this->Orders->save($order)) {
        $comment = $order->comments;
    
        $this->set(compact('comment'));
        $this->set('_serialize', 'comment');
        
        $this->viewBuilder()->disableAutoLayout();
        $this->viewBuilder()->setClassName('Ajax');
    }
}

创建操作处理程序视图

由于我们在操作中将视图类名称设置为 Ajax，因此我们需要在上面的路径上创建一个新的 Ajax 视图

src/Template/Orders/ajax/in_place_editing.ctp

注意，您需要将 Orders 替换为您自己的控制器名称。 在您创建的新文件中添加上述代码

echo $comment;

注意，这里也需要将 $comment 替换为您自己的字段。

加载 JS

InPlaceEditingHelper 将为您的字段生成一个输入和一个用于每个字段的 jQuery 代码片段。生成的 jQuery 代码通过 $this->Html->scriptBlock() 方法注入，这要求您在布局中某处有 fetch 方法，并且它需要在您用于加载 jQuery 和 jquery-jeditable 的代码下方。它看起来像：<?= $this->fetch('script') ?>

待办事项

此插件版本远非完美，但它可以工作。我将在未来的更新中使事情变得更加简单。

编写测试。

许可证

此代码根据 MIT 许可证许可。

注意

请随时通过票据或分叉此项目并自行改进来提交错误报告或提出改进建议。欢迎贡献。

emilushi / in-place-editing

维护者

详细信息