我在我的项目中使用jquery-ui-picklist jquery插件，我想为用户可以选择的项目设置限制。
- 如何为可选择的最大项目设置限制?
- 如何禁用控件上的按钮? -如果选择的项目的最大数量，我想禁用"添加"按钮
谢谢。
jquery-ui-picklist有多个事件挂钩，您可以将函数绑定到这些事件挂钩中，我认为最佳选择取决于具体情况。afterAdd最有可能是最好的选择，这样您就可以在达到限制后禁用添加按钮。onChange计算两个方向上的事件，如果你要限制一个数量，你也应该用afterRemove计算移除次数。
这是清单。
https://code.google.com/p/jquery-ui-picklist/wiki/CallbackEvents onChange
按钮控件是一个普通的HTML按钮控件，类为"addClass"。你可以切换或修改这个类或preventDefault。我相信Jquery插件默认包含一个"添加所有"按钮以及"添加"按钮。如果可能添加的数量大于您的限制，则需要在beforePopulate eventook中禁用此功能。只需使用。hide()调用按钮。如果添加按钮再次可用show()
插件没有此属性。对所选选项的最大值没有限制。为了添加这个，我自己修改了一点代码，通过添加限制。
代码很长，我在很多地方修改了它，所以现在很难(我甚至不记得我所做的所有更改)指出这里的所有内容。关于我是怎么做的一个简短的解释是:
- a增加了一个新的内部变量selectLimit，默认设置为一个大的数字。要启用限制，您应该将该值设置为小于选择列表中项目总数的值。
- 在选择一个新项目之前，我检查我是否可以选择更多(如果所选项目的计数器，加上右边面板中已经添加的项目是丰富的)，如果我选择项目，否则我取消选择。
- 我只在左边面板上限制选择-如果在右边面板中你有更多的项目超过限制，那么限制不会影响你从那个面板中选择。如果你动态填充选择器并且所选的项目超过限制，这是很好的。
完整的代码-插件的限制是:
/**
* jQuery PickList Widget
*
* Copyright (c) 2012 Jonathon Freeman <jonathon@awnry.com>
* Distributed under the terms of the MIT License.
*
* http://code.google.com/p/jquery-ui-picklist/
*/
(function($)
{
$.widget("awnry.pickList",
{
widgetEventPrefix: "pickList_",
options:
{
// Container classes
mainClass: "pickList",
listContainerClass: "pickList_listContainer",
sourceListContainerClass: "pickList_sourceListContainer",
controlsContainerClass: "pickList_controlsContainer",
targetListContainerClass: "pickList_targetListContainer",
listClass: "pickList_list",
sourceListClass: "pickList_sourceList",
targetListClass: "pickList_targetList",
clearClass: "pickList_clear",
// List item classes
listItemClass: "pickList_listItem",
richListItemClass: "pickList_richListItem",
selectedListItemClass: "pickList_selectedListItem",
// Control classes
addAllClass: "pickList_addAll",
addClass: "pickList_add",
removeAllClass: "pickList_removeAll",
removeClass: "pickList_remove",
// Control labels
addAllLabel: ">>",
addLabel: ">",
removeAllLabel: "<<",
removeLabel: "<",
// List labels
listLabelClass: "pickList_listLabel",
sourceListLabel: "Available",
sourceListLabelClass: "pickList_sourceListLabel",
targetListLabel: "Selected",
targetListLabelClass: "pickList_targetListLabel",
// Sorting
sortItems: true,
sortAttribute: "label",
// Name of custom value attribute for list items
listItemValueAttribute: "data-value",
// Additional list items
items: [],
selectLimit: 10000
},
_create: function()
{
var self = this;
self._buildPickList();
self._refresh();
},
_buildPickList: function()
{
var self = this;
self._trigger("beforeBuild");
self.pickList = $("<div/>")
.hide()
.addClass(self.options.mainClass)
.insertAfter(self.element)
.append(self._buildSourceList())
.append(self._buildControls())
.append(self._buildTargetList())
.append( $("<div/>").addClass(self.options.clearClass) );
self._populateLists();
self.element.hide();
self.pickList.show();
self._trigger("afterBuild");
},
_buildSourceList: function()
{
var self = this;
var container = $("<div/>")
.addClass(self.options.listContainerClass)
.addClass(self.options.sourceListContainerClass)
.css({
"-moz-user-select": "none",
"-webkit-user-select": "none",
"user-select": "none",
"-ms-user-select": "none"
})
.each(function()
{
this.onselectstart = function() { return false; };
});
var label = $("<div/>")
.text(self.options.sourceListLabel)
.addClass(self.options.listLabelClass)
.addClass(self.options.sourceListLabelClass);
self.sourceList = $("<ul/>")
.addClass(self.options.listClass)
.addClass(self.options.sourceListClass)
.delegate("li", "click", { pickList: self }, self._changeHandler);
container
.append(label)
.append(self.sourceList);
return container;
},
_buildTargetList: function()
{
var self = this;
var container = $("<div/>")
.addClass(self.options.listContainerClass)
.addClass(self.options.targetListContainerClass)
.css({
"-moz-user-select": "none",
"-webkit-user-select": "none",
"user-select": "none",
"-ms-user-select": "none"
})
.each(function()
{
this.onselectstart = function() { return false; };
});
var label = $("<div/>")
.text(self.options.targetListLabel)
.addClass(self.options.listLabelClass)
.addClass(self.options.targetListLabelClass);
self.targetList = $("<ul/>")
.addClass(self.options.listClass)
.addClass(self.options.targetListClass)
.delegate("li", "click", { pickList: self }, self._changeHandler);
container
.append(label)
.append(self.targetList);
return container;
},
_buildControls: function()
{
var self = this;
self.controls = $("<div/>").addClass(self.options.controlsContainerClass);
self.addAllButton = $("<button type='button'/>").click({pickList: self}, self._addAllHandler).html(self.options.addAllLabel).addClass(self.options.addAllClass);
self.addButton = $("<button type='button'/>").click({pickList: self}, self._addHandler).html(self.options.addLabel).addClass(self.options.addClass);
self.removeButton = $("<button type='button'/>").click({pickList: self}, self._removeHandler).html(self.options.removeLabel).addClass(self.options.removeClass);
self.removeAllButton = $("<button type='button'/>").click({pickList: self}, self._removeAllHandler).html(self.options.removeAllLabel).addClass(self.options.removeAllClass);
self.controls
.append(self.addAllButton)
.append(self.addButton)
.append(self.removeButton)
.append(self.removeAllButton);
return self.controls;
},
_populateLists: function()
{
var self = this;
self._trigger("beforePopulate");
var sourceListItems = [];
var targetListItems = [];
var selectItems = self.element.children();
selectItems.not(":selected").each(function()
{
sourceListItems.push( self._createDoppelganger(this) );
});
selectItems.filter(":selected").each(function()
{
targetListItems.push( self._createDoppelganger(this) );
});
self.sourceList.append(sourceListItems.join("n"));
self.targetList.append(targetListItems.join("n"));
self.insertItems(self.options.items);
self._trigger("afterPopulate");
},
_addAllHandler: function(e)
{
var self = e.data.pickList;
self._trigger("beforeAddAll");
var items = self.sourceList.children();
self.targetList.append( self._removeSelections(items) );
self.element.children().not(":selected").attr("selected", "selected");
self._refresh();
self._trigger("afterAddAll", null, { items: items });
self._trigger("onChange", null, { type: "addAll", items: items });
},
_addHandler: function(e)
{
var self = e.data.pickList;
self._trigger("beforeAdd");
var items = self.sourceList.children(".ui-selected");
self.targetList.append( self._removeSelections(items) );
var itemIds = [];
items.each(function()
{
itemIds.push( self._getItemValue(this) );
});
self.element.children().filter(function()
{
return $.inArray(this.value, itemIds) != -1;
}).attr("selected", "selected");
self._refresh();
self._trigger("afterAdd", null, { items: items });
self._trigger("onChange", null, { type: "add", items: items });
},
_removeHandler: function(e)
{
var self = e.data.pickList;
self._trigger("beforeRemove");
var items = self.targetList.children(".ui-selected");
self.sourceList.append( self._removeSelections(items) );
var itemIds = [];
items.each(function()
{
itemIds.push( self._getItemValue(this) );
});
self.element.children().filter(function()
{
return $.inArray(this.value, itemIds) != -1;
}).removeAttr("selected");
self._refresh();
self._trigger("afterRemove", null, { items: items });
self._trigger("onChange", null, { type: "remove", items: items });
},
_removeAllHandler: function(e)
{
var self = e.data.pickList;
self._trigger("beforeRemoveAll");
var items = self.targetList.children();
self.sourceList.append( self._removeSelections(items) );
self.element.children().filter(":selected").removeAttr("selected");
self._refresh();
self._trigger("afterRemoveAll", null, { items: items });
self._trigger("onChange", null, { type: "removeAll", items: items });
},
_refresh: function()
{
var self = this;
self._trigger("beforeRefresh");
self._refreshControls();
// Sort the selection lists.
if(self.options.sortItems)
{
self._sortItems(self.sourceList, self.options);
self._sortItems(self.targetList, self.options);
}
self._trigger("afterRefresh");
},
_refreshControls: function()
{
var self = this;
var addBtnEnabled = (self.targetList.children().length < self.options.selectLimit);
self._trigger("beforeRefreshControls");
// Enable/disable the Add All button state.
if(self.sourceList.children().length)
{
self.addAllButton.removeAttr("disabled");
}
else
{
self.addAllButton.attr("disabled", "disabled");
}
// Enable/disable the Remove All button state.
if(self.targetList.children().length)
{
self.removeAllButton.removeAttr("disabled");
}
else
{
self.removeAllButton.attr("disabled", "disabled");
}
// Enable/disable the Add button state.
if(self.sourceList.children(".ui-selected").length && addBtnEnabled)
{
self.addButton.removeAttr("disabled");
}
else
{
self.addButton.attr("disabled", "disabled");
}
// Enable/disable the Remove button state.
if(self.targetList.children(".ui-selected").length)
{
self.removeButton.removeAttr("disabled");
}
else
{
self.removeButton.attr("disabled", "disabled");
}
self._trigger("afterRefreshControls");
},
_sortItems: function(list, options)
{
var items = new Array();
list.children().each(function()
{
items.push( $(this) );
});
items.sort(function(a, b)
{
if(a.attr(options.sortAttribute) > b.attr(options.sortAttribute))
{
return 1;
}
else if(a.attr(options.sortAttribute) == b.attr(options.sortAttribute))
{
return 0;
}
else
{
return -1;
}
});
list.empty();
for(var i = 0; i < items.length; i++)
{
list.append(items[i]);
}
},
_changeHandler: function(e)
{
var self = e.data.pickList;
var isClickOnSourcePanel = this.parentNode.attributes["class"].nodeValue.indexOf("pickList_sourceList") >= 0;
var selectedItems = self.sourceList.children(".ui-selected").length;
var leftToSelect = self.options.selectLimit - self.targetList.children().length - selectedItems - 1;
var canSelectMore = isClickOnSourcePanel && leftToSelect >= 0;
if(e.ctrlKey)
{
if(self._isSelected( $(this) ))
{
self._removeSelection( $(this) );
}
else
{
if(canSelectMore){
self.lastSelectedItem = $(this);
self._addSelection( $(this) );
}
else if(!isClickOnSourcePanel){ //allow to select/deselect without restrictions on right panel.
self.lastSelectedItem = $(this);
self._addSelection( $(this) );
}
}
}
//don't need to select with shift. For a small amount of selectale items
// else if(e.shiftKey)
// {
// var current = self._getItemValue(this);
// var last = self._getItemValue(self.lastSelectedItem);
//
// if($(this).index() < $(self.lastSelectedItem).index())
// {
// var temp = current;
// current = last;
// last = temp;
// }
//
// var pastStart = false;
// var beforeEnd = true;
//
// self._clearSelections( $(this).parent() );
//
// $(this).parent().children().each(function()
// {
// if(self._getItemValue(this) == last)
// {
// pastStart = true;
// }
//
// if(pastStart && beforeEnd)
// {
// self._addSelection( $(this) );
// }
//
// if(self._getItemValue(this) == current)
// {
// beforeEnd = false;
// }
//
// });
// }
else
{
if(canSelectMore){
self.lastSelectedItem = $(this);
self._clearSelections( $(this).parent() );
self._addSelection( $(this) );
}
else if(!isClickOnSourcePanel){
self.lastSelectedItem = $(this);
self._clearSelections( $(this).parent() );
self._addSelection( $(this) );
}
}
self._refreshControls();
},
_isSelected: function(listItem)
{
return listItem.hasClass("ui-selected");
},
_addSelection: function(listItem)
{
var self = this;
return listItem
.addClass("ui-selected")
.addClass("ui-state-highlight")
.addClass(self.options.selectedListItemClass);
},
_removeSelection: function(listItem)
{
var self = this;
return listItem
.removeClass("ui-selected")
.removeClass("ui-state-highlight")
.removeClass(self.options.selectedListItemClass);
},
_removeSelections: function(listItems)
{
var self = this;
listItems.each(function()
{
$(this)
.removeClass("ui-selected")
.removeClass("ui-state-highlight")
.removeClass(self.options.selectedListItemClass);
});
return listItems;
},
_clearSelections: function(list)
{
var self = this;
list.children().each(function()
{
self._removeSelection( $(this) );
});
},
_setOption: function(key, value)
{
switch(key)
{
case "clear":
{
break;
}
}
$.Widget.prototype._setOption.apply(this, arguments);
},
destroy: function()
{
var self = this;
self._trigger("onDestroy");
self.pickList.remove();
self.element.show();
$.Widget.prototype.destroy.call(self);
},
insert: function(item)
{
var self = this;
var list = item.selected ? self.targetList : self.sourceList;
var selectItem = self._createSelectItem(item);
var listItem = self._createListItem(item);
self.element.append(selectItem);
list.append(listItem);
self._trigger("onChange");
self._refresh();
},
insertItems: function(items)
{
var self = this;
var selectItems = [];
var sourceItems = [];
var targetItems = [];
$(items).each(function()
{
var selectItem = self._createSelectItem(this);
var listItem = self._createListItem(this);
selectItems.push(selectItem);
if(this.selected)
{
targetItems.push(listItem);
}
else
{
sourceItems.push(listItem);
}
});
self.element.append(selectItems.join("n"));
self.sourceList.append(sourceItems.join("n"));
self.targetList.append(targetItems.join("n"));
self._trigger("onChange");
self._refresh();
},
_createSelectItem: function(item)
{
var selected = item.selected ? " selected='selected'" : "";
return "<option value='" + item.value + "'" + selected + ">" + item.label + "</option>";
},
_createListItem: function(item)
{
var self = this;
if(item.element != undefined)
{
var richItemHtml = item.element.clone().wrap("<div>").parent().html();
item.element.hide();
return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + " " + self.options.richListItemClass + "'>" + richItemHtml + "</li>";
}
return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + "'>" + item.label + "</li>";
},
_createDoppelganger: function(item)
{
var self = this;
return "<li " + self.options.listItemValueAttribute + "='" + $(item).val() + "' label='" + $(item).text() + "' class='" + self.options.listItemClass + "'>" + $(item).text() + "</li>";
},
_getItemValue: function(item)
{
var self = this;
return $(item).attr(self.options.listItemValueAttribute);
},
selectedAssets:function(){
var self = this;
var selectedItems = [];
self.targetList.children().each(function(){
var a = {};
a.id = $(this).attr(self.options.listItemValueAttribute);
a.name = $(this).attr("label");
selectedItems.push(a);
});
return selectedItems;
}
});
}(jQuery));
现在，你可以这样写:
$("#pckAssets").pickList({
selectLimit : 5
});
我希望能帮到别人。