十月CMS Ajax排序在前端

php ajax laravel octobercms octobercms-plugins

2022-08-30 12:58:46

我正在寻找使用ajax对前端中的列表进行排序的最佳实践。

因此，我有一个循环遍历所有项目的组件。然后是一个带有复选框的侧边栏，以使用Ajax进行过滤。每个复选框都是一个类别，并且将通过选中该过滤器来执行该过滤器。

在我的组件默认值.htm，我有

{% set items = __SELF__.items %}

<div class="col-md-12" id="results">
{% for item in items %}

<ul>
    <li>{{ item.title }} - {{ item.description }}</li>
</ul>


{% endfor %}   
</div>

和一个按钮，直到我让它工作切换到复选框。

<button class="btn btn-default"
data-request="onHandleForm"
data-request-update="#results">
Go

和在我的组件插件文件中

// Fetches everything
public function onRun() {

    $order = items::orderBy('id', 'asc');
    $this->items = $order->get();

}

function onHandleForm()
{

    // Fetch all of the items where category is 2 for test purposes
    $order = items::orderBy('id', 'desc')->where('category','2');
    $filter = $order->get();

    $this->page['items'] = $filter;

}

然而，我对找不到零件有问题。以上是相当草率的，但我只是在寻找刷新内容的最佳方法（使用多个部分来更新或只是一个div？）并且还处理范围。

我知道部分更新，但我需要一个工作示例来学习。我不知道组件中作用域的最佳实践，这是否会影响分页，以及如何在一个组件中使用多个部分来构建设置。

答案 1

如果要从处理程序中提取部分更新，则属性名称应为

data-request-update="resultsPartialName: '#results'"

您也可以像这样使用多个部分：

data-request-update="firstpartial: '#myDiv', secondpartial: '#otherDiv'"

另一种方法是从 ajax 处理程序推送部分更新。这对我来说感觉有点干净，但这只是偏好的问题。

function onRefreshTime()
{
    return [
        '#myDiv' => $this->renderPartial('mypartial')
    ];
}

有关详细信息，请参阅官方文档的更新部分页面。

答案 2

更改为 if 在文件夹中，然后替换default.htmdefault.htmdata-request-update="foldername/default:'#results'"

<form data-request="{{ __SELF__ }}::onFormSubmit" data-request-validate>
<button class="btn btn-default" data-request="onHandleForm" data-request-update="default:'#results'">
</form>