jQuery Repeater 数据绑定插件

实现类似这样的数据绑定：

 

 

Repeater
 1/**//*-------------------------------------------------------------------------------------------------------
 2* Repeater v1.0 - 2009.7.16 
 3    an Repeater Data Binding jQuery Plugin
 4
 5    by LiKang
 6    likang2008@gmail.com
 7    
 8
 9* SIMPLE USAGE Example:
10    $(function(){
11        var data = [{"name":"english","length":1000},{"name":"math","length":1111},{"name":"math","length":1111}];
12        $('.content').repeater(1, data);
13    });
14
15* HTML:
16    <div class="content">
17        <div class="item"><h3>{name}</h3><b>{length} MB</b></div>
18        <div class="split"><hr width="100%" color="blue" /></div>
19    </div>
20
21
22    
23* Parameters
24    $('.content').repeater(1, data);
25        col : how many columns you want
26        data: json data type
27
28* Data Binding Format:
29    put {DataBindingProperty} in HTML
30        <div class="item"> item template
31        <div class="split"> split template
32        
33* CSS:
34    .repeater_control : Repeater's style
35    .repeater_row : Row's style
36    .repeater_item : Item's style
37    .repeater_split : Split's style
38
39
40* NOTE: filename must be enclosed in tag.  Various file paths can be set using the filepath option.
41
42* Copyright (c) 2009 LiKang (http://likang.cnblogs.com/)
43* Licensed under the MIT License:
44* http://www.opensource.org/licenses/mit-license.php
45*
46-------------------------------------------------------------------------------------------------------*/
47
48jQuery.fn.repeater = function(col, data){
49    var html = jQuery(this).find('.item').html();
50    var split = jQuery(this).find('.split').html();
51    var row = data.length/col;
52    if (data.length%col)
53        row++;
54
55    this.each(function(){
56        var _repeater_control = jQuery('<table class="repeater_control"></table>');
57        
58        // generate rows
59        for (var i=0; i<row; i++)
60        {
61            var _repeater_row = jQuery('<tr class="repeater_row"></tr>') ;
62            
63            // generate items
64            for (var j=0; j<col ;j++)
65            {
66                var _repeater_item = jQuery('<td class="repeater_item"></td>');
67                var inner ;
68                // replace data binding data
69                if (i*col + j >= data.length)
70                {
71                    inner = "";
72                }
73                else
74                {
75                    inner = html.replace(/{(\w+)?}/g, function($0, $1){ 
76                        return data[i*col+j][$1]
77                    });
78                }
79                _repeater_item.append(inner);
80                _repeater_row.append(_repeater_item);
81            }
82            _repeater_control.append(_repeater_row);
83            
84            // generate split row
85            if (i < row -1)
86            {
87                var _repeater_split = jQuery('<tr class="repeater_split"></tr>').append('<td>'+split+'</td>');
88                _repeater_control.append(_repeater_split);            
89            }
90        }
91        
92        //alert(_repeater_control.html());     
93
94        jQuery(this).empty().append(_repeater_control);
95    });
96}

转载于:https://www.cnblogs.com/likang/archive/2009/07/16/1525072.html