Question

我已经写了一个脚本的开始，该脚本已应用于Wordpress管理区域中的edit.php页面。该脚本收集信息（使用插件在列中显示的id，title和一些ACF字段），并使用此信息为每个帖子生成div，然后使用这些新的div创建一个Muuri实例

想法是前端的帖子列表应使用Muuri进行渲染，以创建砌体布局。为了使用户更容易设置砖石中每个项目的排列和大小，我希望用户在管理区域中将Muuri与拖放功能一起使用，以便他们可以拖放每个帖子和设定自己的位置。然后，我想将每个帖子的顺序和大小从管理员传递到前端。

这是我添加到edit.php页面上的脚本：

    var output = "<div class='grid'>";

    $(window).on("load", function(){
    $("#the-list").find("tr").each(function(index){
        var title = $(this).find(".title").find(".row-title").text();
        var sort = $(this).find(".column-order").text();
        var layout = $(this).find(".column-size").text();
        var id = $(this).attr("id");
        var link = $(this).find(".title").find(".row-title").attr("href");
        var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
        select += "<option value='layout1'>Layout 1</option>";
        select += "<option value='layout2'>Layout 2</option>";
        select += "<option value='layout3'>Layout 3</option>";
        select += "</select>";
        output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
    });

    output += "</div><button class='submitGrid'>Save</button>";

    $(".wrap").append(output);

    var grid = new Muuri('.grid', {
        dragEnabled: true,
        layout: {
            fillGaps: true,
            rounding: false
        },
        sortData: {
            order: function (item, element) {
                return parseFloat(element.getAttribute('data-sort'));
            },
        }
    });

    grid.sort('order');

    $(".layout-changer").change(function(){
        var choice = $(this).find("option:selected").val();
        var parent = $(this).closest(".item");
        var parentEl = $(this).closest(".item")[0];

        parent.removeClass().addClass("item").addClass(choice);
        parent.attr("data-layout", choice);
        grid.refreshItems(parentEl).layout();
        grid.layout();
    })
});

我的想法是，然后我想将Muuri实例的属性（id，order和表示每个项目大小的CSS类）传递给某种PHP函数，该函数在单击Submit按钮时会更新每个帖子的ACF数据库中的字段。

这是我已经开始研究的功能：

$(document).on("click", ".submitGrid", function(){
        var allItems = grid.getItems();
        var payload = [];
        var item = {};
        for (i = 0; i < allItems.length; i++) {
            item = {
                order: i,
                layout: allItems[i]._element.dataset.layout,
                id: allItems[i]._element.dataset.id.replace(/\D/g,'')
            }
            payload.push(item);
        }
    })

它为Muuri网格中的每个项目/职位创建一个包含对象的数组，其中使用for循环的索引将属性设置为项目的顺序，然后设置id和{{ 1}}使用最初加载页面或更改网格布局时在元素上设置的数据字段。

如何将这些信息发送到PHP函数，然后借助这些对象来更新数据库中的每个帖子？

Answer 1

通过jQuery ajax函数发送（因为这就是您所使用的）

 $(document).on("click", ".submitGrid", function(){
        var allItems = grid.getItems();
        var payload = [];
        var item = {};
        for (i = 0; i < allItems.length; i++) {
            item = {
                order: i,
                layout: allItems[i]._element.dataset.layout,
                id: allItems[i]._element.dataset.id.replace(/\D/g,'')
            }
            payload.push(item);
        }

        var itemdata = JSON.stringify(payload);
        $.ajax({
            url: "/path/to/phpfile.php",
            type: "POST",
            data: {
              postitems: itemdata
            },
            beforeSend: function() {
            },
            success: function(response) {
              console.log(response);
            }
        });        
  });

PHP文件中的POST参数：

$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();

从Wordpress中的JavaScript更新帖子

1 个答案: