Создание списка для сортировки в ASP.NET MVC с использованием jquery - PullRequest
Новая
       4

Создание списка для сортировки в ASP.NET MVC с использованием jquery

0 голосов
/ 20 июня 2011

Я пытаюсь выяснить, как реализовать сортировку jquery ..

У меня есть страница с кучей атрибутов, сгруппированных по категориям, например:

  • Категорияа
    • attribute1
    • attribute2
    • Attribute3
    • Attribute4
  • CategoryB
    • Attribute5
    • Attribute6
    • Attribute7
    • Attribute8
  • CategoryC
    • Attribute9
    • Attribute10
    • Attribute11
    • Атрибут12

Конечным решением было бы иметь возможность сортировать все; сортируйте родителей (категории), сортируйте атрибуты (дочерние элементы) и перемещайте атрибуты между категориями с помощью Drag-And-Drop! .... Но я предполагаю, что сейчас это растягивается ..

Таким образом, было бы неплохо начать с сортировки атрибутов в каждой категории с помощью Drag-And-Drop. Я смотрел на jquery sortable, который, кажется, делает это, но как мне это реализовать? Полагаю, мне нужен один скрипт для каждой категории ...

Примерно так: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

ASP.NET 4, EF 4, ASP.NET MVC 3, виды Razor ...

Вот с чем мне нужно работать: 

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>ArrangeAttributesViewModel</legend>
        @foreach (var _category in Model.AllAttributesForCheckBoxList.AttributeList)
        {
            <p>
            </p>
            <p>
            </p>
            <div id="@_category.CategoryName">
                @_category.CategoryName
                <ul>
                    @foreach (var item in _category.AttributesList)
                    {
                        <li id="@item.Priority.ToString()">
                            @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                            @(" " + item.AttributeTitle)
                        </li>
                    }
                </ul>
            </div>
        }
        <p>
            @Html.ActionLink("Create New", "Create")
        </p>
        <p>
        </p>
        <p>
            <input type="submit" value="Save Changes" />
        </p>
    </fieldset>
}

Есть идеи? Любая помощь очень ценится!

Ответы [ 2 ]

2 голосов
/ 20 июня 2011

Вам не нужно перебирать их, но использование класса для элементов ul поможет их различить. Использование containment parent для ограничения их перемещения родительским элементом может сделать намерение более понятным, но если вы не укажете опцию connectWith, они должны остаться в своих соответствующих списках. Смотрите простой пример на http://jsfiddle.net/R4afy/

    <div id="@_category.CategoryName">
        @_category.CategoryName
        <ul class="sortable-container">
            @foreach (var item in _category.AttributesList)
            {
                <li id="@("P" + item.Priority.ToString())">
                    @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                    @(" " + item.AttributeTitle)
                </li>
            }
        </ul>
    </div>

<script type="text/javascript">
     $(function() {
          $('.sortable-container').sortable({
              containment: 'parent'
          });
     });
</script>

Примечание. Это не относится к сохранению выбранного порядка сортировки. Для этого вам понадобится дополнительный код, выходящий за рамки заявленной проблемы. Если только возможность сортировки не поможет пользователю идентифицировать элементы на этой странице, я думаю, вы найдете запись порядка очень важной.

0 голосов
/ 20 июня 2011

Не для моего собственного рога, но я думаю, что плагин, который я написал, как раз подходит для того, что вы пытаетесь сделать. Он позволяет сортировать списки в зависимости от атрибутов данных HTML, поэтому вам, возможно, придется немного подправить разметку, но в целом я думаю, что это то, что вы ищете.

https://github.com/jszpila/jquery.listSorter

...