javascript - 如何在 dgrid 中使用 dnd 实现行重新排序

标签 javascript drag-and-drop dojo dgrid

我在连接到 JsonRest 存储的 dgrid 中创建了一个网格。这从金字塔后端加载数据。我还在商店中添加了 DnD 扩展。 DnD 有效,但是我不知道如何在拖动行时发送任何有意义的数据。目前它发送两个请求,一个 GET 和一个 PUT,但是 PUT 只包含来自行的数据,但没有我可以用来更新数据库中的顺序的数据。

那么在我的网格中需要什么配置,以便我可以获得新的订购信息?

最佳答案

这是我的做法:

  1. 在数据库中维护一个位置
  2. 当一行被放下时调用 store.put,传递被放下项目的 ID 和它被放下的位置。
  3. 更新位置时,相应地移动其他项目

这是我的onDropInternal 函数。它还处理删除多行:

        onDropInternal: function(nodes, copy, targetItem) {

            var store = this.grid.store, grid = this.grid, targetRow, targetPosition;

            if (!this._targetAnchor) return

            targetRow = grid.row(this._targetAnchor);
            targetPosition = parseInt(targetRow.data[grid.orderColumn]);
            responses = 1;

            nodes.forEach(function(node, idx){
                targetPosition += idx;
                var object = {id:grid.row(node).id};
                object[grid.orderColumn] = targetPosition;
                store.put(object).then(function() {
                        if (responses == nodes.length) grid.refresh();
                        else responses++;
                });
            });

        }

这是我用来更新位置的 PHP 代码。 $fields 是一个关联数组,表示要存储的记录。它还假定存在两个函数:queryquery_row,我相信如果您选择使用此技术,您可以处理替换。

$table = "my_table";
$field = "position_field";
if (empty($fields['id'])) {
    //for new records, set the position field to the max position + 1
    $h = query_row("SELECT MAX(`$field`) as highest FROM $table LIMIT 1");
    $fields[$field] = $h['highest']+1;
} else if (is_numeric($fields[$field])) {
    //we want to move the row to $target_position
    $target_position = $fields[$field];
    //first get the original position
    $row = query_row("SELECT id,$field FROM $table WHERE id='$fields[id]' LIMIT 1");
    //start a list of ids
    $ids = $row['id'];
    //if the original position is lower than the target postion, set the incrementor to -1, otherwise 1
    $increment = ($row[$field] < $target_position) ? -1 : 1;
    //start a while loop that goes as we long as we have a row trying to take a filled position
    while (!empty($row)) {
        //set the position
        query("UPDATE $table SET $field='$target_position' where id='$row[id]'");
        //get the other row with this position (if it exists)
        $row = query_row("SELECT id,$field FROM $table WHERE id NOT IN ($ids) && `$field`='$target_position' LIMIT 1");
        //add it's id to the list of ids to exclude on the next iteration
        $ids .= ", ".$row['id'];
        //increment/decrement the target position
        $target_position += $increment;
    }
}

您可能可以通过使用一次更新多个记录的查询来提高效率,但这样做的好处是它可以很好地处理位置编号中的意外差距。

关于javascript - 如何在 dgrid 中使用 dnd 实现行重新排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14796968/

相关文章:

c# - 拖放在 C# 中不起作用

silverlight - 在 silverlight 中实现拖放到底有多容易?

php - PDO:未选择数据库

javascript - 函数的所有实例是否可以访问同一个私有(private)变量?

javascript - 转换分钟 -> hh :mm. 可能的最短代码(一行?)

javascript - Javascript如何存储数组

javascript - 是否应该渲染 javascript 文件以适应服务器 url 的变化?

drag-and-drop - 如何拖放到 QTableWidget 中? (PyQT)

javascript - JSON/javascript成员函数在dojo模块中引用父级?

javascript - 围绕 GridX 树使用 dojo 方面时,对 "this"的引用丢失