html左右切換功能實現
阿新 • • 發佈：2018-11-28
第一篇部落格，因為要實現左右切換的功能，所以自己寫了一個小工具（水平有限，勿噴..），具體功能如下：
使用方法，首先引入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);
};
};