jquery动态绑定像Repeater和dataList一样绑定数据源

//将json数据绑定到具有模板的Table中
$.fn.dataBind = function (options) {
    var target = this;
    var defaults = {

        expand: false,
        loading: true,
        showPager: true,
        cache: true,
        cacheName: undefined,
        emptyMessage: '<div class="text_empty">没有数据内容。</div>',

        data: undefined,
        template: undefined,

        url: undefined,
        keyValue: '',
        pageSize: 10,
        currentPage: 1,

        modelLine: 1,
        modelType: undefined,

        onDataBindSuccess: undefined,
        onLoadSuccess: undefined,
        onItemBind: undefined,
        onError: undefined
    };

    var settings = settings || $.extend({}, defaults, options);
    if (settings.cache == true) {
        settings.cacheName = settings.cacheName || ('d_' + (settings.url || '') + settings.currentPage + settings.keyValue).replace('-', '_');
        try {
            settings.data = settings.data || ($.parseJSON($(target).data(settings.cacheName)));
        }
        catch (e) { }
    }

    if (!settings.modelType) {
        if ($(target).is('ul')) {
            settings.modelType = 'li';
        }
        else if ($(target).is('table')) {
            settings.modelType = 'tbody>tr';
        }
    }
    var template = settings.template || $(target).find(settings.modelType + ':lt(' + settings.modelLine + ')').hide().clone().show().outer();
    var loadingFrame;
    if (settings.loading) {
        $('#loadingForm').popFrameClose();
        loadingFrame = $('<div id="loadingForm" class="text_center img_v_middle" style="line-height:15px;"><img src="数据加载中...." alt=""/> </div>')
            .appendTo(document.body).popFrame({ trigger: target, position: 'center', removeTargetOnClose: true, toolBox: false, height: 20, 30 });
    }

    if (settings.data) {
        bindJson(settings);
        if (loadingFrame) {
            $(loadingFrame).popFrameClose();
        }
    }
    else if (settings.url) {
        $.ajax({
            type: 'POST',
            data: { KeyValue: (settings.keyValue + "," + settings.currentPage + "," + settings.pageSize) },
            url: settings.url,
            success: function (result) {
                result = $(result).find("string").text();
                var json;
                try {
                    json = $.parseJSON(result);
                }
                catch (e) {
                    $.debug('返回的内容无法格式化成JSon', true);
                    if (settings.onError) {
                        settings.onError(e);
                    }
                    return;
                }
                if (settings.cache == true) {
                    $(target).data(('d_' + (settings.url || '') + settings.currentPage + settings.keyValue).replace('-', '_'), result);
                }
                settings.data = json;
                bindJson(settings, result);
                if (loadingFrame) { $(loadingFrame).popFrameClose(); }
            },
            error: function (errMessage) {
                if (loadingFrame) { $(loadingFrame).popFrameClose(); }
                if (settings.onError) {
                    settings.onError(errMessage);
                }
                else {
                    $('<div id="loadingForm" class="text_center img_v_middle text_important" style="line-height:15px;">意外错误<p>' + errMessage.responseText + '</p></div>').appendTo(document.body).popFrame({ trigger: target, position: 'center', removeTargetOnClose: true, toolBox: false, height: 20, 80, autoClose: 3000 });
                }
            }
        });
    }
    else {
        $(loadingFrame).popFrameClose();
    }
    function bindJson(settings, result) {
        if (settings.onLoadSuccess) {
            settings.onLoadSuccess(result, settings.data, settings);
        }
        if (settings.data) {
            var templateHtml = template.replace(/[\r\n]/g, '');

            var columns = new Array();
            var regKey = new RegExp(/@-.*?-@/g);
            while ((result = regKey.exec(templateHtml)) != null) {
                columns.push(result[0]);
            }
            var pattern = '/(.*)' + columns.join('(.*)') + '(.*)/g';
            var reg = new RegExp(eval(pattern));
            //---------------------------------------------//
            var stringbulder = '';
            var table = settings.data.Table || settings.data;
            $.each(table, function (i, item) {
                if (settings.onItemBind) {
                    var bindResult = settings.onItemBind(item);
                    if (!bindResult) {
                        return true;
                    }
                }
                var replaceValue = '';
                $.each(columns, function (j) {
                    var itemStr = eval('item.' + columns[j].substring(2, columns[j].length - 2)) || '';
                    if (columns.length >= 10) {
                        if (!isNaN(itemStr)) {
                            itemStr = ' ' + itemStr;
                        }
                    }
                    replaceValue += ('$' + new Number(j + 1) + itemStr);
                });
                replaceValue += ('$' + (columns.length + 1));
                stringbulder += templateHtml.replace(reg, replaceValue);
            });
            if (settings.expand) {
                $(target).find(settings.modelType + ':last').after(stringbulder);
            }
            else {
                var length = $(target).find(settings.modelType).length;
                if (length > 0) {
                    $(target).find(settings.modelType + ':gt(' + (settings.modelLine - 1) + ')').remove();
                    $(target).find(settings.modelType + ':last').after(stringbulder);
                }
                else {
                    $(target).append($(stringbulder));
                }
            }
            //------------------------------------------------//
            var footer = $(target).find('tfoot>tr>td');
            if (settings.showPager && footer.length > 0 && settings.data.Pager && settings.data.Pager[0].PageCount > 1) {
                var pagerString = '';
                for (var i = 1; i <= settings.data.Pager[0].PageCount; i++) {
                    if (settings.currentPage == i) {
                        pagerString += ('[' + i.toString() + ']&nbsp;');
                    }
                    else {
                        pagerString += ('[<a href="javascript:void(0)">' + i.toString() + '</a>]&nbsp;');
                    }
                }
                $(target).find('tfoot>tr>td').html('<div class="text_center box_padding">' + pagerString + '</div>');

                $(target).find('tfoot>tr>td>div>a').bind('click', function () {
                    settings.currentPage = parseInt($(this).text());
                    var pagerSetting = $.extend({}, defaults, settings);
                    pagerSetting.data = undefined;
                    $(target).dataBind(pagerSetting);
                });
            }

            var dataCount = $(target).find(settings.modelType + '').length; //获得Tbody中存在数据的值
            if (dataCount == settings.modelLine) {
                $(target).find('tfoot>tr>td').html(settings.emptyMessage);
            }
            //            else {
            //                $(target).find('tfoot>tr>td').html('');
            //            }
            //            $(template).hide();
            if (settings.onDataBindSuccess) {
                settings.onDataBindSuccess(result, settings.data, settings);
            }
        }
    }
    return target;
}

在这里必须table的模版必须使用如下格式：<table id="tbCompanyUserList" class="frame">
                            <thead>
                                <tr>
                                    <th style=" 0.5em;">
                                    </th>
                                    <th scope="col" style=" 80px;">
                                        姓名
                                    </th>
                                    <th scope="col" style=" 160px;">
                                        职位
                                    </th>
                                    <th>
                                        公司名称
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <a role="popUserInfo" class="logo_user_small" userid="@-UserId-@">@-RealName-@</a>
                                    </td>
                                    <td>
                                        @-Title-@
                                    </td>
                                    <td>
                                        @-CompanyName-@
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text_center">
                                    </td>
                                </tr>
                            </tfoot>
                        </table>

不好意思忘了写用法了如下： $('#tbCompanyUserList).dataBind({
            url: cfsns.url.company.newsList,
            keyValue: companyId,
            modelLine: 1,
            emptyMessage: '<div class=\"text_unimportant text_center\">！</div>',
            onLoadSuccess: function (jsonstr, json) {
                                       });
                    }
                }
            },
            onDataBindSuccess: function (result, json, setting) {
                                }
            }
        });
    }

支持div和table的绑定，如果有错请联系我，我会尽快改正！