table表格内容互换

以下为项目实现效果：

图表运用了bootstrap-table，左右两边的表格可以进行内容交换，可全选，可搜索。

以下附上代码：

areaSite.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>地区站点</title><link rel="stylesheet" type="text/css" href="../css/reset.css" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.css" /><link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" /><!--页面特有css--><link rel="stylesheet" type="text/css" href="../css/areaSite.css" /><script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script><script src="../js/bootstrap.js"></script><script src="../js/bootstrap-table.min.js"></script><script src="../js/bootstrap-table-zh-CN.min.js"></script><script src="../js/Transfer2.js"></script><!--页面特有js--><script type="text/javascript" src="../js/areaSite.js"></script>
</head>
<body>
<div class="instrumentLogCon"><div id="tran"></div><div class="save-box"><a href="javascript:;" class="determine" id="save">保存</a></div>
</div>
</body>
</html>复制代码

areaSite.css

.instrumentLogCon {width:70%;padding:20px;border: 1px solid #dcdcdc;
}
.area {padding: 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;
}
#tran {width: 100%;height: 400px;
}
.transferBox {height: 100%;
}
.shuttleBtn {height: 100%;
}
.transferBtn .btn {display: block;
}
.transferBtn .btn:first-child {margin-bottom: 20px;
}
.transferBtn .btnList {position: absolute;width: 80%;top: 50%;margin-top: -40px;
}
.transferBox .search {width: 100%;
}
.transferBtn .btn-default,
.btn-info {width: 74px;height: 34px;color: white;text-shadow: none;border: 0;cursor: no-drop;background: #30b0fd;background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);
}
.btn-info {cursor: pointer;
}
.fixed-table-container {min-height: 302px!important;padding-bottom: 41px!important;border: 0;
}
.bootstrap-table .table > thead > tr > th {border-bottom: 0;
}
.unselectTitle,
.selectTitle {padding: 10px 0 0 0!important;
}
.save-box {text-align: center;margin-top: 40px;
}
.fixed-table-container thead th:first-child:not([data-not-first-th]),
.fixed-table-container tbody td:first-child {border-left: 1px solid #ededed;
}
.unselectTitle,
.selectTitle {margin-bottom: 10px !important;font-size: 18px;
}
#save{display: inline-block;width: 90px;height: 40px;background: #30b0fd;background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);font-size: 16px;color: white;text-align: center;line-height: 40px;border-radius: 4px;
} 复制代码

areaSite.js

$(document).ready(function(){// 常规配置方式和区域配置方式切换$(".dataAndLongRange span").click(function(){$(this).addClass("selected").siblings("span").removeClass("selected").parent().siblings(".dataAndLongRangeCon").children("div").eq($(this).index()).addClass("selected").siblings().removeClass("selected");})var data = [{"importUnitId": '1',"importUnitName": "站点1","flag": false},{"importUnitId": '2',"importUnitName": "站点2","flag": false},{"importUnitId": '3',"importUnitName": "站点3","flag": false,},{"importUnitId": '4',"importUnitName": "站点4","flag": false},{"importUnitId": '5',"importUnitName": "站点5","flag": true},{"importUnitId": '6',"importUnitName": "站点6","flag": true}]transfer(data)// 保存$('#save').click(function () {var data= $('#tran').transfer('getData', 'selectData', 'importUnitId');console.log(data)})
});// 给穿梭框赋值
function transfer(data) {// 销毁实例$('#tran').transfer('destroy')// 重新渲染$('#tran').transfer({titles: ['无权限站点列表', '已有权限站点列表'],search: true,uniqueId: "importUnitId",//唯一iddataSource: data,maxSelect: 6,diffKey: 'flag',unselectColumns: [{field: 'flag',checkbox: true},{field: 'importUnitName',title: '站点列表'}]});
}复制代码

transfer2.js

