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