0

注：これをこのリンクにあるJSFIDDLEに追加しました

3 つのテーブルのいずれかから行を操作し、いくつかのボタン クリックとチェックボックスを処理するための基本的な jQuery コードをいくつか作成しました。私は今、n00bのように感じています。私はこれを見て、より一般的な関数に変えることができるものがたくさんあることに気付きましたが、JS 関数の作成に精通していません。どんなポインタでも大歓迎です。

同様の機能のブロックがあるので、各ブロック タイプを単純化する方法について説明したいと思います。

  • ボタンスワップ
  • チェックリストの選択/選択解除
  • 引越しチェックリスト
  • パネルの表示/非表示

コードは次のとおりです。

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {

        $('#displayActivePanel').hide();
        $('#displayInactivePanel').hide();

        // Button event handlers to move items from/to differing tables...
        $('#TableAdminPortfolio tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var stat = tr.children('.padLeft.status').text().trim();
            var tableActiveProjects = $('#TableActiveProjects tbody');
            var tableInactiveProjects = $('#TableInactiveProjects tbody');

            tr.fadeOut(1000);
            if (stat == 'Active') {
                tableActiveProjects.prepend(tr);
            } else {
                tableInactiveProjects.prepend(tr);
            }
            tr.fadeIn(1000);
        });

        $('#TableActiveProjects tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');

            tr.fadeOut(1000);
            tableAdminPortfolio.prepend(tr);
            tr.fadeIn(1000);
        });

        $('#TableInactiveProjects tbody .buttonSwap').live('click', function () {
            var tr = $(this).closest('tr');
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');

            tr.fadeOut(1000);
            tableAdminPortfolio.prepend(tr);
            tr.fadeIn(1000);
        });

        $('#masterCheckBoxAdminPortfolio').live('change', function () {
            var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined;

            var list = $('#TableAdminPortfolio .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });
        $('#TableActiveProjectsCheckbox').live('change', function () {
            var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined;

            var list = $('#TableActiveProjects .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });
        $('#TableInactiveProjectsCheckbox').live('change', function () {
            var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined;

            var list = $('#TableInactiveProjects .CheckBoxProjects');
            list.each(function () {
                this.checked = isChecked;
            });
        });

        $('#TableAdminPortfolioRemoveAllChecked').live('click', function () {
            var list = $('#TableAdminPortfolio .CheckBoxProjects');
            list.each(function () {
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    var tr = $(this).closest('tr');
                    var stat = tr.children('.padLeft.status').text().trim();
                    var tableActiveProjects = $('#TableActiveProjects tbody');
                    var tableInactiveProjects = $('#TableInactiveProjects tbody');

                    tr.fadeOut(1000);
                    if (stat == 'Active') {
                        tableActiveProjects.prepend(tr);
                    } else {
                        tableInactiveProjects.prepend(tr);
                    }
                    tr.fadeIn(1000);
                }
            });
        });
        $('#TableActiveProjectsAddAllChecked').live('click', function () {
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');
            var list = $('#TableActiveProjects .CheckBoxProjects');
            list.each(function () {
                var tr = $(this).closest('tr');
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    tr.fadeOut(1000);
                    tableAdminPortfolio.prepend(tr);
                    tr.fadeIn(1000);
                }
            });
        });
        $('#TableInactiveProjectsAddAllChecked').live('click', function () {
            var tableAdminPortfolio = $('#TableAdminPortfolio tbody');
            var list = $('#TableInactiveProjects .CheckBoxProjects');
            list.each(function () {
                var tr = $(this).closest('tr');
                var isChecked = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
                if (isChecked) {
                    tr.fadeOut(1000);
                    tableAdminPortfolio.prepend(tr);
                    tr.fadeIn(1000);
                }
            });
        });

        $('#showActivePanel').click(function () {
            $('#displayActivePanel').show();
        });
        $('#hideActivePanel').click(function () {
            $('#displayActivePanel').hide();
        });
        $('#showInactivePanel').click(function () {
            $('#displayInactivePanel').show();
        });
        $('#hideInactivePanel').click(function () {
            $('#displayInactivePanel').hide();
        });
    });
}
</script>
4

1 に答える 1

0

HTML がないと、何かをテストするのはまったく困難です。しかし、私は挑戦が好きで退屈しているという理由だけで、これは完全にその場で翼を広げています。少なくとも、関数の開始点を提供する必要があります...アイテムが関数に渡される方法と、関数がそれらのパラメーターを使用する方法。

$(document).ready(function () {
function hideIt($item) {
    $item.hide();
}

function prependPortfolio($tr,$portfolio){
    $tr.fadeOut(1000);
    $portfolio.prepend($tr);
    $tr.fadeIn(1000);
}

function setCheck($check,$list){
    $list.each(function(){
        $(this).prop('checked',$check);
    }
}

function moveItems($tr,$stat,$active,$inactive){
    $tr.fadeOut(1000);
    if ($stat == 'Active') {
        $active.prepend($tr);
    } else {
        $inactive.prepend($tr);
    }
    $tr.fadeIn(1000);
}

function addAllChecked($check,$list){
    $list.each(function () {
        var $tr = $(this).closest('tr'),
            $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
        if ($check) {
            prependPortfolio(tr,tableAdminPortfolio);
        }
    });
}

hideIt($('#displayActivePanel'));
hideIt($('#displayInactivePanel'));

// Button event handlers to move items from/to differing tables...
$('#TableAdminPortfolio tbody .buttonSwap').live('click', function () {
    var tr = $(this).closest('tr'),
        stat = tr.children('.padLeft.status').text().trim(),
        tableActiveProjects = $('#TableActiveProjects tbody'),
        tableInactiveProjects = $('#TableInactiveProjects tbody');

    moveItems(tr,stat,tableActiveProjects,tableInactiveProjects);
});

$('#TableActiveProjects tbody .buttonSwap').on('click', function () {
    var tr = $(this).closest('tr'),
        tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody');

    prependPortfolio(tr,tableAdminPortfolio);
});

$('#TableInactiveProjects tbody .buttonSwap').on('click', function () {
    var tr = $(this).closest('tr'),
        tableAdminPortfolio = $('#TableAdminPortfolio').find('tbody');

    prependPortfolio(tr,tableAdminPortfolio);
});

$('#masterCheckBoxAdminPortfolio').on('change', function () {
    var isChecked = $('#masterCheckBoxAdminPortfolio:checked').val() != undefined,
        list = $('#TableAdminPortfolio .CheckBoxProjects');

    setCheck(isChecked,list);
});
$('#TableActiveProjectsCheckbox').on('change', function () {
    var isChecked = $('#TableActiveProjectsCheckbox:checked').val() != undefined,
        list = $('#TableActiveProjects .CheckBoxProjects');

    setCheck(isChecked,list);
});
$('#TableInactiveProjectsCheckbox').on('change', function () {
    var isChecked = $('#TableInactiveProjectsCheckbox:checked').val() != undefined,
        list = $('#TableInactiveProjects .CheckBoxProjects');

    setCheck(isChecked,list);
});

$('#TableAdminPortfolioRemoveAllChecked').on('click', function () {
    var $list = $('#TableAdminPortfolio .CheckBoxProjects');

    $list.each(function () {
        var $check = $(this).closest('td').children('.CheckBoxProjects:checked').val() != undefined;
        if ($check) {
            var tr = $(this).closest('tr'),
                stat = tr.children('.padLeft.status').text().trim(),
                tableActiveProjects = $('#TableActiveProjects tbody'),
                tableInactiveProjects = $('#TableInactiveProjects tbody');

            moveItems(tr,stat,tableActiveProjects,tableInactiveProjects);
        }
    });
});

$('#TableActiveProjectsAddAllChecked').on('click', function () {
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'),
        list = $('#TableActiveProjects .CheckBoxProjects');

    addAllChecked(tableAdminPortfolio,list);
});

$('#TableInactiveProjectsAddAllChecked').on('click', function () {
    var tableAdminPortfolio = $('#TableAdminPortfolio tbody'),
        list = $('#TableInactiveProjects .CheckBoxProjects');

    addAllChecked(tableAdminPortfolio,list);
});

$('#showActivePanel').on('click',function(){
    $(this).toggle();
});

$('#showInactivePanel').on('click',function(){
    $(this).toggle();
});
});

コピーして貼り付けて移動しただけなので、これは機能するはずですが、それに関する保証はありません。私が実際に行って設定方法を変更したのは、各変数を個別に宣言する代わりに、1 つの大きな宣言でコンマで区切ることができるようにしたことだけです。

于 2013-02-27T17:12:36.010 に答える