jquery实现行列的单向固定和列的拖拽
2017-08-03 11:29
330 查看
其实这些功能在PL/SQL Dev中都有实现，在页面中还是蛮常见的。
我实现列的单向固定的原理：将需要单向固定的列放在一个<table>标签中，而整体的数据放在另一个<table>标签中。
列的拖拽：使用onstartdrag、ondragover、drop事件
我实现列的单向固定的原理：将需要单向固定的列放在一个<table>标签中，而整体的数据放在另一个<table>标签中。
列的拖拽：使用onstartdrag、ondragover、drop事件
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>table拖拽与行列固定</title>
5 <script src="jquery1.11.3.js"></script>
6 <style>
7 #big_div {
8 position: absolute;
9 background: white;
10 WIDTH: 700px;
11 height: 500px;
12 overflow-y: auto;
13 overflow-x: scroll;
14 border: black 1px solid;
15 z-index: 1;
16 }
17
18 #table_total {
19 WIDTH: 900px;
20 }
21
22 #div_head_cloumn {
23 position: absolute;
24 z-index: 100;
25 background: yellow;
26 border-top: 1px solid black;
27 border-left: 1px solid black;
28 border-right: 0px solid black;
29 border-bottom: 0px solid black;
30 }
31
32 #div_head {
33 position: absolute;
34 z-index: 10;
35 background: #C0C0C0;
36 border-top: 1px solid black;
37 border-left: 1px solid black;
38 border-right: 0px solid black;
39 border-bottom: 0px solid black;
40 overflow: hidden;
41 }
42
43 #table_head {
44 position: absolute;
45 width: 900px;
46 }
47
48 #div_column {
49 position: absolute;
50 z-index: 50;
51 background1: white;
52 background: #93DB70;
53 border-top: 1px solid black;
54 border-left: 1px solid black;
55 border-right: 0px solid black;
56 border-bottom: 0px solid black;
57 overflow: hidden;
58 border-left: 1px solid black;
59 border-right: 0px solid black;
60 border-bottom: 0px solid black;
61 border-right: 0px solid black;
62 border-bottom: 0px solid black;
63 border-bottom: 0px solid black;
64 }
65
66 #Vscrollable {
67 position: absolute;
68 }
69 </style>
70 </head>
71 <body>
72 <div id="div_head_cloumn">
73 <table id="table_head_cloumn">
74 <tr>
75 <th id="th_head_cloumn" class="fixed">FX_ID</th>
76 </tr>
77 </table>
78 </div>
79
80 <div id="div_head">
81 <table id="table_head">
82 <tr id="tr_table_head">
83 <th id="head_th1" class="index_1">FX_ID</th>
84 <th id="head_th2" class="index_2">FX_MC</th>
85 <th id="head_th3" class="index_3">FX_DM</th>
86 <th id="head_th4" class="index_4">NSRSBM</th>
87 <th id="head_th5" class="index_5">NSR_MC</th>
88 </tr>
89 </table>
90 </div>
91
92 <div id="div_column">
93 <table id="Vscrollable">
94 <tr>
95 <th>FX_ID</th>
96 </tr>
97 <tr>
98 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
99 </tr>
100 <tr>
101 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
102 </tr>
103 <tr>
104 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
105 </tr>
106 <tr>
107 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
108 </tr>
109 <tr>
110 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
111 </tr>
112 <tr>
113 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
114 </tr>
115 <tr>
116 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
117 </tr>
118 <tr>
119 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
120 </tr>
121 <tr>
122 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
123 </tr>
124 <tr>
125 <td>5160DFE2DE97BF89E053065B0C8D785F</td>
126 </tr>
127 </table>
128 </div>
129 <div>ssss</div>
130 <div id="big_div" onscroll="onscroll_function()">
131 <table id="table_total">
132
133 <tr id="tr_th" class="transform">
134 <th id="th1" class="index_1">FX_ID</th>
135 <th id="th2" class="index_2">FX_MC</th>
136 <th id="th3" class="index_3">FX_DM</th>
137 <th id="th4" class="index_4">NSRSBM</th>
138 <th id="th5" class="index_5">NSR_MC</th>
139 </tr>
140
141 <tr id="tr_td_1" class="transform">
142 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
143 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
144 <td class="index_3">320010ZB00001139</td>
145 <td class="index_4">91320104MA1MMKK006</td>
146 <td class="index_5">南京月凌舞文化艺术培训中心</td>
147 </tr>
148 <tr id="tr_td_2" class="transform">
149 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
150 <td class="index_2">（省局第三方）个人独资</td>
151 <td class="index_3">320010ZB00001139</td>
152 <td class="index_4">913201147568649920</td>
153 <td class="index_5">南京中太</td>
154 </tr>
155 <tr id="tr_td_3" class="transform">
156 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
157 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
158 <td class="index_3">320010ZB00001139</td>
159 <td class="index_4">320103738870483</td>
160 <td class="index_5">南京中宁制冷空调技术服务中心</td>
161 </tr>
162 <tr id="tr_td_4" class="transform">
163 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
164 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
165 <td class="index_3">320010ZB00001139</td>
166 <td class="index_4">91320104MA1MMKK006</td>
167 <td class="index_5">南京月凌舞文化艺术培训中心</td>
168 </tr>
169 <tr id="tr_td_5" class="transform">
170 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
171 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
172 <td class="index_3">320010ZB00001139</td>
173 <td class="index_4">91320104MA1MMKK006</td>
174 <td class="index_5">南京月凌舞文化艺术培训中心</td>
175 </tr>
176 <tr id="tr_td_6" class="transform">
177 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
178 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
179 <td class="index_3">320010ZB00001139</td>
180 <td class="index_4">91320104MA1MMKK006</td>
181 <td class="index_5">南京月凌舞文化艺术培训中心</td>
182 </tr>
183 <tr id="tr_td_7" class="transform">
184 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
185 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
186 <td class="index_3">320010ZB00001139</td>
187 <td class="index_4">91320104MA1MMKK006</td>
188 <td class="index_5">南京月凌舞文化艺术培训中心</td>
189 </tr>
190 <tr id="tr_td_8" class="transform">
191 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
192 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
193 <td class="index_3">320010ZB00001139</td>
194 <td class="index_4">91320104MA1MMKK006</td>
195 <td class="index_5">南京月凌舞文化艺术培训中心</td>
196 </tr>
197 <tr id="tr_td_9" class="transform">
198 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
199 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
200 <td class="index_3">320010ZB00001139</td>
201 <td class="index_4">91320104MA1MMKK006</td>
202 <td class="index_5">南京月凌舞文化艺术培训中心</td>
203 </tr>
204 <tr id="tr_td_10" class="transform">
205 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td>
206 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td>
207 <td class="index_3">320010ZB00001139</td>
208 <td class="index_4">91320104MA1MMKK006</td>
209 <td class="index_5">南京月凌舞文化艺术培训中心</td>
210 </tr>
211 </table>
212 </div>
213
214 <p id="demo"></p>
215 <script>
216 //alert(getScrollBarWidth());
217 /*设置head_cloumn的位置和大小，jquery中css()方法设置样式*/
218 $("#div_head_cloumn").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
219 $("#div_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top);
220 $("#div_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left);
221 $("#table_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2);//table 与div间隔1 absoulte属性会是div大小随内容被撑开
222 $("#table_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2);//thead+1,tr+1,th+1
223
224 /*设置head的位置和大小 并设置其中每个th的大小*/
225 $("#div_head").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
226 $("#div_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top);
227 $("#div_head").css("width",700-getScrollBarWidth());//没有特殊设置的话滚动条宽度固定为16px
228 //$("#table_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2);
229 //$("#table_head").css("width",$("#tr_th").width()+684);//thead+1,tr+1,th+1
230 $("#table_head th").each(function(index1, element1) {//利用each循环（jquery中的方法）将各个th的宽度设置好
231 $("#big_div th").each(function(index2, element2) {
232 if($(element2).attr("id")==("th"+(index1+1))){//jquery中attr()方法设置属性
233 $(element1).css("width",$(element2).css("width"));
234 return false;
235 }
236 });
237 });
238
239 /*设置cloumn的位置和大小 并设置其中每个tr的大小*/
240 $("#div_column").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left);
241 $("#div_column").css("height",$("#big_div").height()-getScrollBarWidth());
242 $("#div_column").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left);
243 $("#Vscrollable").css("height",$("#table_total").height());
244 $("#Vscrollable").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2);
245 $("#Vscrollable tr:first").css("height",$("#tr_th").css("height"));
246 $("#Vscrollable tr").each(function(index1, element1) {//同样利用each将各个tr的高度设置好
247 if(index1==0){
248 return true;
249 }
250 $("#big_div tr").each(function(index2, element2) {
251 if($(element2).attr("id")==("tr_td_"+index1)){
252 $(element1).css("height",$(element2).css("height"));
253 return false;
254 }
255 });
256 });
257 //$("#Vscrollable tr").css("height",$("#tr_td_1").css("height"));
258 //$("#Vscrollable tr:first").css("height",$("#tr_th").css("height"));
259
260
261 /*单向固定的方法，逻辑：实时传递大div的滚动条位置给小div的滚动条(小div的滚动条是隐藏的)*/
262 function onscroll_function() {
263 document.getElementById("table_head").style.left = document
264 .getElementById("big_div").scrollLeft
265 * -1 + 'px';
266 document.getElementById("Vscrollable").style.top = document
267 .getElementById("big_div").scrollTop
268 * -1 + 'px';
269 }
270
271
272 /*----------------------------------------------------------------*/
273
274 //获得滚动条宽的
275 function getScrollBarWidth() {
276 var inner = document.createElement('p');
277 inner.style.width = "100%";
278 inner.style.height = "200px";
279
280 var outer = document.createElement('div');
281 outer.style.position = "absolute";
282 outer.style.top = "0px";
283 outer.style.left = "0px";
284 outer.style.visibility = "hidden";
285 outer.style.width = "200px";
286 outer.style.height = "150px";
287 outer.style.overflow = "hidden";
288 outer.appendChild (inner);
289
290 document.body.appendChild (outer);
291 var w1 = inner.offsetWidth;
292 outer.style.overflow = 'scroll';
293 var w2 = inner.offsetWidth;
294 if (w1 == w2) w2 = outer.clientWidth;
295
296 document.body.removeChild (outer);
297
298 return (w1 - w2);
299 }
300
301 var _target;//拖拽的元素//声明变量
302 var _droptarget;//触发drop事件的元素
303 var end_X = 0;//drop时鼠标位置
304 var end_Y = 0;
305 var e_left = 0;//触发drop事件的元素的位置(绝对)
306 var e_width = 0;//触发drop事件的元素的宽度
307 var ifFixed = false;//是否被固定
308 var first_cell = $("#head_th1");//第一个单元格
309 var first_cell_class = $(first_cell).attr("class");//第一个单元格的class
310 $("th").attr("draggable",true);//attr设置属性css设置样式
311 var width_balance = $("#th1").offset().left-$("#big_div").offset().left;//宽度差额
312
313 //设置鼠标在id为"sortable1"的元素上时的样式为"move"
314 document.getElementById("tr_th").style.cursor = "move";
315 document.getElementById("div_head_cloumn").style.cursor = "move";
316 document.getElementById("div_head").style.cursor = "move";
317
318
319 //jquery绑定方法，当p发生dragstart事件时触发此方法
320 $('th').on('dragstart',function(e){
321 _target = e.target;
322 //如果拖拽的元素是固定的列，就把固定列下面的活动的列赋值给_target
323 if($(e.target).attr("class")=="fixed"){
324 ifFixed = true;
325 _target = first_cell;
326 }
327 });
328
329
330 //jquery绑定方法，当p发生dragover事件时触发此方法
331 $('th').on('dragover',function(e){
332 e.preventDefault();//该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
333 });
334
335 //jquery绑定方法，当p发生drop事件时触发此方法
336 $('th').on('drop',function(e){
337 event.preventDefault();
338 _droptarget = event.srcElement;//获得事件的源对象
339 if($(_droptarget).attr("class")=="fixed"){
340 ifFixed = true;
341 _droptarget = first_cell;
342 }
343 end_X = event.pageX;
344 end_Y = event.pageY;
345 e_left = $(_droptarget).offset().left;
346 e_width = $(_droptarget).width();
347
348 if ($(_droptarget).attr("draggable") == "true") {//draggable属性，为true时可拖拽，false时不可拖拽
349 if (end_X<(e_left+e_width/2))
350 $(_droptarget).before($(_target));//before方法 语法$(selector).before(content);将content添加到选定的元素之前
351 if (end_X>=(e_left+e_width/2))
352 $(_droptarget).after($(_target));//after()方法
353 }
354
355 var arrayObj_th = new Array();//创建一个数组
356
357 $("#tr_table_head>th").each(function() {//each遍历
358 arrayObj_th.push($(this));//push数组的添加元素操作
359 });
360
361 //alert($("#tr_td_1 td").size());
362 $(".transform").each(function(index1, element1) {
363 var arrayObj_td = new Array();
364 var arrayObj_td_temp = new Array();
365 // alert(index1);
366 for(var i=1;i<=arrayObj_th.length;i++){
367 arrayObj_td_temp.push($(this).children(".index_"+i));
368 }
369
370 $.each(arrayObj_th, function (index, item) {
371 $.each(arrayObj_td_temp, function (index2, item2) {//index2:下标、item2:元素(Object)
372 //attr获取/设置元素的属性值
373 if(item.attr("class")==item2.attr("class")){//元素.attr("class")获取该元素的class值
374 arrayObj_td.push(item2);}
375 });
376 });
377
378 for(var i=arrayObj_td.length-1;i>=0;i--){
379 arrayObj_td[i].before(arrayObj_td[i-1]);
380 }
381 });
382 if(ifFixed==true){//如果拖拽的元素是固定的列，改变固定列的大小、文本内容
383 ifFixed=false;
384 first_cell = arrayObj_th[0];
385 first_cell_class = $(first_cell).attr("class");
386 $("#div_head_cloumn").css("width",$(first_cell).width()+width_balance);
387 $("#table_head_cloumn").css("width",$(first_cell).width()+width_balance-2);//thead+1,tr+1,th+1
388 $("#th_head_cloumn").text($(first_cell).text());
389
390 $("#div_column").css("width",$(first_cell).width()+width_balance);
391 $("#Vscrollable").css("width",$(first_cell).width()+width_balance-2);
392 //$("#Vscrollable tr").css("height",$("#tr_td_1").css("height"));
393 //$("#Vscrollable tr:first").css("height",$("#tr_th").css("height"));
394
395 $("#table_total ."+first_cell_class).each(function(index, element) {
396 if($(element).attr("class")==first_cell_class){
397 $("#Vscrollable th,td").eq(index).text($(element).text());
398 }
399 });
400 }
401 });
402 </script>
403 </body>
404 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现拖拽可编辑模块功能代码
- jquery简单实现滚动条下拉DIV固定在头部不动
- jquery实现滚动条下拉DIV固定在头部不动
- jQuery使用drag效果实现自由拖拽div
- jQuery实现html元素拖拽
- 通过jquery-ui中的sortable来实现拖拽排序的简单实例
- jQuery实现div拖拽效果实例分析
- 【看完想不会都难的系列教程】- (3) JQuery+JQueryUI+Jsplumb 实现拖拽模块，流程图风格 - 技术弟弟 - 博客园
- 利用jquery插件中的拖拽与放置实现的相册效果，可以删除和恢复
- jQuery+CSS实现的table表格行列转置功能示例
- jquery 可拖拽的窗体控件实现代码
- jquery实现拖拽进度条并显示百分比的特...
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jQuery应用-实现博客个性主页布局拖拽功能
- JQuery实现fixed固定div--同固定表头
- jQuery固定浮动侧边栏实现思路及代码
- JQuery实现fixed固定div--同固定表头
- Jquery实现拖拽
- jquery dragsort table实现拖拽排序