0

次のようなディレクトリ リストを作成しようとしています。

ユーザーはアイテムを追加できるため、ユーザーが O-item-1 を追加すると、「O」の大きな文字が生成され、アイテムが要素内に入り、同じ文字で始まるアイテムがさらに追加されるとします。同じ O 文字グループ内。

データを取得するためにWebサービスを使用していますが、次のようになります。

これは、データを追加するコンテナーです。

<div class="Listitem-section-template">

</div>

これは、現時点でコンテナーにデータを入力する方法です。

<script id="Listitem-template" type="text/html">
<div class="Listitem-section-section">
        <div class="Listitem-section-title">A</div> <-- Hardcoded   
        <div class="Listitem-section-container">
            <div class="Listitem-section-item">
                <div class="Listitem-section-item-title">
                    <a href="{{= Url}}" >{{= Title}}</a>   
                </div>        
            </div>    
        </div>
    </div>
    <div class="processlinks-line"></div>
</script>

これは get 関数であり、データを入力する方法は次のとおりです。

 get: function(web) {
            AST.Utils.JSON.get(_spPageContextInfo.webServerRelativeUrl+"/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null, AST.Listitem.renderListitem);
        },
renderListitem: function(data) {
            $("#Listitem-template").tmpl(data["ListItemResults"]).prependTo(".ListItem-section-template");
    }

これまでのところ、私はこれを行っています：

<script type="text/javascript">
    var filter = new Array();
    filter["#"] = "09"; //for numbers
    filter["A"] = "A";
    filter["B"] = "B";
    filter["C"] = "C";
    filter["D"] = "D";
    filter["E"] = "E";
    filter["F"] = "F";
    filter["G"] = "G";
    filter["H"] = "H";
    filter["I"] = "I";
    filter["J"] = "J";
    filter["K"] = "K";
    filter["L"] = "L";
    filter["M"] = "M";
    filter["N"] = "N";
    filter["O"] = "O";
    filter["P"] = "P";
    filter["Q"] = "Q";
    filter["R"] = "R";
    filter["S"] = "S";
    filter["T"] = "T";
    filter["U"] = "U";
    filter["V"] = "V";
    filter["W"] = "W";
    filter["X"] = "X";
    filter["Y"] = "Y";
    filter["Z"] = "Z";
    filter["Å"] = "AA";
    filter["Ä"] = "AE";
    filter["Ö"] = "OE";

    $(document).ready(function () {
        ICC.ProcessDocumentLinks.get();

    });
</script>

配列を使用してこのようなすべてのセレクターを作成し、それらを非表示にすることを考えていました:

<div id="Listitem-section-section-#" class="Listitem-section hidden-section">..</div>
<div id="Listitem-section-section-A" class="Listitem-section hidden-section">..</div> 
<div id="Listitem-section-section-B" class="Listitem-section hidden-section">..</div>
<div id="Listitem-section-section-C" class="Listitem-section hidden-section">..</div>
etc..

最初の文字がセレクターと一致する場合は、内部の項目を埋めてから表示しますか?

これをスムーズに達成するためのヒントやガイダンスはありますか?

どんな種類の助けも大歓迎です！

4

1 に答える 1

1

これを試して！http://jsbin.com/aMElAba/1/edit

<div class="letter-list">
</div>

<button>Add new</button>

<script>

$('button').click(function () {
    var title = prompt("Enter the name:");
    if (!title.length) return;
    var letter = title.substr(0, 1).toLowerCase();

    var list = $('.letter-list');
    var section = list.children('[data-letter="'+letter+'"]');
    if (!section.length) {
        var section = $('<div data-letter="'+letter+'"></div>');
        if (!list.children().length) {
            list.append(section);
        } else {
            // find right element so list is sorted
            section.insertAfter(list.children()[0]);
        }
    }

    var item = $('<span>'+title+'</span>');
    if (!section.children().length) {
        section.append(item);
    } else {
        // find right element so list is sorted
        item.insertAfter(section.children()[0]);
    }

});

</script>

<style>
    .letter-list {
        width:200px;
        min-height:100px;
        background:#eef;
        margin:20px auto;
        padding:10px;
    }
    [data-letter] {
        background:#efe;
        margin:7px;
    }
    [data-letter]:before {
        content:attr(data-letter);
        font-size:30px;
        margin:7px;
        float:left;
    }
    span {
        display:block;
    }
</style>
于 2013-10-07T16:47:56.060 に答える