Moving Items（jQuery扩展）
列表移动例子，对比过网上的很多实例，当前组件突出的特点是：页面尽可能简单，代码量少。
代码moveingItems方法，返回this实例，该对象不支持jQuery的连写操作，只能当对象使用，作为jQuery的控件来说，这种直接操作对象的方法是较流行的写法。
控件示意图：
代码moveingItems方法，返回this实例，该对象不支持jQuery的连写操作，只能当对象使用，作为jQuery的控件来说，这种直接操作对象的方法是较流行的写法。
控件示意图：
(function($){
$.extend($.fn, {
// 生成随机UUID数，用于唯一标识节点
randomUUID : function () {
var s = [], itoh = '0123456789ABCDEF';
// Make array of random hex digits. The UUID only has 32 digits in it, but we
// allocate an extra items to make room for the '-'s we'll be inserting.
for (var i = 0; i < 36; i++) s[i] = Math.floor(Math.random()*0x10);
// Conform to RFC-4122, section 4.4
s[14] = 4; // Set 4 high bits of time_high field to version
s[19] = (s[19] & 0x3) | 0x8; // Specify 2 high bits of clock sequence
// Convert to hex chars
for (var i = 0; i < 36; i++) s[i] = itoh[s[i]];
// Insert '-'s
s[8] = s[13] = s[18] = s[23] = '-';
return s.join('');
},
movingitems : function(settings) {
/*---------------------------------------- attribute ----------------------------------------*/
// leftitems, rightitems, id, leftListStyle, rightListStyle
settings = $.extend(settings);
function _getLeftList() {
return $("#" + id + "_SelectLeft");
}
function _getRightList() {
return $("#" + id + "_SelectRight");
}
/*---------------------------------------- api ----------------------------------------*/
this.leftitems = function (datas) {
var selectLeft = _getLeftList();
if(typeof datas != 'undefined') {
selectLeft.empty();
$.each(datas, function(i, data){
var option = $("<option>")
.attr("value",data.id)
.append(data.label);
option.appendTo(selectLeft);
});
buildLeftListCss();
settings.leftItems = datas;
}
var selectedItems = selectLeft.children("option");
var selectValues = [];
$.each(selectedItems, function(i, selectedItem){
selectValues[i] = $(selectedItem).attr("value");
});
return selectValues.join(",");
};
this.rightitems = function (datas) {
var selectRight = _getRightList();
if(typeof datas != 'undefined') {
selectRight.empty();
$.each(datas, function(i, data){
var option = $("<option>")
.attr("value",data.id)
.append(data.label);
option.appendTo(selectRight);
});
buildRightListCss();
settings.rightItems = datas;
}
var selectedItems = selectRight.children("option");
var selectValues = [];
$.each(selectedItems, function(i, selectedItem){
selectValues[i] = $(selectedItem).attr("value");
});
return selectValues.join(",");
};
/*---------------------------------------- opt ----------------------------------------*/
function _moveLeft(event) {
_getRightList().children(":selected").remove();
buildRightListCss();
}
function _moveLeftAll(event) {
_getRightList().empty();
}
function _moveRight(event) {
_move(_getLeftList().children(":selected"));
buildRightListCss();
}
function _moveRightAll(event) {
_move(_getLeftList().children());
buildRightListCss();
}
function _move(selectedItems) {
var selectRight = _getRightList();
$.each(selectedItems, function(i, selectedItem) {
var isContained = false;
$.each(selectRight.children(), function(j,moveToItem){
if($(selectedItem).attr("value") == $(moveToItem).attr('value')) {
isContained = true;
}
});
if(!isContained) {
selectRight.append($("<option>")
.attr("value",($(selectedItem).attr("value")))
.append($(selectedItem).text())
);
}
});
}
/*---------------------------------------- define the css ----------------------------------------*/
function buildLeftListCss() {
var selectLeft = _getLeftList();
$(":even", selectLeft).css({"background-color":"#ffffff"});
$(":odd", selectLeft).css({"background-color":"#e9f0f8"});
}
function buildRightListCss() {
var selectRight = _getRightList();
$(":even", selectRight).css({"background-color":"#ffffff"});
$(":odd", selectRight).css({"background-color":"#e9f0f8"});
}
/*---------------------------------------- build the html ----------------------------------------*/
// init the id, if the attribute "id" of settings doesn't exist, try to get the attribute "id" of container,
// else try to create a random id
var id = null;
if(settings.id){
id = settings.id;
} else if($(this).attr("id")){
id = $(this).attr("id");
} else {
id = $(this).randomUUID();
}
// init the html, use template
var template = "<table>"
+ "<tr><td align='left' style='font-size:12px;'> 待添加</td><td></td><td align='left' style='font-size:12px;'> 已添加</td></tr>"
+ "<tr><td>"
+ "<div class='movingitems-list-wrapper'><select multiple='multiple' class='movingitems-list' id='@id_SelectLeft'></select></div>"
+ "</td><td>"
+ "<div class='movingitems-btn-container'>"
+ "<br/>"
+ "<button id='@id_MoveLeft' class='i-item-remove'></button><br/><br/>"
+ "<button id='@id_MoveRight' class='i-item-addselect'></button><br/><br/>"
+ "<button id='@id_MoveLeftAll' class='i-item-removeall'></button><br/><br/>"
+ "<button id='@id_MoveRightAll' class='i-item-addall'></button><br/><br/>"
+ "</div>"
+ "</td><td>"
+ "<div class='movingitems-list-wrapper'><select multiple='multiple' id='@id_SelectRight' class='movingitems-list'></select></div>"
+ "</td></tr>"
+ "</table>";
template = template.replace(new RegExp("@id","gm"), id);
$(template).appendTo($(this));
$("#" + id + "_MoveLeft").click(_moveLeft);
$("#" + id + "_MoveRight").click(_moveRight);
$("#" + id + "_MoveLeftAll").click(_moveLeftAll);
$("#" + id + "_MoveRightAll").click(_moveRightAll);
// init left list
if(settings.leftitems) {
leftitems(settings.leftitems);
}
// init right list
if(settings.rightitems) {
rightitems(settings.rightitems);
}
return this;
}
});
})(jQuery);
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>moving items</title>
<script language="javascript" type="text/javascript" src="/aps-res/js/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery.movingitems.js"></script>
<script language="javascript" type="text/javascript">
var mi;
$(function(){
// the other way to init the items
//$("#itemsContainer").movingitems({"leftitems":[{"value":"001","text":"中国"},{"value":"003","text":"美国"}],"rightitems":[{"value":"002","text":"澳大利亚"},{"value":"004","text":"英国"}]});
// init the items
mi = $("#itemsContainer").movingitems(jQuery);
mi.leftitems([{"id":"001","label":"中国"},{"id":"003","label":"美国"},{"id":"005","label":"俄国"},{"id":"006","label":"法国"},{"id":"007","label":"德国"},{"id":"008","label":"朝鲜"},{"id":"009","label":"新加坡"},{"id":"010","label":"马来"}]);
mi.rightitems([{"id":"002","label":"澳大利亚"},{"id":"004","label":"英国"}]);
});
function getitems () {
alert("左边数据：" + mi.leftitems());
alert("右边数据：" + mi.rightitems());
}
</script>
<style type="text/css">
button.i-item-addselect {
background-color: transparent;
background-image: url("../images/add-selected.gif");
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
height: 16px;
width: 16px;
}
button.i-item-addall {
background-color: transparent;
background-image: url("../images/add-all.gif");
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
height: 16px;
width: 16px;
}
button.i-item-remove {
background-color: transparent;
background-image: url("../images/remove-selected.gif");
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
height: 16px;
width: 16px;
}
button.i-item-removeall {
background-color: transparent;
background-image: url("../images/remove-all.gif");
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
height: 16px;
width: 16px;
}
</style>
</head>
<body>
<div id="itemsContainer"></div>
<div style="cursor:pointer;" onclick="getitems();">
测试获取数据
</div>
</body>
</html>