Функция группировки jquery tmpl с поддержкой нескольких групп - PullRequest
Новая
       15

Функция группировки jquery tmpl с поддержкой нескольких групп

2 голосов
/ 01 октября 2011

Не удалось найти ни одного примера по группировке с использованием jquery tmpl (), поэтому подумал, что я опубликую то, что я придумал (это работает), на случай, если кто-то еще попытался это сделать.

Ответы [ 2 ]

2 голосов
/ 01 октября 2011

См. Документы JQuery API для базового использования шаблонов.

Я написал расширение этой функции, которое позволяет группировать несколько категорий.
Использование:

$( Шаблон JQuery ).tmpl_sort( данные , [ опции ,] массив групп )
& Бык; Для шаблона JQuery , data и options см. Документацию tmpl API .
& Бык; массив групп должен быть массивом, состоящим из строк, которые идентифицируют группы.

Код: 

 (function($){
     $.fn.tmpl_sort = function(data, options_or_groups, array_groups){
         return $.tmpl_sort(this, data, options_or_groups, array_groups);
     }
     $.tmpl_sort = function(template, data, options_or_groups, array_groups){
         if(typeof array_groups == "undefined"){
             array_groups = options_or_groups;
             options_or_groups = void 0;
         }
         array_groups = typeof array_groups == "string" || typeof array_groups == "number" ? [array_groups] : array_groups;
         if(!(array_groups instanceof Array)) throw new TypeError("$.fn.tmpl_sort: second argument has to be a string or array");
         var groups = {};
         for(var i=0; i<array_groups.length; i++){
             (function(groupname){
                 var last;
                 groups[groupname] = function(group){
                     /* === is a strict comparison operator */
                     return last === (last=group);
                 }
             })(array_groups[i]);
         }
         return template.tmpl(data, groups, options_or_groups)
     }
  })(jQuery);

Пример на http://jsfiddle.net/gBTzU/

var Leagues = [
     { League: 1, Group: "A", Team: "France" },
     { League: 1, Group: "A", Team: "China" },
     { League: 1, Group: "B", Team: "Brazil" },
     { League: 2, Group: "A", Team: "England" },
     { League: 2, Group: "A", Team: "Scotland" },
     { League: 2, Group: "B", Team: "India" }
 ];
 $("#itemtemplate").tmpl_sort(Leagues, ["sameleague", "samegroup"]).appendTo("#lvList");
1 голос
/ 01 октября 2011 
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <style type="text/css">
        #lvList { float:left; }
        .league { background-color: #E8F6FF; }
        .group { background-color: #FEEAEB; margin-left: 10px; }
        .team { margin-left: 20px; }
    </style>
</head>
<body>
    <script id="itemtemplate" type="text/x-jquery-tmpl"> 
        {{if !$item.sameasbefore("League") }}
            <div class="league">League: ${League}</div>
        {{/if}}
        {{if !$item.sameasbefore("Group") }}
            <div class="group">Group: ${Group}</div>
        {{/if}}
        <div class="team">${Team}</div>
    </script>

    <div id="lvList"></div>

    <script type="text/javascript">
        var Leagues = [
            { League: 1, Group: "A", Team: "France" },
            { League: 1, Group: "A", Team: "China" },
            { League: 1, Group: "B", Team: "Brazil" },
            { League: 2, Group: "A", Team: "England" },
            { League: 2, Group: "A", Team: "Scotland" },
            { League: 2, Group: "B", Team: "India" }
        ];

    var grouping = [];
    $("#itemtemplate").tmpl(Leagues, {
        sameasbefore: function (field) {
            var same = false;
            if (grouping[field] === this.data[field])
                same = true;
            grouping[field] = this.data[field];
            return same;
        }
    }).appendTo("#lvList");

    </script>
</body>
</html>
...