Pages

JQuery 拖曳表格欄位 plugin


點選上面這張圖片就可以看到效果~

這也是我設計的 JQuery plugin
針對表格做整個欄位的拖曳效果
滑鼠點選最上方 title 的部分按住不放一秒後
就可以開始進行拖曳排序
屬性的部分也做了滿大的自由度開放
表格的所有屬性幾乎都可以設定
(當然合併欄位的情況就不適合這個 plugin 了)
也可自行設定每個欄位的 style
也可更換指示的紅色箭頭圖樣
大家可以下載來自己玩玩看囉~
這裡有個要注意的地方
就是 table 一定要有一個 th 標籤
因為主要是以壓住 th 一秒後開始動作
如果測試後有任何 bug 也麻煩回報給我知道喔肝溫呀~
oxxo_dragTableTd_v1.js 下載 (右鍵另存新檔)

各個設定的屬性如下:
arrowIcon : "img/arrow_20120629.png",   // 移動時指示箭頭的圖檔
arrowIconWidth : 9,               // 圖檔寬度
arrowIconHeight : 5,              // 圖檔高度
arrawIconPaddingLeft : 1,         // 圖檔水平位移
arrawIconPaddingBottom : 1,       // 圖檔垂直位移
mouseCursor : "move",             // 拖曳時的游標
tableCollapse : "collapse",       // 表格基本設定
tableCellPadding : 0,             // cellpadding
tableCellSpacing : 0,             // cellspacing
tableBorderWidth : 1,             // table 邊框寬度
tableBorderStyle : "solid",       // table 邊框樣式
tableBorderColor : "#000",        // table 邊框顏色
thBorderWidth : 1,                // th 邊框寬度
thBorderStyle : "solid",          // th 邊框樣式
thBorderColor : "#000",           // th 邊框顏色
tdBorderWidth : 1,                // td 邊框寬度
tdBorderStyle : "solid",          // td 邊框樣式
tdBorderColor : "#000",           // td 邊框顏色
movedThStyle : "1px dashed #ccc", // 移動時原來位置的th邊框樣式
movedThBg : "#eee",               // 移動時原來位置的th背景色
movedThColor : "#fff",            // 移動時原來位置的th字體顏色
movedTdStyle : "1px dashed #ddd", // 移動時原來位置的td邊框樣式
movedTdBg : "#f5f5f5",            // 移動時原來位置的td背景色
movedTdColor : "#ccc",            // 移動時原來位置的td字體顏色
mouseDownTime : 1000              // 滑鼠壓住幾秒開始拖

html 原始碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery oxxo-dragTableTd plugin</title>
   <style>
    body{margin:40px;} 
    table{font-size:12px;}
    th{background-color:#666; color:#fff; width:50px; height:25px;} 
    td{text-align:center; height:25px;}
    .td1{background-color:#faa;}
    .td2{background-color:#afa;}
    .td3{background-color:#aaf;}
    .td4{background-color:#fc0;}
    .td5{background-color:#6ef;}
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_dragTableTd_v1.js"></script>
   <script>
   $(function(){
    $("#table0").dragTableTd({
     arrowIcon : "img/arrow_20120629.png",   // 移動時指示箭頭的圖檔
     arrowIconWidth : 9,               // 圖檔寬度
     arrowIconHeight : 5,              // 圖檔高度
     arrawIconPaddingLeft : 1,         // 圖檔水平位移
     arrawIconPaddingBottom : 1,       // 圖檔垂直位移
     mouseCursor : "move",             // 拖曳時的游標
     tableCollapse : "collapse",       // 表格基本設定
     tableCellPadding : 0,             // cellpadding
     tableCellSpacing : 0,             // cellspacing
     tableBorderWidth : 1,             // table 邊框寬度
     tableBorderStyle : "solid",       // table 邊框樣式
     tableBorderColor : "#000",        // table 邊框顏色
     thBorderWidth : 1,                // th 邊框寬度
     thBorderStyle : "solid",          // th 邊框樣式
     thBorderColor : "#000",           // th 邊框顏色
     tdBorderWidth : 1,                // td 邊框寬度
     tdBorderStyle : "solid",          // td 邊框樣式
     tdBorderColor : "#000",           // td 邊框顏色
     movedThStyle : "1px dashed #ccc", // 移動時原來位置的th邊框樣式
     movedThBg : "#eee",               // 移動時原來位置的th背景色
     movedThColor : "#fff",            // 移動時原來位置的th字體顏色
     movedTdStyle : "1px dashed #ddd", // 移動時原來位置的td邊框樣式
     movedTdBg : "#f5f5f5",            // 移動時原來位置的td背景色
     movedTdColor : "#ccc",            // 移動時原來位置的td字體顏色
     mouseDownTime : 1000              // 滑鼠壓住幾秒開始拖曳
    });
   });
   </script>
</head>
<body>
   <table id="table0">
    <tr><th>title 1</th><th>title 2</th><th>title 3</th><th>title 4</th><th>title 5</th></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
    <tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td><td class="td4">4</td><td class="td5">5</td></tr>
   </table>
</body>
</html>

下一個版本就是要來試試看結合排序的效果囉ㄎㄎ~

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

2 則留言:

  1. 請問如果要改成拖曳行的部分可以嗎?

    回覆刪除
  2. 請問這程式載點還有嗎

    回覆刪除