Question

我在我的angular（1.5.1）应用中使用了kendo-ui。我想在multiselect中添加拖放支持，以便用户可以将选择从一个多选中拖放到另一个多选。我尝试过遵循kendo拖放指南。问题是多选数据源没有使用删除/添加值进行更新。由于使用了服务器端过滤，每当我以编程方式尝试更新多选值时，它都会被清除。任何人都可以通过一些示例片段指导我如何实现这一目标？谢谢！

更新了我使用的代码段：

关于多选的变更函数 -

                    change: function (e) {
                        if (e.sender.list.length > 0) {
                            var targetElement = $(e.sender.list[0]).find('div.k-list-scroller .k-item.k-state-hover.k-state-focused.k-state-selected p')

                            if (targetElement.length > 0) {
                                //get object from datasource
                                var selectedItem = _.find(scope.unifyMultiSelect.dataItems(), function (i) {
                                    return i[scope.options.dataValueField] == targetElement[0].innerText;
                                });

                                initializeDraggable(multiSelect.tagList, selectedItem);
                            }
                        }
                    },

initializeDraggable函数 -

                function initializeDraggable(ul, selectedItem) {
                    $(ul).find('li:last-child').kendoDraggable({
                        group: "multiSelectGroup",
                        dataValue: selectedItem,
                        hint: function (element) {
                            scope.unifyMultiSelect.value(_.without(scope.unifyMultiSelect.dataItems(), selectedItem));
                            return element.clone();
                        }
                    });
                };

Answer 1

问题早已解决。抱歉，更新晚了。我提供的解决方案可能不是最好的，但这足以满足我的需求。稍后，我将尝试进一步改进它。

简而言之，首先我用空白数组更新了数据源，然后在$ timeout中更新了最新的drop值，以便反映更新。由于拖放发生在独立的multiselect指令实例之间，因此我还必须将调用者multiselect实例传递给drop end，以便在drop操作完成后可以更新先前的实例数据源。片段如下

拖放目标初始化功能-

            $scope.initializeDropTarget = function () {
                $scope.unifyMultiSelect.tagList.parent().kendoDropTarget({
                    group: "multiSelectGroup",
                    drop: function (e) {
                        var parentMultiselectOptions = e.draggable.options.parentMultiselectOptions;

                        //check if drop target is different multiselect instance
                        if (parentMultiselectOptions.instanceId != $scope.options.instanceId) {
                            var item = e.draggable.options.dataValue;

                            var multiselectItems = $scope.options.getSelectedObjects();

                            var selectedItem = _.find(multiselectItems, function (i) {
                                return i[$scope.options.dataValueField] == item[$scope.options.dataValueField];
                            });

                            if (!selectedItem) {
                                multiselectItems.push(item);
                                $scope.options.setSelectedObjectValues([]);

                                $timeout(function () {
                                    $scope.options.setSelectedObjectValues(multiselectItems);
                                }, 500);

                                finalizeDraggableItem(e.draggable);
                            }
                        }
                        //if dropped to same multiselect instance
                        else {
                            finalizeDraggableItem(e.draggable);
                        }
                    }
                });
            };

finalizeDraggableItem函数-

            function finalizeDraggableItem(draggable) {
                var parentMultiselectOptions = draggable.options.parentMultiselectOptions;
                var item = draggable.options.dataValue;

                var multiSelectItems = parentMultiselectOptions.getSelectedObjects();

                parentMultiselectOptions.setSelectedObjectValues([]);

                $timeout(function () {
                    var filteredItems = _.filter(multiSelectItems, function (i) {
                        return i[$scope.options.dataValueField] != item[$scope.options.dataValueField];
                    });

                    //re organize selection if dropped to same multiselect
                    if (parentMultiselectOptions.instanceId == $scope.options.instanceId) {
                        filteredItems.push(item);
                    }

                    parentMultiselectOptions.setSelectedObjectValues(filteredItems);

                    draggable.destroy();
                    draggable.element.remove();
                }, 500);
            };

初始化可拖动功能-

            $scope.options.initializeDraggable = function (selectedItems, isLastElement) {
                var listElements = isLastElement ? $scope.unifyMultiSelect.tagList.find('li:last-child') : $scope.unifyMultiSelect.tagList.find('li');

                for (var i = 0; i < selectedItems.length; i++) {
                    var selectedItem = selectedItems[i];
                    var element = $(_.find(listElements, function (el) {
                        return el.innerText.trim().replace(/\s+/g, " ") == selectedItem[$scope.options.dataTextField].trim().replace(/\s+/g, " ");//remove extra spaces and check
                    }));

                    if (element.length > 0) {
                        element.kendoDraggable({
                            group: "multiSelectGroup",
                            dataValue: selectedItem,
                            parentMultiselectOptions: $scope.options,
                            hint: function (element) {
                                return element.clone();
                            }
                        });
                    }
                }
            };

解决该问题。如果有人需要任何帮助，请告诉我。谢谢！

kendo多选拖放选择

1 个答案: