OctoberCMS 前端的 Ajax 排序答案

【问题标题】：OctoberCMS Ajax Sort in the frontendOctoberCMS 前端的 Ajax 排序
【发布时间】：2017-08-13 13:20:14
【问题描述】：

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

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

在我的组件default.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？）并处理范围。

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

【问题讨论】：

您可以尝试删除data-request-update="#results" 并在您的onHandleForm 中使用return [ '#results' => $this->renderPartial('yourcomponent::default.htm') ]; 返回更新

标签： php ajax laravel octobercms octobercms-plugins

【解决方案1】：

如果你想从处理程序中提取部分更新，那么属性名称应该是

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

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

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

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

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

更多信息见官方文档Updating partials页面。

【讨论】：

过滤数据库结果的逻辑如何发挥作用？
您在ajax处理程序中对记录进行排序并返回结果以显示在部分中
谢谢，ajax 处理程序中执行此操作的最佳实践是什么？我看到你渲染了一个部分，但是模型数据是如何过滤的，数据是如何传递的？ $this['result'] = $filter;我正在寻找一个基本的代码示例，例如带有多个检查/过滤器的实时更新的复选框数组过滤器。
我已经附加了更详细的问题。我已经阅读了这些文档，但它们没有解释处理组件中范围的最佳实践，也没有解释这样的分页是否也可以工作。感谢您的回答，但这只是从我已经阅读过的文档中粘贴的。

【解决方案2】：

如果default.htm在文件夹中，则改为default.htm，然后替换data-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>

【讨论】：