0

<ul>mysql データベースからリストした長い、少なくとも 5 つのレベルのリストがあります。ユーザーは、項目を並べ替えたり、1 つの項目をあるリストから別のリストにドロップしたり、名前を変更したり、削除したりすることができます。次に、保存します。

リストには PHP を使用し、アイテムの再配置には Javascript/Jquery を使用しています。

私の質問は、ul li 要素を配列に分割する最良の方法は何ですか? すべての要素の親 ID を持つことが重要です。

非常に単純化されたサンプル コード:

<a href="#">Parent item name</a>
<ul data-level='0'>
    <li>
        <a href="#">Child item name</a>
        <ul data-level='1'>
            <li><a href="#">2nd level item 1</a></li>
            <li><a href="#">2nd level item 2</a></li>
            <li><a href="#">2nd level item 3</a></li>
            <li><a href="#">2nd level item 4</a></li>
        </ul>
    </li>
</ul>

その結果、「第 2 レベルの項目 2」には親の「子項目名」が必要です (ID は名前の横にある非表示の入力フィールドに格納されます)。

ユーザーは追加のレベルも追加できるため、リストは任意のレベルにすることができます。コードは 15 レベルのリストも処理する必要があります。

<li>javascript を介してすべての要素に配置された非表示の入力の値を取得することを考えていました。JQuery は子の数を取得できます。しかし、それは最善の解決策ではないようです。

4

2 に答える 2

0

考えられる解決策は次のとおりです。

HTML：

<a href="#">Parent item name</a>
<ul class="0" id="level_0_count_0" data-level='0'>
<li>
    <a href="#">Child item name</a>
    <ul class="1" id="level_1_count_0" data-level='1'>
        <li><a href="#">ul 0 2nd level item 1pppppppp</a></li>
        <li><a href="#">ul 0 2nd level item 2pppppppp</a></li>
        <li><a href="#">ul 0 2nd level item 3pppppppp</a></li>
        <li>
            <a href="#">ul 0 2nd level item 4</a>
            <ul class="2" id="level_2_count_0" data-level='1'>
                <li><a href="#">ul 2 3nd level item 1cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 2cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 3cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 4cccccccc</a></li>
            </ul>
        </li>
    </ul>
</li>

<li>
    <a href="#">Child item name</a>
    <ul class="1" id="level_1_count_1" data-level='1'>
        <li><a href="#">ul 1 2nd level item 1</a></li>
        <li><a href="#">ul 1 2nd level item 2</a></li>
        <li><a href="#">ul 1 2nd level item 3</a></li>
        <li><a href="#">ul 1 2nd level item 4</a></li>
    </ul>
</li>

JavaScript：

 var $j = jQuery.noConflict();
$j(document).ready(function() {
var temp = new Array();
find_ul(0, temp);
});


function find_ul(parent_class, new_object_, level_count){
if( $j('.' + parent_class + ' > li > ul').length == 0){
    return new_object_;
}else{
    var current_objs = $j('.' + parent_class + ' > li > ul');
    var i = 0;
    parent_class++;
    $j.each(current_objs, function() {
            var current_ul_id = '';
            var object_lis =  $j('ul#level_' + parent_class + '_count_' + i + ' > li');
            var b = 0;
            var tempora = new Array();
            var current_ul_id = $j(this).attr('id');
            alert(current_ul_id);

           $j.each(object_lis, function() {
               tempora[b] = $j(this).html();
               b++;
               alert($j(this).html());

            });

            new_object_[i] = {ul_id: current_ul_id, lis:tempora};
            i++;

    });
}
   find_ul(parent_class, new_object_);
}

あなたはそれを見る/テストすることができます：http： //jsfiddle.net/BsDpY/4/

これにより、ul/liの各レイヤーのレベルを持つ配列が生成されます

したがって、最初に最初のレベル（親）を通過し、次にその子ULを通過します。

お役に立てば幸いです。

于 2012-12-01T02:01:21.527 に答える
0

IMHO送信ボタンがクリックされると、jqueryはリストを繰り返してJSONオブジェクトを作成し（各メンバーには親の値があり、ルートは0）、AJAXで送信できます。

于 2012-11-30T13:26:29.460 に答える