jQuery 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:
    $(function(){
        var data = [{"name":"english","length":1000},{"name":"math","length":1111},{"name":"math","length":1111}];
        $('.content').repeater(1, data);
    });

* HTML:
    <div class="content">
        <div class="item"><h3>{name}</h3><b>{length} MB</b></div>
        <div class="split"><hr width="100%" color="blue" /></div>
    </div>


    
* Parameters
    $('.content').repeater(1, data);
        col : how many columns you want
        data: json data type

* Data Binding Format:
    put {DataBindingProperty} in HTML
        <div class="item"> item template
        <div class="split"> split template
        
* CSS:
    .repeater_control : Repeater's style
    .repeater_row : Row's style
    .repeater_item : Item's style
    .repeater_split : Split's style


* NOTE: filename must be enclosed in tag.  Various file paths can be set using the filepath option.

* Copyright (c) 2009 LiKang (http://likang.cnblogs.com/)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
-------------------------------------------------------------------------------------------------------*/

jQuery.fn.repeater = function(col, data){
    var html = jQuery(this).find('.item').html();
    var split = jQuery(this).find('.split').html();
    var row = data.length/col;
    if (data.length%col)
        row++;

    this.each(function(){
        var _repeater_control = jQuery('<table class="repeater_control"></table>');
        
        // generate rows
        for (var i=0; i<row; i++)
        {
            var _repeater_row = jQuery('<tr class="repeater_row"></tr>') ;
            
            // generate items
            for (var j=0; j<col ;j++)
            {
                var _repeater_item = jQuery('<td class="repeater_item"></td>');
                var inner ;
                // replace data binding data
                if (i*col + j >= data.length)
                {
                    inner = "";
                }
                else
                {
                    inner = html.replace(/{(\w+)?}/g, function($0, $1){ 
                        return data[i*col+j][$1]
                    });
                }
                _repeater_item.append(inner);
                _repeater_row.append(_repeater_item);
            }
            _repeater_control.append(_repeater_row);
            
            // generate split row
            if (i < row -1)
            {
                var _repeater_split = jQuery('<tr class="repeater_split"></tr>').append('<td>'+split+'</td>');
                _repeater_control.append(_repeater_split);            
            }
        }
        
        //alert(_repeater_control.html());     

        jQuery(this).empty().append(_repeater_control);
    });
}