Easyui datagrid 實現表格記錄拖拽

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檔案

定義表格，新增事件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 = db_class.objects.get(id=source_row_id)

source_row.order = int(target_row_order) – 1

source_row.save()

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 = db_class.objects.get(id=source_row_id)

source_row.order = int(target_row_order) + 1

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__lte=target_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()

return HttpResponse(`success`)

except Exception as e:

return HttpResponse(`%s` % e)

參考連結：

http://www.jeasyui.net/extension/193.html

Easyui datagrid 實現表格記錄拖拽

相關文章