自定义 jQuery repeater 插件。学习用。。。

本文介绍了一个使用 jQuery 实现的 Repeater 控件示例,该控件用于循环显示一组数据项,并演示了如何根据数据项的属性动态修改显示内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   
   


 
 


     

     

    (function ($) {
        $.fn.repeater = function (options) {

            var opts = $.extend({}, $.fn.repeater.defaults, options);

            var len = opts.dataSrc.length;
            var regCach = {};
            for (var i = 0; i < len; i++) {
                var data = opts.dataSrc[i];
                if (opts.beforeItemDataBound) {
                    opts.beforeItemDataBound({ "dataItem": data });
                }

                var itemCnt = opts.itemTemplate;
                for (var name in data) {
                    if (!regCach[name]) {
                        regCach[name] = new RegExp("{{" + name + "}}", "gi");
                    }
                    itemCnt = itemCnt.replace(regCach[name], data[name]);
                }
                var itemJQ = $(itemCnt);
                if (opts.itemDataBound) {
                    opts.itemDataBound({ "dataItem": data, "dataCnt": itemJQ });
                }
                itemJQ.appendTo(this);

            }

            return this;

        }

        $.fn.repeater.defaults = {

            itemTemplate: "",

            //执行数据绑定之前的操作,可以对数据进行一次处理并.调用参数{"dataItem":data };
            beforeItemDataBound: null, //
            // 数据绑定完成之后的操作。返回生成新的jQuery对象 .调用参数
            //  返回值:新的jQuery对象
            // {"dataItem":data,"dataCnt":itemCnt}
            // data:原始数据或是经过 beforeItemDataBound 处理过的数据。
            // itemCnt  :模板数据格式化后的 jQuery对象。
            itemDataBound: null,
            dataSrc: []
        }
    })(jQuery);

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值