Question

我有一个多选列表，作为标签列表的持有者。我似乎无法弄清楚如何正确获取正在更改的项目的值并与change-event一起传递。这是我的剑道多选：

        @(Html.Kendo().MultiSelect()
          .Name("tags")
          .Placeholder("No tags selected for this unit")
          .BindTo(new SelectList(Model.TagsAvailable))
          .Events(e => e
                    .Select("select")
                    .Change("change"))
          .Value(Model.TagsSelected.ToArray())
          )

这是我的js-methods：

        function select(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var param = dataItem.Text;
            var url = '/UnitDetails/TagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

        function change(e) {
            var dataItem = this;
            var param = dataItem.element.context.innerText;
            var url = '/UnitDetails/UnTagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

我的问题是，我觉得param的分配只是快速而肮脏。当然，必须有其他更正确的方法来解决这个问题吗？

Answer 1

了解变化并不容易（afaik）。所以，我们自己来做吧。

首先，我将使用以下函数保存旧值。

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}

其中multi是我们作为参数传递给函数的多选（因此您可以将函数用于多个multiselects）。

然后，您需要实施change，如下所示：

change    : function (e) {
    // Retrieve previous value of `multiselect` saved using previous function
    var previous = this._savedOld;
    // These are current values.
    var current = this.value();
    // Let's save it for the next time
    saveCurrent(this);

    // The difference between previous and current are removed elements
    var diff = $(previous).not(current).get();
    console.log("removed", diff);

    // The difference between current and previous, are added elements
    diff = $(current).not(previous).get();
    console.log("added", diff);
}

在此处运行示例http://jsfiddle.net/OnaBai/MapVN/

Answer 2

很好的回答OnaBai！非常有用和有用。

我有同样的尼克拉问题。但是，我需要在dataBound事件中“保存当前值”。它可以工作（记录更改的值）。

如果您开始删除某个项目，则会失败，因为该功能会将“更改”识别为“项目添加”。

这就是我做的事情

function dataBound(ev) {

        saveCurrent(this);
    }

    function saveCurrent(multi) {
        multi._savedOld = multi.value().slice(0);
    }

    function change(ev) {


        var previous = this._savedOld;

        var current = this.value();

        saveCurrent(this);

        var diff = $(previous).not(current).get();
        console.log("removed", diff);

        var removedSkill = diff;

        console.log("removedSkills", removedSkill);

        diff = $(current).not(previous).get();
        var addedSkill = diff;
        console.log("added", diff);
        console.log("addedSkills", addedSkill);

        if (addedSkill.length > 1 || removedSkill.length > 1) {

            if (addedSkill.length > 1) {

                addedSkill = addedSkill[addedSkill.length - 1];
                alert("Added skill code: " + addedSkill.toString());
            }

            if (removedSkill.length > 1) {
                removedSkill = removedSkill[removedSkill.length - 1];
                alert("Removed skill code: " + removedSkill.toString());
            }
        }
        else {
            if (addedSkill.length > 0) {
                alert("Added skill code: " + addedSkill.toString());
            }
            if (removedSkill.length > 0) {
                alert("Removed skill code: " + removedSkill.toString());
            }
        }


        $.ajax({
            url: "SomeUrl",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill })
        });
    }

再次感谢！

伊万

如何使用Kendo UI在多选中获取更改的元素？

2 个答案: