jquery实现行列的单向固定和列的拖拽
其实这些功能在PL/SQL Dev中都有实现，在页面中还是蛮常见的。
我实现列的单向固定的原理：将需要单向固定的列放在一个<table>标签中，而整体的数据放在另一个<table>标签中。
列的拖拽：使用onstartdrag、ondragover、drop事件
<!DOCTYPE HTML>
<html>
<head>
<title>table拖拽与行列固定</title>
<script src="jquery1.11.3.js"></script>
<style>
#big_div {
position: absolute;
background: white;
WIDTH: 700px;
height: 500px;
overflow-y: auto;
overflow-x: scroll;
border: black 1px solid;
z-index: 1;
} #table_total {
WIDTH: 900px;
} #div_head_cloumn {
position: absolute;
z-index: 100;
background: yellow;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 0px solid black;
border-bottom: 0px solid black;
} #div_head {
position: absolute;
z-index: 10;
background: #C0C0C0;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 0px solid black;
border-bottom: 0px solid black;
overflow: hidden;
} #table_head {
position: absolute;
width: 900px;
} #div_column {
position: absolute;
z-index: 50;
background1: white;
background: #93DB70;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 0px solid black;
border-bottom: 0px solid black;
overflow: hidden;
border-left: 1px solid black;
border-right: 0px solid black;
border-bottom: 0px solid black;
border-right: 0px solid black;
border-bottom: 0px solid black;
border-bottom: 0px solid black;
} #Vscrollable {
position: absolute;
}
</style>
</head>
<body>
<div id="div_head_cloumn">
<table id="table_head_cloumn">
<tr>
<th id="th_head_cloumn" class="fixed">FX_ID</th>
</tr>
</table>
</div> <div id="div_head">
<table id="table_head">
<tr id="tr_table_head">
<th id="head_th1" class="index_1">FX_ID</th>
<th id="head_th2" class="index_2">FX_MC</th>
<th id="head_th3" class="index_3">FX_DM</th>
<th id="head_th4" class="index_4">NSRSBM</th>
<th id="head_th5" class="index_5">NSR_MC</th>
</tr>
</table>
</div> <div id="div_column">
<table id="Vscrollable">
<tr>
<th>FX_ID</th>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
<tr>
<td>5160DFE2DE97BF89E053065B0C8D785F</td>
</tr>
</table>
</div>
<div>ssss</div>
<div id="big_div" onscroll="onscroll_function()">
<table id="table_total"> <tr id="tr_th" class="transform">
<th id="th1" class="index_1">FX_ID</th>
<th id="th2" class="index_2">FX_MC</th>
<th id="th3" class="index_3">FX_DM</th>
<th id="th4" class="index_4">NSRSBM</th>
<th id="th5" class="index_5">NSR_MC</th>
</tr> <tr id="tr_td_1" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_2" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">913201147568649920</td>
<td class="index_5">南京中太</td>
</tr>
<tr id="tr_td_3" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">320103738870483</td>
<td class="index_5">南京中宁制冷空调技术服务中心</td>
</tr>
<tr id="tr_td_4" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_5" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_6" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_7" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_8" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_9" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
<tr id="tr_td_10" class="transform">
<td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
<td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
<td class="index_3">320010ZB00001139</td>
<td class="index_4">91320104MA1MMKK006</td>
<td class="index_5">南京月凌舞文化艺术培训中心</td>
</tr>
</table>
</div> <p id="demo"></p>
<script>
//alert(getScrollBarWidth());
/*设置head_cloumn的位置和大小，jquery中css()方法设置样式*/
$("#div_head_cloumn").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
$("#div_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top);
$("#div_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left);
$("#table_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2);//table 与div间隔1 absoulte属性会是div大小随内容被撑开
$("#table_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2);//thead+1,tr+1,th+1 /*设置head的位置和大小 并设置其中每个th的大小*/
$("#div_head").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
$("#div_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top);
$("#div_head").css("width",700-getScrollBarWidth());//没有特殊设置的话滚动条宽度固定为16px
//$("#table_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2);
//$("#table_head").css("width",$("#tr_th").width()+684);//thead+1,tr+1,th+1
$("#table_head th").each(function(index1, element1) {//利用each循环（jquery中的方法）将各个th的宽度设置好
$("#big_div th").each(function(index2, element2) {
if($(element2).attr("id")==("th"+(index1+1))){//jquery中attr()方法设置属性
$(element1).css("width",$(element2).css("width"));
return false;
}
});
}); /*设置cloumn的位置和大小 并设置其中每个tr的大小*/
$("#div_column").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
$("#div_column").css("height",$("#big_div").height()-getScrollBarWidth());
$("#div_column").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left);
$("#Vscrollable").css("height",$("#table_total").height());
$("#Vscrollable").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2);
$("#Vscrollable tr:first").css("height",$("#tr_th").css("height"));
$("#Vscrollable tr").each(function(index1, element1) {//同样利用each将各个tr的高度设置好
if(index1==0){
return true;
}
$("#big_div tr").each(function(index2, element2) {
if($(element2).attr("id")==("tr_td_"+index1)){
$(element1).css("height",$(element2).css("height"));
return false;
}
});
});
//$("#Vscrollable tr").css("height",$("#tr_td_1").css("height"));
//$("#Vscrollable tr:first").css("height",$("#tr_th").css("height")); /*单向固定的方法，逻辑：实时传递大div的滚动条位置给小div的滚动条(小div的滚动条是隐藏的)*/
function onscroll_function() {
document.getElementById("table_head").style.left = document
.getElementById("big_div").scrollLeft
* -1 + 'px';
document.getElementById("Vscrollable").style.top = document
.getElementById("big_div").scrollTop
* -1 + 'px';
} /*----------------------------------------------------------------*/ //获得滚动条宽的
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px"; var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner); document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2);
} var _target;//拖拽的元素//声明变量
var _droptarget;//触发drop事件的元素
var end_X = 0;//drop时鼠标位置
var end_Y = 0;
var e_left = 0;//触发drop事件的元素的位置(绝对)
var e_width = 0;//触发drop事件的元素的宽度
var ifFixed = false;//是否被固定
var first_cell = $("#head_th1");//第一个单元格
var first_cell_class = $(first_cell).attr("class");//第一个单元格的class
$("th").attr("draggable",true);//attr设置属性css设置样式
var width_balance = $("#th1").offset().left-$("#big_div").offset().left;//宽度差额 //设置鼠标在id为"sortable1"的元素上时的样式为"move"
document.getElementById("tr_th").style.cursor = "move";
document.getElementById("div_head_cloumn").style.cursor = "move";
document.getElementById("div_head").style.cursor = "move"; //jquery绑定方法，当p发生dragstart事件时触发此方法
$('th').on('dragstart',function(e){
_target = e.target;
//如果拖拽的元素是固定的列，就把固定列下面的活动的列赋值给_target
if($(e.target).attr("class")=="fixed"){
ifFixed = true;
_target = first_cell;
}
}); //jquery绑定方法，当p发生dragover事件时触发此方法
$('th').on('dragover',function(e){
e.preventDefault();//该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
}); //jquery绑定方法，当p发生drop事件时触发此方法
$('th').on('drop',function(e){
event.preventDefault();
_droptarget = event.srcElement;//获得事件的源对象
if($(_droptarget).attr("class")=="fixed"){
ifFixed = true;
_droptarget = first_cell;
}
end_X = event.pageX;
end_Y = event.pageY;
e_left = $(_droptarget).offset().left;
e_width = $(_droptarget).width(); if ($(_droptarget).attr("draggable") == "true") {//draggable属性，为true时可拖拽，false时不可拖拽
if (end_X<(e_left+e_width/2))
$(_droptarget).before($(_target));//before方法 语法$(selector).before(content);将content添加到选定的元素之前
if (end_X>=(e_left+e_width/2))
$(_droptarget).after($(_target));//after()方法
} var arrayObj_th = new Array();//创建一个数组 $("#tr_table_head>th").each(function() {//each遍历
arrayObj_th.push($(this));//push数组的添加元素操作
}); //alert($("#tr_td_1 td").size());
$(".transform").each(function(index1, element1) {
var arrayObj_td = new Array();
var arrayObj_td_temp = new Array();
// alert(index1);
for(var i=1;i<=arrayObj_th.length;i++){
arrayObj_td_temp.push($(this).children(".index_"+i));
} $.each(arrayObj_th, function (index, item) {
$.each(arrayObj_td_temp, function (index2, item2) {//index2:下标、item2:元素(Object)
//attr获取/设置元素的属性值
if(item.attr("class")==item2.attr("class")){//元素.attr("class")获取该元素的class值
arrayObj_td.push(item2);}
});
}); for(var i=arrayObj_td.length-1;i>=0;i--){
arrayObj_td[i].before(arrayObj_td[i-1]);
}
});
if(ifFixed==true){//如果拖拽的元素是固定的列，改变固定列的大小、文本内容
ifFixed=false;
first_cell = arrayObj_th[0];
first_cell_class = $(first_cell).attr("class");
$("#div_head_cloumn").css("width",$(first_cell).width()+width_balance);
$("#table_head_cloumn").css("width",$(first_cell).width()+width_balance-2);//thead+1,tr+1,th+1
$("#th_head_cloumn").text($(first_cell).text()); $("#div_column").css("width",$(first_cell).width()+width_balance);
$("#Vscrollable").css("width",$(first_cell).width()+width_balance-2);
//$("#Vscrollable tr").css("height",$("#tr_td_1").css("height"));
//$("#Vscrollable tr:first").css("height",$("#tr_th").css("height")); $("#table_total ."+first_cell_class).each(function(index, element) {
if($(element).attr("class")==first_cell_class){
$("#Vscrollable th,td").eq(index).text($(element).text());
}
});
}
});
</script>
</body>
</html>
jquery实现行列的单向固定和列的拖拽的更多相关文章
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- 关于js在一个固定的盒子里面拖拽的问题（包含临界值）
回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有 onmousedown,onmo ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...
- 固定标题列、标题头table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- visual stdio2013软件安装及单元测试
visual stdio2013软件安装及单元测试 一.visual stdio2013软件安装详解 今天,笔者为大家带来如何在Windows10下完美安装Visual Studio 2013专业版. ...
- Scrum 项目2.0 3.0
顺带 MY—HR 成员: 角色分配 学号 博客园 团队贡献分 丘惠敏 PM项目经理 201406114203 http://www.cnblogs.com/qiuhuimin/ 19 郭明茵 用户 2 ...
- Scrum Meeting Beta - 5
Scrum Meeting Beta - 5 NewTeam 2017/12/4 地点:主楼2楼走廊 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了离线状态进入app的功能 实现离线状态读取本 ...
- Alpha阶段敏捷冲刺⑦
1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 账单明细和报表的界面设计在同一界面 今天要做的工作 对于报表扇形图的 ...
- 微信小程序入门一: 简易form、本地存储
实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 实例一: 登陆界面 在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相 ...
- PHP学习心得1
php是动态网站开发的优秀语言,在学习的时候万万不能冒进.在系统的学习前,我认为不应该只是追求实现某种效果,因为即使你复制他人的代码调试成功,实现了你所期望的效果,你也不了解其中的原理,这样你很难利用 ...
- 官方下拉刷新控件SwipeRefreshLayout的使用
今天看博客,发现有了这个下拉刷新的控件,效果看上去还蛮好的,于是我也想研究的是使用一下,写个demo.其实使用很简单的,但就是为了能使用这个新组建我下了好久的更新,后来还是直接去官网下载最新的ADT得 ...
- poj 2299 Ultra-QuickSort（树状数组求逆序数）
链接:http://poj.org/problem?id=2299 题意:给出n个数,求将这n个数从小到大排序,求使用快排的需要交换的次数. 分析:由快排的性质很容易发现,只需要求每个数的逆序数累加起 ...
- Python Web开发之Flask
PythonWEB框架之Flask 前言: Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenT ...
- 【算法】—— 1到n中减少了一个数，顺序被打乱，找出缺失的数
问题 有0-n这n+1个数,但是其中丢了一个数,请问如何找出丢了哪个数? 五种方法 1)用1+2+...+n减去当前输入数据的总和.时间复杂度:O(n) 空间复杂度:O(1) [容易溢出] 2)用12 ...