|
 |
| |
สอบถามเรื่องการ Drag and Drop แถวของตารางสองตาราง พร้อมกับส่งค่ามาคำนวณครับ ตามรูป |
| |
 |
|
|
 |
 |
|
Drag and Drop ยากนะครับ จะต้องหาพวก jQuery UI มาใช้ครับ ถ้าหาไม่มีก็เขียนเองยาก
|
 |
 |
 |
 |
| Date :
2017-03-16 10:28:57 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.win เมื่อวันที่ 2017-03-16 10:28:57
รายละเอียดของการตอบ ::
ใช่ครับ ตอนนี้ผมลองใช้ jquery-ui มา แต่ลากวางไปมาได้ แต่ผมจะทำให้ ผล sum section มันคำนวณใหม่ ไม่ได้ ครับ
ตัวอย่างโค้ดนะครับ ผมลองลอกมาจากที่อื่น
Code (PHP)
<?php
require 'config/show-error.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="styles/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/font-awesome-4.6.3/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/css/non-responsive.css" />
<!-- jQuery-UI CSS -->
<script src="styles/jquery-ui/jquery-ui.css"></script>
<style type="text/css">
ul li {
min-width: 200px;
}
.dragging li.ui-state-hover {
min-width: 240px;
}
.dragging .ui-state-hover a {
color:green !important;
font-weight: bold;
}
th,td {
padding: 2px 4px;
border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
cursor: move;
}
.connectedSortable tr:first-child {
/*cursor: default;*/
cursor: move;
}
.ui-sortable-placeholder {
background: yellow;
}
div.tableScroll {
position: fixed;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<table id="table1" class="table table-bordered table-condensed">
<tbody>
<tr>
<td>
<table id="table-droppable1" class="table table-bordered table-condensed">
<thead>
<tr>
<th colspan="3" class="text-center">Section 1</th>
</tr>
<tr>
<th class="text-center">#</th>
<th class="text-center">Color</th>
<th class="text-center">Value</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr>
<td class="text-center">1.1</td>
<td class="text-center">Red</td>
<td class="text-center">3</td>
</tr>
<tr>
<td class="text-center">1.2</td>
<td class="text-center">White</td>
<td class="text-center">3</td>
</tr>
<tr>
<td class="text-center">1.3</td>
<td class="text-center">Blue</td>
<td class="text-center">3</td>
</tr>
</tbody>
<tfoot>
<tr id="sum1">
<td colspan="2" class="text-center">Sum Section 1</td>
<td class="text-center">9</td>
</tr>
</tfoot>
</table>
<table id="table-droppable2" class="table table-bordered table-condensed">
<thead>
<tr>
<th colspan="3" class="text-center">Section 2</th>
</tr>
<tr>
<th class="text-center">#</th>
<th class="text-center">Color</th>
<th class="text-center">Value</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr>
<td class="text-center">1.1</td>
<td class="text-center">White</td>
<td class="text-center">3</td>
</tr>
<tr>
<td class="text-center">1.2</td>
<td class="text-center">Red</td>
<td class="text-center">3</td>
</tr>
</tbody>
<tfoot>
<tr id="sum2">
<td colspan="2" class="text-center">Sum Section 2</td>
<td class="text-center">6</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<table id="table-draggable" class="table table-bordered table-condensed">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Color</th>
<th class="text-center">Value</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr>
<td class="text-center">2.1</td>
<td class="text-center">Green</td>
<td class="text-center">1</td>
</tr>
<tr>
<td class="text-center">2.2</td>
<td class="text-center">Black</td>
<td class="text-center">2</td>
</tr>
<tr>
<td class="text-center">2.3</td>
<td class="text-center">Orange</td>
<td class="text-center">4</td>
</tr>
<tr>
<td class="text-center">2.4</td>
<td class="text-center">Yellow</td>
<td class="text-center">5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="styles/js/jquery-3.1.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="styles/js/bootstrap.min.js"></script>
<!-- jQuery-UI JS -->
<script src="styles/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $tabs = $('#table-draggable');
$( "tbody.connectedSortable" ).sortable({
connectWith: ".connectedSortable",
appendTo: $tabs,
helper: "clone",
//revert: "invalid",
zIndex: 99999,
stop: function(event, ui){
var drag_value = $(this).data().uiSortable.currentItem.closest('tr').find('td:eq(2)').text();
var drop_value = $(this).data().uiSortable.currentItem.closest('#sum1').find('td:eq(1)').text();
alert(drop_value);
//alert(value);
console.log(drop_value);
}
}).disableSelection();
$( ".nav-tabs > li", $tabs ).droppable({
accept: ".connectedSortable tr",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
return false;
}
});
});
</script>
</body>
</html>
|
| |
|
|
| |
| Date :
2017-03-16 10:54:24 |
By :
angelkiller9 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เรื่องอ่านค่า sum แต่ล่ะ table ทำไม่ยากนะครับ แค่ใช้ jQuery Loop ตัว table แล้วก็ find หา id ที่ต้องการครับ
|
| |
|
|
| |
| Date :
2017-03-16 11:07:02 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ประมาณนี้ครับ
Code (JavaScript)
$("table#table_id input[id*='xxxx']").each(function (index) {
var crtlInput1 = $("table#table_id input[id*='txtText1']").eq(index);
var crtlInput2 = $("table#table_id input[id*='txtText2']").eq(index);
});
|
| |
|
|
| |
| Date :
2017-03-16 15:05:13 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
