jquery tmpl grouping function with support for multiple groups
Couldnt find an开发者_运维知识库y example on grouping using jquery tmpl() so thought id post what I came up with (that works) in case anyone else was trying to do it.
See the JQuery API docs for the basic usage of templates.
I've written an extension to this function, which allows multiple categories to be grouped.
Usage:
$(JQuery template).tmpl_sort(data,[options,] array of groups)
• For JQuery template, data and options, see the tmpl API documentation.
• array of groups should be an array consisting of strings which identify the groups.
Code:
(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);
Example at 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");
<!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>
加载中,请稍侯......
精彩评论