jQuery中继器数据绑定插件

实现类似这样的数据绑定：复读机1/* *//*-2 *复读机2009年第一版.7 .163 anrepeaterdatabindingjqueryplugin 45作者丽康6丽康2008 @ Gmail。com 789 * simpleusageexample :10 $(function(){ 11 vardata=[{ ' name ' ' English ' ' length ' 1000 }，{'name''math '' length'rgba(0，128，128，1)'12$('内容')。复读机(1,数据);13});1415 * html :16 div class=' content ' 17 div class=' item ' H3 { name }/h3b { length } MB/b/div 18 div class=' split ' HR width=' 100% ' color=' blue '/div 19/div 2021 22 23 *参数24美元.内容')。复读机(1,数据);25col :您想要多少列26数据： JSON数据类型27

, 128, 1)">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: .
41
42* Copyright (c) 2009 LiKang ()
43* Licensed under the MIT License:
44* 
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}