Question

我使用的是kendo可排序数据源是kendo可观察数组，当我们对div进行排序时，我们正在更改事件中更新数组对象，但数组正在更新，但ui没有更新。你可以帮我吗。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>
<body>
    <div id="example">
        <div id="playlist">
            <ul id="sortable-basic" data-bind="source:items" data-template="template">
            </ul>
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <li class="sortable">#:value#<span>#:time#</span></li>
        </script>
        <script>
            var data;
            $(document).ready(function () {

                data = kendo.observable({
                    items: new kendo.data.ObservableArray([
                        { value: 'Papercut', time: '3:12' },
                        { value: 'One Step Closer ', time: '4:10' },
                        { value: 'With You ', time: '5:00' },
                        { value: 'Points of Authority ', time: '2:59' }]
                        )
                });
                kendo.bind($('#playlist'), data);

                $("#sortable-basic").kendoSortable({
                    change: function (e) {
                        var daa = data.items.splice(e.oldIndex, 1);
                        data.items.splice(e.newIndex, 0, daa[0]);                        
                    }
                });
            });
        </script>
        <style>
            #example
            {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            #playlist
            {
                margin: 30px auto;
                width: 300px;
                background-color: #f3f5f7;
                border-radius: 4px;
                border: 1px solid rgba(0,0,0,.1);
            }

            #playlist-title
            {
                height: 80px;
                border-radius: 4px 4px 0 0;
                border-bottom: 1px solid rgba(0,0,0,.1);
            }

                #playlist-title span
                {
                    display: none;
                }

            #sortable-basic
            {
                padding: 0;
                margin: 0;
            }

            li.sortable
            {
                list-style-type: none;
                padding: 6px 8px;
                margin: 0;
                color: #666;
                font-size: 1.2em;
            }

                li.sortable:last-child
                {
                    border-bottom: 0;
                    border-radius: 0 0 4px 4px;
                }

                li.sortable span
                {
                    display: block;
                    float: right;
                    color: #666;
                }

                li.sortable:hover
                {
                    background-color: #dceffd;
                }

            li.hint
            {
                display: block;
                width: 200px;
                background-color: #52aef7;
                color: #fff;
            }

                li.hint:after
                {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-bottom: 6px solid transparent;
                    border-left: 6px solid #52aef7;
                    position: absolute;
                    left: 216px;
                    top: 8px;
                }

                li.hint:last-child
                {
                    border-radius: 4px;
                }

                li.hint span
                {
                    color: #fff;
                }

            li.placeholder
            {
                background-color: #dceffd;
                color: #52aef7;
                text-align: right;
            }
        </style>
    </div>
</body>
</html>

Answer 1

我想我发现了你的问题。它似乎是更改功能，只需删除它，您就可以对列表进行排序。

Answer 2

我没有使用过kendoSortable，但我认为它已经维护了数组排序，因为你已经将数组绑定到了kendoSortable。这是绑定的目的，它使数据和元素保持同步。您在更改事件中所做的只是撤消绑定刚刚执行的工作，即对元素和绑定数组进行排序。

Answer 3

根据telerik， https://www.telerik.com/forums/sortable-and-moving-items-in-observable-arrays

您必须手动执行此操作，并且将sortable附加到数组不会自动执行任何操作。因此，您所做的是正确的，但是即使您的更改正确地以可观察的阵列形式显示，也不会显示在屏幕上。

因此，我们必须触发清除和更改事件，以将UI与数组同步。可能有一种更好的方法来调用同步，而不必清除数组，但这对我有用。

这是一个示例代码，我们在其中清除数组，然后重新插入以解决问题。

    $("#sortable-basic").kendoSortable({
                change: function (e) {
                    var daa = data.items.splice(e.oldIndex, 1);
                    data.items.splice(e.newIndex, 0, daa[0]);
                    var copiedArray = data.items.splice(0, data.items.length);
                    $.each(copiedArray,
                        function (index, item) {
                            data.items.push(item);
                        });

                }
            });

kendo可以使用kendo可观察数组进行排序

3 个答案: