【问题标题】:Jquery persistent sortable objects in Drupal?Drupal中的Jquery持久可排序对象?
【发布时间】:2011-09-29 10:42:28
【问题描述】:

我正在做一个 drupal 项目,它允许我拥有可视化书签屏幕截图(想想 zootool.com)。我将每个屏幕截图放在使用 jQuery 进行排序的网格中。这一切正常,我可以将所有图像按我希望的任何顺序排序。唯一的问题是我无法保存刚刚更改为的位置/顺序。

我已使用“权重”模块为每个屏幕截图分配一个默认值,这是使用按此“权重”排序的视图输出的。因此,当我使用 jQuery 移动所有节点时,我需要一种机制来更新/保存所有节点的权重顺序。

目前我有一个 jQuery 代码,它输出一个带有新顺序的警报框:

//Draggable boxes
$(function() {
    $( ".sortable-nodes" ).sortable({
        placeholder: "ui-state-highlight",
        opacity: 0.7,
        update: function(event, ui) {
                    var result = $(this).sortable('toArray');
                    alert(result);
                 }
    });
});

我的问题是:Drupal 是否已经有一个页面可以用来通过 jQuery.post 更新节点,还是我必须自己创建一个来保存节点?此外,这是正确的方法还是在移动可排序框后有更好的方法来更新/保存节点位置?

非常感谢!

【问题讨论】:

    标签: jquery jquery-ui drupal jquery-ui-sortable persistent


    【解决方案1】:

    好的,我想我会用我找到的解决方案来跟进我的问题。它可能会帮助其他人。它很大程度上基于 googletorp 对此处发布的非常相似的问题的回答:Drupal 6/jQuery Ajax update a field

    步骤 1.0 创建一个新模块。 我创建了一个简单的 updatemynode.info 文件和 updatemynode.module 文件。

    1.1 updatemynode/updatemynode.module包含两个函数。

    function updatepos_menu() {
    
        $items = array();
        $items['update_positions'] = array(
            'page callback' => 'update_node_position',
            'type' => MENU_CALLBACK,
            'access callback' => TRUE,
            'access arguments' => array('access content'),
        );
       return $items;
    }
    

    这是模块中创建 URL www.mywebsite.com/update_positions 的第一个函数,该 URL 调用 php 函数“update_node_position”。 (见下文)

    1.2 updatemynode/updatemynode.module第二个函数是:

       function update_node_position() {
        // Create an array from the passed string
        $neworder = explode(",", $_POST['theorder']);
    
        // For each array entry, redo their node weight (which Views sorts on)
        foreach ($neworder as $key => $value){
            $node = node_load($value);
            $node->node_weight = ($key+1);
            node_save($node);
        }
    }
    

    为了简洁起见,我删除了任何错误检查,它只是完成了一个功能,就是这样。基本上,它执行以下操作: A. 搜索 $_POST['theorder'] 变量(在我的应用程序中包含一个 NID 字符串),使用 php 'explode' 将字符串转换为数组并分配给 $neworder。 B. 对于新数组的每个条目,使用值 (NID) 加载该节点。 C. 我正在使用“重量”模块来创建排序。 $node->node_weight = ($key+1); line 将数组 1、2、3、4 等中的位置分配给节点 wight。 (从而创建订单)。 D. 保存节点并对数组中的每个条目重复。

    2.0 我有一个 main_javascript.js 文件,它附加到我所有的 drupal 页面。此 javascript 文件包含以下代码:

    $(function() {
      $( ".sortable-nodes" ).sortable({
        placeholder: "ui-state-highlight",
        opacity: 0.7,
        update: function(event, ui) {
    
          // Create result variable that contains array order.
          var result = $(this).sortable('toArray');
    
          // Run AJAX function with RESULT data to update_positions page
    
          $.ajax({
            type: "POST",
            url: "/update_positions",
            // Pass the RESULT array
            data: { theorder : [result]},     
          });                   
        }
    });
    

    这是 jQuery 的关键,它做了一些工作:

    2.1 标记为 .sortable-nodes 的对象(在我的例子中是一个 DIV)可以使用 jQuery 'sortable' 方法进行排序。当我单击并拖动 DIV 时,它将执行此操作:

    2.2 在每个可排序的 DIV 之间使用 CSS 类“ui-state-highlight”。

    2.3 将不透明度降低到 70%。

    2.4 一旦位置发生变化,它将运行“更新”事件。

    2.5 'update' 事件将创建一个名为 'result' 的变量,其中包含所有可排序对象节点 id 的字符串。 (例如 113,114,115,116,117 等...)

    2.6 .ajax 方法运行并被告知向 /update_positions URL(之前在 updatemynode/updatemynode.module 文件中创建)发送 POST 请求,并传递名为 'theorder' 的 $_POST 变量,其中包含字符串 '结果'。一旦字符串 'result' 被传递到 URL,模块函数 update_node_position() 就会使用这个字符串并按照上面的说明执行它的魔法。

    3.0 我在页面上的结果使用视图按节点权重排序。因此,当页面重新加载时,订单应该与您使用 AJAX 调用的方式保持一致(因为 node_weight 已更新)。

    希望这可能对某人有所帮助。欢迎任何问题/cmets!

    【讨论】:

      【解决方案2】:

      Drupal 尚不具备此类功能,除非您将使用 Services module 而不是 jsonp 计算在内,这将比您自己实现功能花费更长的时间。

      在我看来,没有更好的方法可以做到这一点,任何你能找到的贡献模块都可能非常臃肿,有很多你不需要的功能。向自定义菜单项发布帖子非常容易,我建议您这样做。然后,您还可以完全控制代码,并可以根据需要对其进行优化。

      【讨论】:

      • 谢谢克莱夫。我一直在做更多的研究,看来你提到的第二种方法会更好。我找到了这篇文章:drupal-6-jquery-ajax-update-a-field,它似乎解决了执行此任务的大部分要点。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-03-05
      • 1970-01-01
      • 2016-02-26
      • 2013-10-08
      • 1970-01-01
      • 2012-10-05
      • 1970-01-01
      相关资源
      最近更新 更多