Question

我花了几天时间研究数据表和yajra包，这就是说我没有接近得到我需要的结果，如果有任何人比我新手的方法知识更多的话，我会非常感谢你们的帮助！

为了更好地解释我附加了两张图片，第一张图片是已经实现了这个图片的应用程序，第二张图片是我为了显示差异而进行的快速模拟。

我希望实现的预期结果......

我目前的观点......

我基本上是在为每个需要该功能的列添加自定义html。我已经设法通过返回一个自定义数组来取得一些成功：

foreach ($tasks as $task) {
    $checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>';
    $taskPriority = '<span class="text-info inline-block">Medium</span>';
            ... so on ...
    $row = array(
        $checkBox,
        $taskPriority,
        ... so on ...
    );
    $rows[] = $row;
}
$list['data'] = $rows;
return $list;

虽然这有效但我不会说它是最好的方法，并且想象有一些更好更优雅的方法吗？

我理解yajra有addColumn和editColumn方法，我用它们来添加一个动作列，因为它是唯一一个似乎呈现任何html的方法，除了addColumn之外的任何其他方法（'action'，'blah blah' ）似乎不想渲染html而是将其显示为行中的原始文本。

以防万一这是为了帮助任何人，这里是为获取表数据而进行的Ajax调用。

$('#taskstable').DataTable({
    "processing": true,
    "retrieve": true,
    "serverSide": true,
    'paginate': true,
    'searchDelay': 700,
    "bDeferRender": true,
    "responsive": true,
    "autoWidth": false,
    "pageLength": 5,
    "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
    ajax: '/tasks/get-tasks'
});

希望有人可以帮助减轻新手的压力！感谢。

Answer 1

你知道吗这可以帮助你获得理想的结果。控制器：

public function index(Request $request)
    {
        $data = [];
        $data['page_title'] = trans($this->trans_path . 'general.page.index.page-title');
        $data['show_modal'] = false;
        $data['trans_path'] = $this->trans_path;
        if ($request->get('add') && $request->get('add') == "true") {
            $data['show_modal'] = true;
        }

        // TODO: Confirm this logic
        //count no. of promoter admin
        $data['promoter'] = User::where('user_type', AclHelper::getUsersTypeKey('promoter-admin'))->count();

        // for mapping policy
        $data['admin_user_model'] = new AdminUser();

        //generate add Button
        $data['add_btn_html'] = view($this->loadDefaultVars($this->view_path . '.partials._promoter_add_button'))->render();
        $data['assignable_user_roles'] = $this->getAssignableRolesByAuthUser();

        return view($this->loadDefaultVars($this->view_path . '.index'), compact('data'));
    }

    public function search(Request $request)
    {

        $data = [];
        $columns = ['rud.*', 'us.first_name as promoter_first_name', 'us.last_name as promoter_last_name', 'users.email', 'users.username',
            'r.name', 'r.display_name', 'rud.created_by', 'rud.promoter_id', 'users.enabled'];
        $users = $this->getUserListJoinQuery($columns)
            ->leftJoin('role_users_details as us', 'rud.promoter_id', '=', 'us.id')
            ->groupBy('users.id');

        if (in_array(AclHelper::getUsersTypeKey('super-admin'), AclHelper::getUserRoles(), 1) ||
            in_array(AclHelper::getUsersTypeKey('support-admin'), AclHelper::getUserRoles(), 1)
        ) {
            $users->where('users.id', '!=', auth()->user()->id);
            $data['users'] = $users->get();
        } else {

            if (in_array(AclHelper::getUsersTypeKey('promoter-admin'), AclHelper::getUserRoles(), 1))
                $data['users'] = $users->where('rud.promoter_id', Auth::user()->id)->get();
            elseif (in_array(AclHelper::getUsersTypeKey('promoter-editor'), AclHelper::getUserRoles(), 1)) {
                $promoter_id = Auth::user()->userDetail->promoter_id;
                $users->where('r.name', '!=', AclHelper::getUsersTypeKey('promoter-editor'));
                $data['users'] = $users->where('rud.promoter_id', $promoter_id)->get();
            } else {
                return response('Unauthorized request made.', 401);
            }
        }

        return Datatables::of($data['users'])
            ->editColumn('user_id', function ($users) {
                $data = view($this->loadDefaultVars($this->view_path . '.partials._action_fields'), compact('users'))->render();
                return $data;
            })
            ->editColumn('profile_image', function ($users) {
                if (!isset($users->profile_image)) {
                    return "";
                }
                return '<img src="' . asset(config('neptrox.admin_user_path.thumbnail') . $users->profile_image) .
                '" alt="' . $users->first_name . '" style="height: 40px;" >';
            })
            ->editColumn('name', function ($users) {
                return $users->first_name . ' ' . $users->middle_name . ' ' . $users->last_name;
            })
            ->editColumn('gender', function ($users) {
                if ($users->gender === 'male')
                    return 'Male';
                elseif ($users->gender === 'female')
                    return 'Female';
                else
                    return 'Other';
            })
            ->editColumn('user_type', function ($users) {
//                return $users->pivot->display_name;
                return config('neptrox.admin-users-roles.' . $users->name . '.title');
            })
            ->editColumn('promoter', function ($users) {
                return $users->promoter_first_name . ' ' . $users->promoter_last_name;
            })
            ->editColumn('status', function ($users) {
                if ($users->enabled === 1) {
                    return "<span class='text-success'> " .
                    '<i class="fa fa-check-circle-o text-info"></i>' .
                    "</span>";
                }
                return "<span class='text-danger'>" .
                '<i class="fa fa-ban text-danger"></i>' .
                "</span>";
            })
            ->make(true);

    }

jquery脚本

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script>

    (function (options) {

        var route_url = options.dataTableConfigVariable.route_url;
        var columns = options.dataTableConfigVariable.columns;
        var order = options.dataTableConfigVariable.orderColumn;
        if (order == 'undefined' || order == null || order == "") {
            order = 1;
        }
        var config = {
            "dom": '<t>' +
            '<"card-footer card-pagination"<"row"<"col-md-8"p><"col-md-4 form-design1 right"l>>>',
            "oLanguage": {
                "sLengthMenu": " _MENU_ ",
                "sSearchPlaceholder": "Search",
                "oPaginate": {
                    "sNext": "<span aria-hidden='true'>»</span><span class='sr-only'>Next</span>",
                    "sPrevious": "<span aria-hidden='true'>«</span><span class='sr-only'>Previous</span>"
                },
            },
            processing: true,
            serverSide: true,
            ajax: {
                type: 'POST',
                url: route_url.dataTable_url,
                data: {
                    _token: $('meta[name=csrf-token]').attr("content")
                }
            },
            columns: columns,
            'order': [[order, 'asc']]
        };

        //initialize dataTables
        var table = $('table.table').DataTable(config);

        $('#searchField').keyup(function(){
            table.search($(this).val()).draw() ;
        });


        //Enables or disables the performer and reload the ajax after success
        $('body').on('click', '.enableDisable', function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                type: 'GET',
                url: url,
                success: function (response) {
                    table.ajax.reload(null, false);
                }
            });
        });

        //toggle all checkbox checked or unchecked
        $('body').on('click', 'input[name="checkAll"]', function () {
            var checkBoxes = $("input[name=checkbox\\[\\]]");
            checkBoxes.prop("checked", $(this).prop("checked"));
        });

        //enable selected performers
        $('body').on('click', '#enable', function (e) {
            var url = route_url.enableAll;
            enableDisablePerformer(e, url);
        });

        //disable selected performers
        $('body').on('click', '#disable', function (e) {
            var url = route_url.disableAll;
            enableDisablePerformer(e, url);
        });

        function enableDisablePerformer(e, url) {
            e.preventDefault();
            var formData = $('input[name^=checkbox]');
            var data = {};
            formData.each(function (index) {
                if ($(this).is(':checked')) {
                    data[index] = $(this).val();
                }
            });
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    _token: $('meta[name=csrf-token]').attr("content"),
                    id: data
                },
                success: function (response) {
                    if (response == 'ok') {
                        table.ajax.reload(null, false);
                        $('body').find('input[name="checkAll"]').prop('checked', false);
                    }
                }
            });
        }


        //Delete confirmation popup
        $('body').on('click', '.try-sweet-warningConfirm', function () {
            var id = $(this).attr('id');
            swal({
                title: "{{ trans($trans_path.'general.delete.sure') }}",
                text: "{{ trans($trans_path.'general.delete.message') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}",
                confirmButtonText: "{{ trans('general.button.delete') }}",
                cancelButtonText: "{{ trans('general.button.cancel') }}",
                closeOnConfirm: true
            }, function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: 'POST',
                        url: route_url.delete,
                        data: {
                            _token: $('meta[name=csrf-token]').attr("content"),
                            id: id
                        },
                        success: function (response) {
                            table.row($(this).closest('tr')).remove().draw();
                            if (response == 'ok') {
                                swal({
                                    title: "{{ trans($trans_path.'general.status.delete') }}",
                                    text: "{{ trans($trans_path.'general.status.deleted') }}",
                                    type: "success",
                                    timer: 2000,
                                    confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}"
                                });
                            }
                        }
                    });

                }
            });
        });

        //Delete bulk confirmation popup
        $('body').on('click', '#delete', function () {
            swal({
                title: "{{ trans($trans_path.'general.delete.sure') }}",
                text: "{{ trans($trans_path.'general.delete.message') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}",
                confirmButtonText: "{{ trans('general.button.delete') }}",
                cancelButtonText: "{{ trans('general.button.cancel') }}",
                closeOnConfirm: true
            }, function (isConfirm) {
                if (isConfirm) {
                    var url =route_url.delete;
                    deleteBulkPerformer(url);
                    $('body').find('input[name="checkAll"]').prop('checked', false);
                    swal({
                        title: "{{ trans($trans_path.'general.status.delete') }}",
                        text: "{{ trans($trans_path.'general.status.deleted') }}",
                        type: "success",
                        timer: 2000,
                        confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}"
                    });
                }
            });
        });

        function deleteBulkPerformer(url){
            var formData = $('input[name^=checkbox]');

            var data = {};
            formData.each(function (index) {
                if ($(this).is(':checked')) {
                    data[index] = $(this).val();
                }
            });
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    _token: $('meta[name=csrf-token]').attr("content"),
                    id: data,
                    bulk: 'bulk'
                },
                success: function (response) {
                    if (response == 'ok') {
                        table.row($(this).closest('tr')).remove().draw();
                    }
                }
            });
        }

    })({dataTableConfigVariable:dataTableConfigVariable});

</script>

查看页面

 <script>
        var dataTableConfigVariable = {
            route_url: {
                dataTable_url:  '{{route("admin.admin_users.search")}}',
                enableAll: '{{route("admin.admin_users.enableAll")}}',
                disableAll: '{{route("admin.admin_users.disableAll")}}',
                delete: '{{route("admin.admin_users.delete")}}'
            },
            columns: [
                {data: 'user_id', name: 'user_id', orderable: false, searchable: false},
                {data: 'profile_image', name: 'profile_image', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'user_code', name: 'user_code', orderable: false},
                {data: 'email', name: 'email'},
                {data: 'username', name: 'username'},
                {data: 'gender', name: 'gender'},
                {data: 'user_type', name: 'user_type'},
                {data: 'promoter', name: 'promoter', orderable: false, searchable: false},
                {data: 'status', name: 'status', orderable: false, searchable: false},
            ],
            orderColumn: 2
        };
    </script>

Answer 2

我发布这个答案时发现的最简单的方法如下，据说我确信这不是最好的方法，也许及时来找一个比我更有经验的人能够发布更好的解决方案。

在我的项目中，我使用了一个名为Laravel Collective的特定包，可以找到：...here..

使用此包可以访问辅助类和外观。通过一些特定于我的应用程序的轻微修改，我已经能够很好地利用这个包。

一种类似的方法是：

public function getTasks()
{
    $tasks = $this->taskInterface->model()->all();
    return $this->datatables->collection($tasks)
        ->editColumn('name', function ($model) {
            return HtmlFacade::link("admin/tasks/{$model->id}", $model->name);
        })
        ->addColumn('action', function($query) {
            return view('backend.global.tables.actions.all-tasks-actions', compact('query'));
        })
        ->make(true);
}

注意

使用return HtmlFacade :: link（）时;这将返回在数据表上呈现的html，通过查看文档可以找到完整的方法列表，或者在我的情况下通过类自己查看，看到源代码让我更好地了解了它们的包工作，不仅如此，它还提供了向课程添加更多方法的能力，这就是我如何得到我需要的结果。

我不打算发布所有自定义类，因为我认为它不太适合将来帮助任何人，因为我添加的方法非常类似于开箱即用的软件包，唯一的区别是允许onclick JavaScript事件和倾斜CSS。

这个答案的寓意是让其他任何与我自己处于类似位置的人知道如果你已经在使用这个软件包，那么你可能不需要手动将所有行转换为数组，只是为了将自定义html传递给视图我不再需要这样做了：

$rows = []; $checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>'; $taskPriority = '<span class="text-info inline-block">Medium</span>'; ect... As seen in original post..

相反，您可以传递自定义属性，类并从laravel集合包中构建，这是laravel collective附带的链接方法，可以是将自定义方法添加到其包中的构建块。

public function link($url, $title = null, $attributes = [], $secure = null, $escape = true) { $url = $this->url->to($url, [], $secure); if (is_null($title) || $title === false) { $title = $url; } if ($escape) { $title = $this->entities($title); } return $this->toHtmlString('<a href="' . $url . '"' . $this->attributes($attributes) . '>' . $title . '</a>'); }

这应该让人们知道如何根据您的要求轻松修改这个Html Builder，正如我所说，我确信这不是最好和最优雅的想要实现相同的，如果不是更好的结果所以我将离开为未来的解决方案开放的问题我只是想我会分享我的解决方案。

Laravel Yajra数据表呈现自定义html /列样式

2 个答案: