datagrid 實作表格記錄拖拽
by:授客 QQ：1033553122
測試環境
jquery-easyui-1.5.3
jquery-easyui-datagrid-dnd
下載下傳位址：
http://www.jeasyui.net/demo/193.html
實作
編輯datagrid-dnd.js，注釋頭尾兩行代碼，如下
//(function($){
//})(jQuery);
關鍵代碼
引入js檔案
<script type="text/javascript" src="website/js/datagrid-dnd.js"></script>
定義表格，添加事件onBeforeDrag，onDrop
事件：
事件 參數 描述
onBeforeDrag row 當一行的拖拽開始前觸發，傳回 false 則取消拖拽。
onDrop targetRow,sourceRow,point 當一行被放置時觸發。
targetRow：放置的目标行。
sourceRow：拖拽的源行。
point：訓示放置的位置，可能的值：'top' 或 'bottom'。
<body>
<!--項目配置名稱清單-->
<table class="easyui-datagrid" rownumbers="true" pagination="true" id="API_test_case_step"
data-options="border:false,
……
onBeforeDrag:onBeforeDrag,
onDrop:function(targetRow,sourceRow, point, datagridID){
onDropForTestCaseStep(targetRow, sourceRow, point, 'API_test_case_step');
}">
</table>
……
</body>
</html>
js函數實作
// 正在編輯時，禁止拖拽
function onBeforeDrag(row) {
if (editIndex != undefined) {
// 處于正在編輯狀态,取消拖拽
return false;
}
}
// 停止拖拽，釋放滑鼠，送出目标行，被拖拽行，拖拽方向燈相關資料到伺服器
function onDropForTestCaseStep(targetRow, sourceRow, point, datagridID) {
var targetRowID = targetRow.id;
var targetRowOrder = targetRow.order;
var sourceRowID = sourceRow.id;
var sourceRowOrder = sourceRow.order;
console.log(sourceRow);
var caseID = sourceRow.case_id;
var idSelector = '#' + datagridID;
$.post('/action/dragRowOfTestCaseStep ', {targetRowID:targetRowID, targetRowOrder:targetRowOrder, sourceRowID:sourceRowID, sourceRowOrder:sourceRowOrder, direction:point, datagridID:datagridID, caseID:caseID},
function(data, status){
if (data == 'success') {
$.messager.alert('提示', '儲存成功', 'info');
} else {
$.messager.alert('錯誤', '儲存失敗: ' + data, 'error');
}
}
);
onLoadSuccess();
$(idSelector).datagrid('reload');
背景函數實作
使用Django代碼實作，如下，需要注意的是，不管是哪個拖拽方向分top or bottom，都需要考慮拖拽到目标行記錄上方及目标行記錄上方。
def drag_row_of_testplan_case_view(request):
try:
params = request.POST
class_name = params['datagridID']
db_class = globals()[class_name]
plan_id = params['planID']
# target_row_id = params['targetRowID']
target_row_order = params['targetRowOrder']
source_row_id = params['sourceRowID']
source_row_order = params['sourceRowOrder']
direction = params['direction']
with transaction.atomic():
if direction == 'top':
if source_row_order > target_row_order: # 從下往上拖動，拖動至目标行記錄上方 # target_row_order <= order < source_row_order 的記錄，order + 1
db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gte=target_row_order).filter(order__lt=source_row_order).update(order=F('order') + 1)
source_row = db_class.objects.get(id=source_row_id)
source_row.order = target_row_order
source_row.save()
else: # 從上往下拖動，拖動至目标行記錄上方 # source_row_order < order < target_row_order 的記錄，order - 1
db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=source_row_order).filter(order__lt=target_row_order).update(order=F('order') - 1)
source_row.order = int(target_row_order) - 1
elif direction == 'bottom':
if source_row_order > target_row_order: # 從下往上拖動，拖動至目标行記錄下方 # target_row_order < order < source_row_order 的記錄，order + 1
db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=target_row_order).filter(order__lt=source_row_order).update(order=F('order') + 1)
source_row.order = int(target_row_order) + 1
else: # 從上往下拖動，拖動至目标行記錄下方 # source_row_order < order <= target_row_order 的記錄，order - 1
db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=source_row_order).filter(order__lte=target_row_order).update(order=F('order') - 1)
return HttpResponse('success')
except Exception as e:
return HttpResponse('%s' % e)
參考連結：
http://www.jeasyui.net/extension/193.html
作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群
