0

我开发了一个简单的插件，允许您为文本框创建多列下拉菜单。您传入一个 Web 服务 URL，以及一个 jQuery 选择器数组，这些选择器对应于您希望从结果集中的每一列中填充的每个元素。

$('#txtProduct').multiColumnDropDown({ 'url': '/api/GetProductAndCategoryByRegion', 'targets' : ['#txtProduct', "#txtCategory"] });

这将构建一个多列下拉列表，当用户单击其中的记录时，#txtProduct 和 #txtCategory 将被填充。

一切正常，但我希望能够将多个 multiColumnDropDowns 应用到我的页面。我将遇到问题，因为我不知道如何引用特定于插件实例的动态生成的下拉标记。

在我的插件中，我为下拉列表生成一个包装器并将其放置在需要的位置。如果我想通过重新查询来更新包装器及其下拉列表，我如何确保我只更新我想要的，而不是我生成的所有包装器？

完整代码如下：

(function ($) {
var methods = {
    init: function (options) {
        return this.each(function () {
            var settings = $.extend({
                'targets': [this]
            }, options);

            var targets = settings["targets"];

            var yOffset = $(this).position().top + $(this).height() + 'px';
            var xOffset = $(this).position().left + 'px';

            var wrapper = $('<div class="dropdown-wrapper"></div>')
                .css('top', yOffset)
                .css('left', xOffset)
                .hide();

            $(document).click(function () {
                wrapper.hide();
            })

            if (settings["url"] != undefined && settings["url"] != '') {
                methods.populateDropDown(settings["url"], targets, wrapper);
            }

            $(this).click(function (e) {
                e.stopPropagation();
                wrapper.show();
            });
        });
    },
    update: function (options) {
        return this.each(function () {
            var settings = $.extend({
                'targets': [this]
            }, options);

            var targets = settings["targets"];

            //How do I reference the correct wrapper?
            //The following will reference all wrappers on the page :\
            var wrapper = $('div.dropdown-wrapper')

            //Repopulate the wrapper and dropdown code goes here....
        })
    },
    populateDropDown: function (url, targets, wrapper) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json'
        })
        .done(function (data) {
            var $table = $('<table class="multi-column-table">');
            data.forEach(function (item) {
                var $tr = $('<tr>').appendTo($table);
                var idx = 0;
                $.each(item, function (k, v) {
                    var $td = $('<td>');
                    if (targets[idx] != undefined)
                        $td.attr('data-target', targets[idx]);
                    $td.text(v);
                    $td.appendTo($tr);
                    idx++;
                });
            });
            $table.on('click', 'tr', function () {
                $.each(this.children, function (i, td) {
                    if ($(td).attr('data-target'))
                        $($(td).attr('data-target')).val($(td).text());
                });
            });
            $(wrapper).append($table).prependTo('body');

        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            alert('Error: ' + errorThrown);
        });
    }
};

$.fn.multiColumnDropDown = function (method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.multiColumnDropDown');
    }
};

})(jQuery);

如果有人对 CSS 感兴趣：

.dropdown-wrapper
{
border:1px solid #000;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
z-index:100;
background-color:#fff;
position:absolute;
}

.dropdown-wrapper tr:hover
{
background-color:#0081C2;
color:#fff;
}
4

2 回答 2

0

您可以参考本指南 Jquery Plugin Authoring ( http://docs.jquery.com/Plugins/Authoring )

基本上，您需要将插件的实例存储到 html 控件的 data 属性中。检查下面的代码

 var $this = $(this),
         data = $this.data('tooltip'),
         tooltip = $('<div />', {
           text : $this.attr('title')
         });

     // If the plugin hasn't been initialized yet
     if ( ! data ) {

       /*
         Do more setup stuff here
       */

       $(this).data('tooltip', {
           target : $this,
           tooltip : tooltip
       });
于 2013-02-27T16:01:51.867 回答
0

var wrapper = $('div.dropdown-wrapper')就像您注意到的那样，在该update方法中引用了页面上的所有包装器，因为您正在选择dropdown-wrapper该类的所有 div。

要引用在该实例中创建的包装器，您必须将在init函数中创建的包装器存储在某处。为此，您可以在插件上下文中使用data方法。

于 2013-02-27T16:02:29.483 回答