0

在下面的示例中，我想对内部列表而不是其他列表进行排序。在我的实时示例中，列表是由分组列表功能生成的，所以我不能给每个列表一个 id 并创建一个单独的可排序对象。如何使用 kendo 原生 listview 分组创建一组可排序的内部列表？

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
    <base href="http://demos.telerik.com/kendo-ui/sortable/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
  <ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
    <li>Happy
      <ul>
    <li>Papercut <span>3:04</span></li>
    <li>One Step Closer <span>2:35</span></li>
    <li>With You <span>3:23</span></li>
    <li>Points of Authority <span>3:20</span></li>
    <li>Crawling <span>3:29</span></li>
    </ul>
    </li>
    <li>Sad
   <ul>
      <li>Runaway <span>3:03</span></li>
    <li>By Myself <span>3:09</span></li>
    <li>In the End <span>3:36</span></li>
    <li>A Place for My Head <span>3:04</span></li>
    <li>Forgotten <span>3:14</span></li>
    <li>Cure for the Itch <span>2:37</span></li>
    <li>Pushing Me Away <span>3:11</span></li>
    </ul>
    </li>
  </ul>
</div>
<style>
    .playlist {
        margin: 30px auto;
        padding: 10px;
        width: 300px;
        background-color: #f3f5f7;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,.1);
    }
    .playlist li {
        list-style-type: none;
        position: relative;
        padding: 6px 8px;
        margin: 0;
        color: #666;
        font-size: 1.2em;
        cursor: move;
    }
    .playlist li:hover {
        background-color: #dceffd;
    }
    .playlist li span {
        position: absolute;
        right: 5px;
    }
    li.hint {
        display: block;
        padding: 10px;
        width: 200px;
        background-color: #52aef7;
        color: #fff;
    }

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

    li.hint span {
        color: #fff;
    }

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

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.placeholder = function(element) {
                return element.clone().addClass("placeholder").text("drop here");
            };
            $scope.hint = function(element) {
                return element.clone().addClass("hint");
            };
        })
</script>


</body>
</html>

http://jsbin.com/qubuguh/edit?html，输出

4

1 回答 1

0

这可以通过使用描述子 li 元素的过滤器来完成。例如： 

<ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">
于 2016-04-08T01:08:33.673 回答