第一篇博客，因为要实现左右切换的功能，所以自己写了一个小工具（水平有限，勿喷..），具体功能如下：
使用方法，首先引入changepicker.js和 changepicker.css；需要一个容器div，因为长宽没有做适配处理，所以容器div最小宽高为425*345
（里面用了bootstrap的两个图标class，需要全选时，引入bootstrap.css）
<div id="change" ></div>
1、默认情况下，直接引入data便可以生成控件
var data=[{id:2,name:"测试"},{id:3,name:"实验"}];
$("#change").changepicker(data);
2、如果需要设置显示属性，则需要引入option,具体所需属性根据需要进行修改
var option={
move: false, //点击是否保留左侧子项
title: true, //是否显示标题
title_left: "可选", //默认左侧标题
title_right: "已选", //默认右侧标题
title_search:false, //是否需要搜索框
title_search_pla:"请输入搜索内容", //搜索框 palceholder
show_all:false //显示全选 按钮
}
$("#change").changepicker(data,option);
3、获取右侧选中的目标所有id
$("#change").changepicker.getIds();
4、获取右侧选中目标所有名称
$("#change").changepicker.getNames();
5、在已加载数据情况下，设置右侧选中数据
var data=[2,3];
$("#change").changepicker.setChange(data);
/*********************************************************************
/*
* changepicker.css
* [email protected]
*/
.change_item table thead tr th, .change_item table tbody tr th, .change_item table thead tr td, .change_item table tbody tr td{
padding: 6px !important;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
text-align: left;
font-size: 12px;
}
.change_item table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.change_item table tbody tr:hover{background: #f5f5f5 !important; }
.change_item table td{min-height: 37px;}
.change_item table tfoot{font-size: 12px;display: inline-block;padding: 10px;}
.change_item{margin: 5px;min-width: 200px;display: inline-block;text-align: left;}
.change_title{min-height: 30px;padding-bottom: 5px;}
.change_title input{width: 100% !important;outline: none;height: 30px !important;padding-left: 5px;font-size: 12px;}
.change_title_txt{line-height: 30px;padding-left: 5px;}
.change_item_table{border: 1px solid lightgray;height: 300px;overflow: auto;}
.change_check_all{cursor: pointer;text-align: center;background: #f5f5f5;border: 1px solid #dddddd;}
.change_check_all:hover{background: #dddddd;}
.change_check_all th{text-align: center;}
.change_side{cursor: pointer;} /*
* changepicker.js
* [email protected]
*/
$.fn.changepicker = function (result,options) {
var $this = this;
var defaultOptions = {
move: false, //是否保留左侧子项
title: true, //是否显示标题
title_left: "可选", //默认左侧标题
title_right: "已选", //默认右侧标题
title_search:true, //是否需要搜索框
title_search_pla:"请输入搜索内容", //搜索框 palceholder
show_all:false //显示全选
};
options = $.extend(true, {}, defaultOptions, options);
var Stl=Str="<div class='change_item'>";
if(options.title){
if(!options.title_search){
Stl+="<div class='change_title' ><span class='change_title_txt'>"+options.title_left+"</span></div>";
}else{
Stl+="<div class='change_title' ><input type='text' class='change_input' placeholder='"+options.title_search_pla+"'></div>";
}
Str+="<div class='change_title' ><span class='change_title_txt'>"+options.title_right+"</span>：<span id='change_count'>0</span></div>";
}
var t1="<div class='change_item_table'><table><thead><tr data-direc='";
var t2="'class='change_check_all'>"
var all_l="";var all_r="";
if(options.show_all){
all_l="<th>全选 <i class='glyphicon glyphicon-arrow-right'></i><i class='glyphicon glyphicon-arrow-right'></i></th>"
all_r="<th>全选 <i class='glyphicon glyphicon-arrow-left'></i><i class='glyphicon glyphicon-arrow-left'></i></th>"
}
Stl+=t1+"left"+t2+all_l+"</tr></thead><tbody class='table_change_left'></tbody><tfoot></tfoot></table></div></div>";
Str+=t1+"right"+t2+all_r+"</tr></thead><tbody class='table_change_right'></tbody></table></div></div>";
this.append(Stl);
this.append(Str);
if(result){
initChange(result,this);
}
$this.find(".change_side").on("click", function() {
var table;
var clickThis=$(this);
if("table_change_left" == clickThis.parent().prop("class")) {
table = $this.find(".table_change_right");
} else {
table = $this.find(".table_change_left");
}
if(options.move){//保留左边数据
table.append(clickThis);
}else{
if(table.prop("class")=="table_change_left"){
clickThis.remove();
}else{
if(table.find("tr").length==0){
table.append(clickThis.clone(true));
}else{
var isPend=0;
table.find("tr").each(function(){
if($(this).data("id")==clickThis.data("id")){
isPend+=1;
}
});
if(isPend==0){
table.append(clickThis.clone(true));
}
}
}
}
$this.find("#change_count").text($this.find(".table_change_right").children().length);
});
/**
* 全选事件
*/
$this.find(".change_check_all").on("click", function() {
var table;var mother;
if("right" == $(this).data("direc")) {
table = $this.find(".table_change_left");
mother = $this.find(".table_change_right");
} else {
table = $this.find(".table_change_right");
mother = $this.find(".table_change_left");
}
if(options.move){
mother.children().appendTo(table);
}else{
if(table.prop("class")=="table_change_left"){
mother.html("");
}else{
var isPend=0;
mother.each(function(){
var $fthis=$(this);
if(table.children().length==0){
table.append(mother.find("tr").clone(true));
}else{
table.each(function(){
if($(this).data("id")==$fthis.data("id")){
isPend+=1;
}
});
if(isPend==0){
$this.find(".table_change_right").append($fthis.clone(true));
}
}
});
}
}
changeCount($this);
});
/**
* 搜索栏 事件
*/
$this.find(".change_input").on("input", function() {
var count=0;
var sum=$this.find(".table_change_left tr").length;
$this.find(".table_change_left tr").each(function(){
if($(this).find(".change_td").text().indexOf($this.find(".change_input").val())>=0){
$(this).removeAttr("hidden");
}else{
$(this).attr("hidden","hidden");
count+=1;
}
if(sum===count){
$this.find(".table_change_left").parent().find("tfoot").html("没有找到要搜索的内容");
}else{
$this.find(".table_change_left").parent().find("tfoot").html("");
}
});
});
/**
* 显示已选数量
*/
function changeCount($this){
$this.find("#change_count").text($this.find(".table_change_right").children().length);
}
/**
* 加载数据
*/
function initChange(result,$this){
for (var x=0;x<result.length;x++){
var child=result[x];
var par=$this.find(".table_change_left");
var cId=cName="";
if(result[x].name){
cName=result[x].name;
}
if(result[x].id){
cId=result[x].id;
var htm="<tr data-id = '"+cId+"' class='change_side' ><td class='change_td'>"+cName+"</td></tr>";
par.append(htm);
}
}
changeCount($this);
}
/**
* 获取 选中的 id
*/
$.fn.changepicker.getIds = function () {
var ids="";
$this.find(".table_change_right tr").each(function(){
if(""!=$(this).data("id")){
if(ids==""){
ids=$(this).data("id");
}else{
ids+=","+$(this).data("id");
}
}
});
return ids;
}
/**
* 获取 选中的 text
*/
$.fn.changepicker.getNames = function () {
var ids="";
$this.find(".table_change_right tr").each(function(){
if(""!=$(this).find("td").text()){
if(ids==""){
ids=$(this).find("td").text();
}else{
ids+=","+$(this).find("td").text();
}
}
});
return ids;
}
/**
* 设置选中 目标
*/
$.fn.changepicker.setChange = function (ids) {
$this.find(".table_change_right").html("");
$this.find(".table_change_left tr").each(function(){
var $fthis=$(this);
for (var x in ids){
if(ids[x]==$fthis.data("id")){
if(options.move){
$fthis.appendTo($this.find(".table_change_right"));
}else{
var isPend=0;
$this.find(".table_change_right").each(function(){
if($(this).data("id")==$fthis.data("id")){
isPend+=1;
}
});
if(isPend==0){
$this.find(".table_change_right").append($fthis.clone(true));
}
}
}else{
//需要处理右边的数据，但是不处理也没有什么问题。因为加载的时候数据在左边
}
}
});
changeCount($this);
};
};