在一个用 ASP MVC 制作的网站中,我被要求构建一个页面,该页面提供了管理两个字符串列表内容的功能,例如** this **。
这两个列表框需要是单选的,带有一个按钮可以将项目从一侧切换到另一侧。
我希望它是客户端的,以便在提交表单时,模型绑定器可以将更新的字符串列表发布到控制器。
任何人都知道这样的控件是否已经存在,例如 jqueryUI 中提供的控件。如果没有,关于如何实现该结果的任何建议?
非常感谢各位!
在一个用 ASP MVC 制作的网站中,我被要求构建一个页面,该页面提供了管理两个字符串列表内容的功能,例如** this **。
这两个列表框需要是单选的,带有一个按钮可以将项目从一侧切换到另一侧。
我希望它是客户端的,以便在提交表单时,模型绑定器可以将更新的字符串列表发布到控制器。
任何人都知道这样的控件是否已经存在,例如 jqueryUI 中提供的控件。如果没有,关于如何实现该结果的任何建议?
非常感谢各位!
我最近正在探索几个选项。
你可以试试这个纯 javascript 版本http://www.javascriptkit.com/script/script2/picklist.shtml
或者我开始构建一个 JQuery 插件,您可以将其用作起点 http://jsfiddle.net/stokedout/aySLN/4/
(function ($) {
$.fn.twinList = function (options) {
var settings = $.extend({
// Styling
containerClass: 'twl-container',
btnContainerClass: 'twl-btn-container',
leftListClass: 'twl-list left',
rightListClass: 'twl-list right',
selectBtnClass: 'twl-btn select',
selectAllBtnClass: 'twl-btn select-all',
deselectBtnClass: 'twl-btn deselect',
deselectAllBtnClass: 'twl-btn deselect-all',
// Content
selectBtnText: '>',
selectAllBtnText: '>>',
deselectBtnText: '<',
deselectAllBtnText: '<<',
// Config
debug:true
}, options);
return this.each(function () {
var originalList = $(this),
originalOptions = originalList.find('option'),
container,
btnContainer,
leftList,
rightList,
select,
selectAll,
deselect,
deselectAll;
var updateOriginalInput = function () {
var rlOptions = rightList.find('option');
originalOptions.prop('selected', false);
for (var i = 0; i < originalOptions.length; i++) {
for (var j = 0; j < rlOptions.length; j++) {
if (originalOptions[i].value === rlOptions[j].value) {
originalOptions[i].selected = true;
}
}
}
}
container = $('<div/>', {
'class': settings.containerClass
});
leftList = $('<select/>', {
'class': settings.leftListClass,
multiple: true
});
rightList = $('<select/>', {
'class': settings.rightListClass,
multiple: true
});
btnContainer = $('<div/>', {
'class': settings.btnContainerClass
});
select = $('<a>', {
text: settings.selectBtnText,
'class': settings.selectBtnClass,
href: '#',
click: function (e) {
leftList.find('option:selected').appendTo(rightList);
updateOriginalInput();
}
});
selectAll = $('<a>', {
text: settings.selectAllBtnText,
'class': settings.selectAllBtnClass,
href: '#',
click: function (e) {
leftList.find('option').appendTo(rightList);
originalOptions.prop('selected', true);
}
});
deselect = $('<a>', {
text: settings.deselectBtnText,
'class': settings.deselectBtnClass,
href: '#',
click: function (e) {
rightList.find('option:selected').appendTo(leftList);
updateOriginalInput();
}
});
deselectAll = $('<a>', {
text: settings.deselectAllBtnText,
'class': settings.deselectAllBtnClass,
href: '#',
click: function (e) {
rightList.find('option').appendTo(leftList);
originalOptions.prop('selected', false);
}
});
leftList.append(originalOptions.clone());
btnContainer.append(select)
.append(selectAll)
.append(deselect)
.append(deselectAll);
container.append(leftList)
.append(btnContainer)
.append(rightList);
container.insertAfter(originalList);
if (!settings.debug)
originalList.hide();
});
};
})(jQuery);
$('#someList').twinList();
首先,您只需要将 @Html.DropDownListFor() 与一些数据绑定。
有一篇文章讨论了可用性问题并比较了多选输入的不同方法。该资源应该对您有所帮助。
我个人喜欢选项 SCROLLABLE CHECKBOXES 和 ASMSELECT