Drug and Drop
Здравствуйте, у меня возник вопрос по Jquery следующего характера:
1. Мне необходимо реализовать Drug and Drop безликой таблицы. Для этого я воспользовался плагином который взял вот здесь: http://www.isocra.com/2008/02/table-...jquery-plugin/. Все вроде бы получилось, да только вот в чем проблема: Как мне потом все это за submitить ведь Id то нет. Заранее спасибо. Вот код который у меня получился:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table").tableDnD();
$('table').tableDnD({
onDrop: function(table, row) {
alert($('table').tableDnDSerialize());
},
dragHandle: "dragHandle"
});
});
</script>
<table cellspacing="0" cellpadding="2">
<tr><td>1</td><td>One</td><td>some text</td></tr>
<tr><td>2</td><td>Two</td><td>some text</td></tr>
<tr><td>3</td><td>Three</td><td>some text</td></tr>
<tr><td>4</td><td>Four</td><td>some text</td></tr>
<tr><td>5</td><td>Five</td><td>some text</td></tr>
<tr><td>6</td><td>Six</td><td>some text</td></tr>
</table>
|
Как решение данной проблемы, можно проставить id для tr, а взять их можно из первой ячейки каждой строки.
|
Написать свой serialize для таблицы
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div align="center">
<table id="myTable" width="480" border="2">
<tr>
<td>1</td>
<td>11</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>13</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>14</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>15</td>
<td>25</td>
</tr>
</table>
</div>
<script type="text/javascript">
$.serializeTable = function ( tblElem, colName ) {
var $td = $("td", tblElem);
var len = 0;
if( $td.length ) {
len = $td.eq(0).parent().children( "td" ).length;
}
return $td.map(function( index ){
return colName[ index % len ] + "=" + decodeURIComponent( $(this).text() )
}).get().join("&")
}
alert( $.serializeTable( document.getElementById("meTable") , ["name1[]", "name2[]", "name3[]"] ) );
</script>
</body>
</html>
|
Спасибо большое класное решение проблемы, я реализовал чуть по другому.
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<style type="text/css">
<!--
.letter {background-color: #a0d6fb;}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {
$('table').attr('id','id_for_table');
var id_for_tr = 1;
$("#id_for_table tr").each(function(indx){
$(this).attr('id',id_for_tr);
id_for_tr = id_for_tr + 1;
});
$("#id_for_table").tableDnD();
$('#id_for_table').tableDnD({
onDragClass: "letter",
onDrop: function(table, row) {
alert($('#id_for_table').tableDnDSerialize(''));
},
dragHandle: "dragHandle"
});
});
</script>
<body>
<form>
<table cellspacing="0" cellpadding="2">
<tr><td>1</td><td>One</td><td>some text</td></tr>
<tr><td>2</td><td>Two</td><td>some text</td></tr>
<tr><td>3</td><td>Three</td><td>some text</td></tr>
<tr><td>4</td><td>Four</td><td>some text</td></tr>
<tr><td>5</td><td>Five</td><td>some text</td></tr>
<tr><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</form>
|
Вот мне еще один вопрос интересен как жестко подменить BGCOLOR ячейки ну и конечно CSS
|
| Часовой пояс GMT +3, время: 20:39. |