jQuery сортировка входов - PullRequest
Новая
       21

jQuery сортировка входов

3 голосов
/ 27 февраля 2012

У меня есть таблица с данными, и мне нужно сделать ее сортируемой. После сортировки каждой строке необходимо получить изменения в ее идентификаторе tr, входном идентификаторе и атрибутах имени.

Здесь я сделал это только для атрибута name. Но все же при сохранении данных эти строки не в порядке, если выполняется более 1 сортировки. Возможно, я что-то упустил.

И есть ли способ изменить все эти атрибуты одновременно? 

    $( "#languages > tbody" ).sortable({
        items: 'tr',
        update: function(event, ui) {
            var result = $('#languages > tbody').sortable('toArray');
            for(i=0; i<result.length; i++) {
                $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+result[i]+'][language]');
            }
            for(i=0; i<result.length; i++) {
                $('#'+i).attr('id', result[i]);
                $('#Setting3Value'+i+'Language').attr('id', 'Setting3Value'+result[i]+'Language');
            }
        }
    });

И HTML: 

<table id="languages">
    <tbody>
                                        <tr id="0">
                        <td><div class="input text"><input type="text" id="Setting3Value0Language" rel="" value="English" name="data[Setting][3][value][0][language]"/></div></td>
                        <td><div class="input text"><input type="text" id="Setting3Value0Alias" rel="" value="eng" name="data[Setting][3][value][0][alias]"/></div></td>
                        <td/>
                    </tr>
                                        <tr id="1">
                        <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="French" name="data[Setting][3][value][1][language]"/></div></td>
                        <td><div class="input text"><input type="text" id="Setting3Value1Alias" rel="" value="fre" name="data[Setting][3][value][1][alias]"/></div></td>
                        <td/>
                    </tr>
 <!-- and so on ... -->
    </tbody>
</table>

Также возможно установить для id строк таблицы значение name-1, например.

РЕДАКТИРОВАТЬ: Мне удалось сделать то, что мне нужно, используя временные значения для id, потому что это становилось довольно грязным. Я не думаю, что это лучшее решение, так что с нетерпением жду. Также каждый вход должен быть в списке.

Вот моя функция обновления: 

            for(i=0; i<result.length; i++) {
                $('#'+result[i]).attr('id', 'temp-'+i);
                $('#Setting3Value'+result[i]+'Language').attr('id', 'temp-Setting3Value'+i+'Language');
                $('#Setting3Value'+result[i]+'Alias').attr('id', 'temp-Setting3Value'+i+'Alias');
            }

            for(i=0; i<result.length; i++) {
                $('#temp-'+i).attr('id', i);
                $('#temp-Setting3Value'+i+'Language').attr('id', 'Setting3Value'+i+'Language');
                $('#temp-Setting3Value'+i+'Alias').attr('id', 'Setting3Value'+i+'Alias');

                $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+i+'][language]');
                $('#Setting3Value'+i+'Alias').attr('name', 'data[Setting][3][value]['+i+'][alias]');
            }

1 Ответ

0 голосов
/ 27 февраля 2012

Сортировка элементов HTML, пробовали ли вы следующее Плагин JQuery http://tinysort.sjeiti.com/

Я использовал это соединение с сортируемым пользовательским интерфейсом JQuery. Это очень мощная и полезная библиотека для сортировки ваших элементов по определенным атрибутам.

надеюсь, это поможет.

РЕДАКТИРОВАТЬ: (для обновления идентификатора tr при перемещении элемента в сортируемый контейнер) 

<script type ="text/javascript">
    $(function () {
        $("#languages > tbody").sortable({
            stop: function (e, ui) {
                $(this).children("tr").each(function () {
                    $(this).attr("id", $(this).index());
                });
            }
        });
    });
</script>
...