表格 orderable 排序扩展倒序排序

• dcat-admin 要开启排序很容易,可惜不支持倒序,新增的数据要显示在前面这样的需求很常见.
• 项目很紧没有太多时间,所以解决方案并不是最好的,如果有更好的方案欢迎留言.

// dcat-admin 开启排序真的很容易,很好用
$grid->column('order')->orderable();

• 通过追源码发现只要改下部分代码就可以实现倒序,当然不能修改底层,所以新建类并继承原始类,然后通过扩展绑定替换原始类的实现.代码如下:

<?php

namespace App\Extensions;


use Dcat\Admin\Grid\Displayers\Orderable;

class DescSortable extends Orderable
{
    protected function script()
    {
        return <<<JS

        var opt = {
            button: '.{$this->grid->getRowName()}-orderable',
            url: '{$this->resource()}/:key',
            req: 0
        }

        $(opt.button).off('click').click(function () {
            var key = $(this).data('id');
            var direction = $(this).data('direction');
            direction = !direction * 1;
            if (opt.req) return;
            opt.req = 1;
            Dcat.loading();

            $.put({
                url: opt.url.replace(':key', key),
                data: {_orderable: direction},
                success: function(data){
                    Dcat.loading(false);
                    opt.req = 0;
                    if (! data.status) {
                        return data.data.message && Dcat.warning(data.data.message);
                    }
                    Dcat.success(data.data.message);
                    Dcat.reload();
                },
                error: function (a, b, c) {
                    opt.req = 0;
                    Dcat.loading(false);
                    Dcat.handleAjaxError(a, b, c)
                }
            });
        });
JS;
    }
}

如何使用

1. 应用到项目中所有的排序

app/Admin/bootstrap.php 文件中加入一行代码

Grid\Column::extend('orderable', \App\Extensions\DescSortable::class);

2. 应用到项目中需要倒序的地方

protected function grid()
{
    Column::extend('orderable', \App\Extensions\DescSortable::class);

    return Grid::make(new Video(['talent']), function (Grid $grid) {
        $grid->column('id')->sortable();
        $grid->column('desc')->width('300px');
        $grid->column('cover')->image('', 200, 140);
        $grid->column('is_index')->switch('', true);
        $grid->column('created_at');
        $grid->column('order')->orderable();

        $grid->filter(function (Grid\Filter $filter) {
            $filter->panel();
        });
    });
}

内嵌(embeds)字段图片上传解决

• 对于存大json的字段,用内嵌(embeds)非常非常的方便,有时增加一个字段就不用去数据库增加字段了,项目中真的能节省大量时间,但是遇到需要上传图片或文件时,这个组件就没那么好用了.官方文档中明确提示不支持.
• 好在json表单 $form->array 都支持,于是将 array 稍作改动就可以使用了.

新增文件 app/Extensions/JsonField.php

<?php

namespace App\Extensions;


use Dcat\Admin\Form\Field\ArrayField;
use Dcat\Admin\Support\Helper;

class JsonField extends ArrayField
{
    protected $views = [
        'default' => 'form.hasmany',
    ];

    protected function buildRelatedForms()
    {
        if (is_null($this->form)) {
            return [];
        }

        $forms = [];

        foreach (Helper::array([$this->value()]) as $key => $data) {
            if (isset($data['pivot'])) {
                $data = array_merge($data, $data['pivot']);
            }

            $forms[$key] = $this->buildNestedForm($key)->fill($data);
        }

        return $forms;
    }

    protected function prepareInputValue($input)
    {
        $arrayValue = parent::prepareInputValue($input);
        return array_shift($arrayValue);
    }


}

新增文件 resources/views/form/hasmany.blade.php

<div class="row" style="margin-top: 10px;">
    <div class="{{$viewClass['label']}}"><h4 class="pull-right">{!! $label !!}</h4></div>
    <div class="{{$viewClass['field']}}"></div>
</div>

<hr class="mt-0">

<div class="has-many-{{$columnClass}}">

    <div class="has-many-{{$columnClass}}-forms">

        @foreach($forms as $pk => $form)

            <div class="has-many-{{$columnClass}}-form fields-group">

                {!! $form->render() !!}

                <hr>

            </div>

        @endforeach
    </div>


    <template class="{{$columnClass}}-tpl">
        <div class="has-many-{{$columnClass}}-form fields-group">

            {!! $template !!}

            <hr>

        </div>
    </template>

</div>

<script>
    var nestedIndex = {!! $count !!},
        container = '.has-many-{{ $columnClass }}',
        forms = '.has-many-{{ $columnClass  }}-forms';

    function replaceNestedFormIndex(value) {
        return String(value).replace(/{{ Dcat\Admin\Form\NestedForm::DEFAULT_KEY_NAME }}/g, nestedIndex);
    }

    @if(!$forms)
        var tpl = $('template.{{ $columnClass }}-tpl');
        nestedIndex++;
        var template = replaceNestedFormIndex(tpl.html());
        $(forms).append(template);
    @endif

</script>

如何使用

• app/Admin/bootstrap.php 文件绑定新组件

Form::extend('json', \App\Extensions\JsonField::class);

• 使用和 dcat-admin array表单基本一样,参考array的文档.

$form->json('extra1', '基本信息', function ($form) {
    $form->text('s_title', '分享标题');
    $form->text('s_desc', '分享描述');
    $form->image('s_img', '分享图')->disk('public')->autoUpload();
});

备注: 使用的dcat-admin版本为 2.0.24