jquery实现行列的单向固定和列的拖拽

Posted 走在阡陌的路上

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现行列的单向固定和列的拖拽相关的知识,希望对你有一定的参考价值。

其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的。

我实现列的单向固定的原理:将需要单向固定的列放在一个<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 girdster 可以拖拽啥元素比如用table布局 之后实现tr td 的拖拽

element 的 table使用Sortable.js进行拖拽的时候,禁止某些列的拖拽功能

利用插件(jQuery-ui.js)实现表格行的拖拽排序

jq实现登陆页面的拖拽功能

C# TableLayoutPanel 要设置行列,然后把每行每列的大小设置成一样的,该怎么弄?