(function ($, window, document) {var transfer = function (el, options) {this.option = options;this.$el = $(el);this.selectData=[];this.unselectData=[];this.init();};transfer.DEFAULTS = {titles:['待选列表','已选列表'],search: true,///是否显示搜索查询showRefresh: false,//clickToSelect: true,pagination: false,//是否支持分页autoHeight:false,paginationDetail:false,maxSelect:undefined,uniqueId: "",//每行的iddataSource:[],//默认数据源为同一个  内部会通过diffKey去区分是待选框的  还是已选框的数据，如果selectdataSource存在  则或解析为待选数据框里的数据selectdataSource:undefined,diffKey:'flag',selectColumns:[],unselectColumns:[]};transfer.prototype = {init: function () {this.initoption();this.initContainer();this.initBothTable();this.classifyData();this.initEvent();},/** 渲染穿梭框页面结构*/initContainer: function () {var _this=this;var  containerHtml=['<div class="col-sm-5 transferBox">','<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">'+this.unselectTitle+'<span style="margin-left: 5px;">(<span id="checkedNum1"></span><span id="unselectTotalNum"></span>)</span></h3>','<table id="transferUnselectTable"></table>','</div>','<div class="col-sm-1 transferBtn" style="height: 100%">','<div class="btnList">','<span class="btn btn-default  forwardBtn" >添加 >></span>','<span class="btn btn-default  backwardBtn" ><< 移出</span>','</div>','</div>','<div class="col-sm-5 transferBox">','<h3 class="selectTitle" style="margin: 0;padding: 5px 0 10px 0;">'+this.selectTitle+'<span style="margin-left: 5px;">(<span id="checkedNum2"></span><span id="selectTotalNum"></span>)</span></h3>','<table id="transferSelectTable"></table>','</div>'].join('');this.$el.html(containerHtml);this.$unselectTable=this.$el.find('#transferUnselectTable');//待选表格this.$unselectTotalNum=this.$el.find('#unselectTotalNum');//存放待选表格内总的数量this.$checkedNum1=this.$el.find('#checkedNum1');//存放待选表格中已勾选的数量this.$forwardBtn=this.$el.find('.forwardBtn');//向待选表格内添加的按钮this.$selectTable=this.$el.find('#transferSelectTable');//已选表格this.$selectTotalNum=this.$el.find('#selectTotalNum');//存放已选表格内总的数量this.$checkedNum2=this.$el.find('#checkedNum2');//存放已选表格中已勾选的数量this.$backwardBtn=this.$el.find('.backwardBtn');//向待选表格内添加的按钮this.option.height=this.$el.outerHeight()-this.$el.find('h3.unselectTitle').outerHeight()-8;},/** 参数处理*/initoption:function(){/** 两边标题参数处理*/if(typeof this.option.titles=='string'|| (this.option.titles instanceof Array&&this.option.titles.length==1)){this.selectTitle=this.unselectTitle=this.option.titles+'';}else if(this.option.titles instanceof Array&&this.option.titles.length>1){this.unselectTitle=this.option.titles[0];this.selectTitle=this.option.titles[1];}/** 两个table渲染内容若一样，给任意一个columns即可*/if(this.option.selectColumns instanceof Array&&this.option.unselectColumns instanceof Array&&(!this.option.selectColumns.length&&this.option.unselectColumns.length)){this.option.selectColumns=JSON.parse(JSON.stringify(this.option.unselectColumns));}else if(this.option.selectColumns instanceof Array&&this.option.unselectColumns instanceof Array&&(this.option.selectColumns.length&&!this.option.unselectColumns.length)){this.option.unselectColumns=JSON.parse(JSON.stringify(this.option.selectColumns));}else if(!this.option.selectColumns instanceof Array||!this.option.unselectColumns instanceof Array){console.error('参数selectColumns和unselectColumns必须为数组');return false;}/** 两边table两边渲染选中的field不能一样，此处强制替换了，参数中可不写field*/this.option.selectColumns[0].field=this.option.diffKey+'s';this.option.unselectColumns[0].field=this.option.diffKey;},/** 从数据中挑出已选列表和待选列表的数据*/classifyData:function(){/**数据源如果为同一个则通过diffKey去区分*  */if(!this.option.dataSource){console.error('dataSource参数为必填项，请检查');return false;}if(this.option.selectdataSource){this.selectData=this.option.selectdataSource;this.unselectData=this.option.dataSource;}else{for(var i=0;i<this.option.dataSource.length;i++){if(this.option.dataSource[i][this.option.diffKey]){this.selectData.push(this.option.dataSource[i]);}else{this.unselectData.push(this.option.dataSource[i]);}}}this.refreshTable();this.showTotalNum();},/** 当数据发生变化重新渲染表格*/refreshTable:function(){this.$unselectTable.bootstrapTable("load",this.unselectData);this.$selectTable.bootstrapTable("load",this.selectData);},/** 当表格数据总量发生变化，相应改变其总数*/showTotalNum:function(){this.$unselectTotalNum.html(this.unselectData.length+'条');this.$selectTotalNum.html(this.selectData.length+'条');},/** 初始化表格，开始是没有数据加入*/initBothTable:function(){var _this=this;this.$unselectBootstrapTable=this.$unselectTable.bootstrapTable({search: _this.option.search,showRefresh: _this.option.showRefresh,showToggle: false,showColumns: false,paginationDetail:_this.option.paginationDetail,clickToSelect: _this.option.clickToSelect,pagination: _this.option.pagination,sidePagination: 'client',autoHeight:false,height:_this.option.height,data:[],sortName: "createTime",sortOrder: "desc",uniqueId: _this.option.uniqueId,columns:_this.option.unselectColumns});this.$selectBootstrapTable=this.$selectTable.bootstrapTable({search: _this.option.search,showRefresh: _this.option.showRefresh,showToggle: false,paginationDetail:_this.option.paginationDetail,showColumns: false,clickToSelect: _this.option.clickToSelect,pagination: _this.option.pagination,autoHeight:false,height:_this.option.height,data:[],sortName: "createTime",sortOrder: "desc",uniqueId: _this.option.uniqueId,columns:_this.option.selectColumns});this.$selectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {var num=_this.$selectTable.find('tr input[name="btSelectItem"]:checked').length;if(num){_this.$backwardBtn.removeClass('btn-default').addClass('btn-info');_this.$checkedNum2.html(num+'/');}else{_this.$backwardBtn.removeClass('btn-info').addClass('btn-default');_this.$checkedNum2.html('');}});this.$unselectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {var num=_this.$unselectTable.find('tr input[name="btSelectItem"]:checked').length;if(num){_this.$forwardBtn.removeClass('btn-default').addClass('btn-info');_this.$checkedNum1.html(num+'/');}else{_this.$forwardBtn.removeClass('btn-info').addClass('btn-default');_this.$checkedNum1.html('');}});},/** 请求数据*/initServer:function(){var _this=this;if(this.option.url){if(typeof this.option.url=='string'){this.option.url=[this.option.url];}if(typeof this.option.type=='string'){this.option.type=[this.option.type];}/* if(typeof this.option.queryParams=='string'){this.option.queryParams=[this.option.queryParams];}*/$.ajax({url: _this.option.url[0],type: _this.option.type[0],data:_this.option.queryParams[0],contentType: 'application/json', //对应后台的@RequestBodysuccess: function (res) {if(res.success){}},error: function (result) {}});}},/** 初始化点击事件*/initEvent:function(){var _this=this;this.$forwardBtn.click(function(){_this.transferData($(this),1);});this.$backwardBtn.click(function(){_this.transferData($(this),0);});},/** 获取选中行的id*/getSelect:function($tr){return  $.map($tr,function(ele,index){if($(ele).find('input[name="btSelectItem"]').is(':checked')){return $(ele).attr("data-uniqueid");}});},/** 两边数据穿梭逻辑* @params type：穿梭方向*/transferData:function($dom,type){var _this=this;if(!$dom.hasClass('btn-info')){return false;}if(type){var selectList=this.getSelect(this.$unselectTable.find('tbody tr'));if((this.option.maxSelect-0)&&typeof (this.option.maxSelect-0)=="number"){var currenNum=selectList.length+this.selectData.length;if(currenNum>this.option.maxSelect){ns.failMsg(this.selectTitle+'最多只能存在'+this.option.maxSelect+'个，您选的太多了！');return false;}}for(var i=0;i<this.unselectData.length;i++){if(selectList.indexOf(this.unselectData[i][this.option.uniqueId])>=0){this.unselectData[i][this.option.selectColumns[0].field]=false;this.selectData.push(this.unselectData[i]);this.unselectData.splice(i,1);i--;}}this.refreshTable();this.$forwardBtn.removeClass('btn-info').addClass('btn-default');this.$checkedNum1.html('');}else{var selectList=this.getSelect(this.$selectTable.find('tbody tr'));for(var i=0;i<this.selectData.length;i++){if(selectList.indexOf(this.selectData[i][this.option.uniqueId])>=0){this.selectData[i][this.option.unselectColumns[0].field]=false;this.unselectData.push(this.selectData[i]);this.selectData.splice(i,1);i--;}}this.refreshTable();this.$backwardBtn.removeClass('btn-info').addClass('btn-default');this.$checkedNum2.html('');}this.showTotalNum();},/** 暴露到外面的实例的方法，可返回两个表格内的数据集合* @params type： 必填 unselectData待选列表数据，selectData已选列表数据* @params arr: 非必填 若不存在直接返回源数据集合，若配置字段名则返回所需的字段集合*/getData:function(type,arr){if(!type){console.error('请填写想要返回的数据名称unselectData或selectData');return false;}if(arr&&typeof arr=='string'){return $.map(this[type],function(item,index){return item[arr];});}else if(arr&&arr instanceof Array && arr.length>0){return $.map(this[type],function(item,index){var obj={};for(var i=0;i<arr.length;i++){obj[arr[i]]=item[arr[i]];}return obj;});}else{return this[type];}},/** 销毁实例*/destroy :function () {this.$el.html('');}}var allowedMethods = ['refresh','destroy','getData'];$.fn.transfer = function (option) {   //向jQuery注册插件var e = this, value,args = Array.prototype.slice.call(arguments, 1);e.each(function () {var $this = $(this),data = $this.data('transfer'),options = $.extend({}, transfer.DEFAULTS, $this.data(),typeof option === 'object' && option);if (typeof option === 'string') {if ($.inArray(option, allowedMethods) < 0) {throw new Error("Unknown method: " + option);}if (!data) {return;}value = data[option].apply(data, args);if (option === 'destroy') {$this.removeData('transfer');}}if (!data) {$this.data('transfer', (data = new transfer(this, options)));}});return typeof value === 'undefined' ? this : value;};$.fn.transfer.Constructor = transfer;$.fn.transfer.defaults = transfer.DEFAULTS;$.fn.transfer.methods = allowedMethods;
})(jQuery, window, document);        复制代码

剩下的bootstrap以及bootstrap-table的代码我就不放上来啦，需要的自行去官网下载哦~

table表格内容互换相关推荐

Table表格内容超长时：自动截取、自动换行
表格内容过长而变形的解决方法. 在表格加入如下属性设置: style="TABLE-LAYOUT:fixed;WORD-WRAP:break_word" 上面显示有超过表格长度的自 ...
element-ui table表格内容相同自动合并
项目需求:第二列的内容如果相同,则合并单元格,并且序号也合并: 实现方法: 1.rowspan()方法在获取数据之后调用 rowspan() {this.spanArr = [];//在data里面定 ...
bootstraptable 居中_bootstrap table表格内容居中对齐
在开发项目的时候,发现了一款JS组件系列--表格组件神器 ,官方文档也比较简单,总结了一些常遇到的问题实现一个简单的表格和分页,内容居中对齐图片.png Dashboard | Nadhif - ...
java解析页面table表格内容导出为excel
最近,因为项目中需要做到各个终端兼容,所以在报表预览时必须通用,所以采用后台生成html表格代码,前台通过jquery的load方法载入设置到指定位置. 生成excel时,通过解析html表格操作,就 ...
layui中table表格内容过多自动换行
表格超出内容没有自动换行,超出部分需要自动换行. 允许长单词换行到下一行:p.test {word-wrap:break-word;}
VUE element-ui之table表格内容添加千位分割符/货币格式
步骤: 定义转换方法 <el-table-column prop="regDayToNow" label="距离注册时间(天)" width=" ...
element UI (table表格)
table 左对齐 <el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-a ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...

table表格内容互换

table表格内容互换相关推荐

最新文章

热门文章