0

I am trying to create a Directory listing that looks like this:

Users can add items, so lets say that if user now add O-item-1 a Big letter of "O" should get generated and also the item should get inside the element and if more items that start with same letter it should get added in same O-letter group.

I am using a webservice to get the data and it looks like this:

This the container that I will append data to:

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

</div>

This is how I fill the container with data at the moment:

<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>

This is the get function and how I fill it with data:

 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");
    }

and so far I have done this:

<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>

I was thinkin of creating all selectors like this using the array and have them hidden:

<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..

and the fill the items inside if the first letter match with the selectors and then show it?

Anyone have any tips or guidance on how I can accomplish this in a smooth way?

Any kind of help is appreciated!

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 回答