8

いくつかの異なる要素を含むリストがあります。すべてを選択可能にしたいのですが、グループ内のみです。お気に入り：

<ul>
<li rel="group1">Item 1</li>
<li rel="group1">Item 2</li>
<li rel="group2">Item 3</li>
<li rel="group2">Item 4</li>
<li rel="group3">Item 5</li>
<li rel="group3">Item 6</li>
</ul>

動作する可能性のあるものを書きましたが、現在の要素の rel 属性が最初に選択したものと異なる場合、現在の選択をキャンセルする方法がわかりません。

    var selected = null;

    $( "#selectable" ).selectable({
        selecting: function(event, ui) {
            if (!selected)
                selected = $(ui.selecting).attr('rel');

            if (selected != $(ui.selecting).attr('rel')){
               // cancel this selection
            }
        }
    });
4

4 に答える 4

1

このオプションを使用して、filter特定のリスト項目のみを選択できるようにすることができます。

私はあなたのためにこのデモを用意しました、フィルターの問題は1つだけでした。selectingハンドラー内から有効なアイテムを変更する場合は機能しません。そこで、ハンドラーに小さな修正を追加しましたstop。ここでは、有効になっていないアイテムから選択を削除します。

スクリプトは次のようになります。

var locked = false;

function enableAll() {
    $('li').addClass('enabled');
    locked = false;
}

$("#selectable").selectable({

    // allow only enabled items to be selected
    filter: '.enabled',

    selecting: function(event, ui) {

        if (!locked) {

            var group = $(ui.selecting).attr('rel');

            // disable all items belonging to other groups
            $("#selectable li[rel!='" + group + "']").removeClass('enabled');

            locked = true;
        } 

    },

    stop: function() {

        // this fixes selectable behavior 
        // (it ignores dynamically added filter while selecting)
        $(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');

        // if no item is selected, then enable all groups
        if($(this).find('.ui-selected').length == 0) {
            enableAll();
        };
    }

});

// initialize
enableAll();​
于 2012-10-04T08:51:29.860 に答える
0 
$(function() {
            var message = $('#message');
            var tr = $('#tbl').find('tr');
            tr.bind('click', function(event) {
                var values = '';
                tr.removeClass('row-highlight');
                var tds = $(this).addClass('row-highlight').find('td');

                $.each(tds, function(index, item) {
                    values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
                });
                message.html(values);

            });
        });

マウスオーバー：

    var message = $('#message');
    var tr = $('#tbl').find('tr');

    tr.hover(
         function() {  // mouseover
             $(this).addClass('row-highlight');
             var values = '';
             var tds = $(this).find('td');

             $.each(tds, function(index, item) {
                 values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
             });
             message.html(values);
         },
         function() {  // mouseout
             $(this).removeClass('row-highlight');
             message.html('');
         }
    );
});

カスタムTD：

<table id ="table1">
    <th>MAHDI</th>
    <th>PISHGUY</th>
    <tr>
        <td id = "1">username</td>
        <td id = "2">666</td>
    </tr>
</table>

$('#table1 tr').each(function (){
    var vara = $(this).find('#2').html();
    if(vara != null)
        alert($(this).find('#2').html());
});

また：

<tr class="rowid">
    <td class="user">A</td>
    <td class="id">B</td>
</tr>
    $(document).ready(function(){ 
        rows = $(".rowid").each(function(index,value){
                user = $(value).children(".user").text();
                id = $(value).children(".id").text();
                alert(id+'\t'+user);
        });
    });
于 2012-11-04T10:51:55.927 に答える
0

私は似たようなことをしなければなりませんでした。私が最近行ったプロジェクトでは、複数のセクションが行に分割され、各行には3つのセクションまたは列がありました。列1を位置1から位置3にソートした場合、他のすべての行がそれに応じて列をソートするように機能する機能が必要でした。これは、並べ替えが完了すると、並べ替えをトリガーした他のすべてのリレーショナル列を取得して再配置するアニメーション関数を呼び出すことで実現しました。ここでも同じことを行うことができます。または、各グループの周りにコンテナを追加してリストを再構築し、コンテナで並べ替えて、コンテナ内の並べ替え機能を無効にすることもできます。したがって、グループ1はリストアイテムになりますが、並べ替えると、単一のエンティティとして並べ替えられます。うまくいけば、これがお役に立てば幸いです。ハッピーコーディング！

于 2013-01-25T00:30:19.587 に答える
0

このFIDDLEを確認してください-グループごとの選択。

HTML

<ul id="selectable">
    <li class="ui-widget-content" rel="group1">Item 1</li>
    <li class="ui-widget-content" rel="group1">Item 2</li>
    <li class="ui-widget-content" rel="group1">Item 3</li>
    <li class="ui-widget-content" rel="group2">Item 4</li>
    <li class="ui-widget-content" rel="group2">Item 5</li>
    <li class="ui-widget-content" rel="group3">Item 6</li>
    <li class="ui-widget-content" rel="group3">Item 7</li>
</ul>​

jquery

$("#selectable").selectable({
    selected: function (event, ui) {
        var gr1Count = 0;
        var gr2Count = 0;
        var gr3Count = 0;
        $(".ui-selected").each(function () {
            // Group 1
            if ('group1' == $(this).attr('rel')) {
                gr1Count++;
            }
            if (gr1Count > 1) {
                $(this).removeClass('ui-selected')
            }
            // Group 2
            if ('group2' == $(this).attr('rel')) {
                gr2Count++;
            }
            if (gr2Count > 1) {
                $(this).removeClass('ui-selected')
            }
            // Group 3
            if ('group3' == $(this).attr('rel')) {
                gr3Count++;
            }
            if (gr3Count > 1) {
                $(this).removeClass('ui-selected')
            }
        });
    }
});
于 2012-10-03T09:12:08.550 に答える