使用jquery拖放2個asp表之間的數據

我需要在asp.net C＃中進行規劃應用程序，並且需要通過拖放操作將數據從一個表移動到另一個表。 2表是在後面的代碼中生成的動態表。每次拖放數據時，我都需要能夠修改數據而無需刷新頁面，所以我在修改表格時僅在客戶端工作。使用jquery拖放2個asp表之間的數據

我使用可拖動和可拖拽的jQuery UI函數在表格之間移動數據，但是當我需要將表格導出爲.xls或將其保存在數據庫中時，看起來拖放數據不在即使我可以在表格顯示中看到它們。

所以我想知道如何添加我拖放到表中的數據，而不是僅僅移動div。

這裏是我的javascript代碼：

$_dropEnd = null; 

$(function() { 
    $(".drag").draggable({ 
    helper: "clone", 
    revert: 'invalid', 
    stop: function (event, ui) { 
     $(this).appendTo($_dropEnd); 
     $_dropEnd = null; 
    } 
    }); 
    $(".drop").droppable({ 
    accept: ".drag", 
    tolerance: "touch", 
    drop: function (event, ui) { 
     $_dropEnd = this; 
    } 
    }) 
});

來源

2014-01-21 charly.logel

當你創建一個ASP.NET控制（即HTML Table或ASP.NET網格視圖），它的狀態被投放到之前保存在服務器端頁面，通過客戶端進行的任何更改都不會通過回發進行，因此這些數據看起來並不會移動。

爲了解決這個問題，一個選擇是使用Ajax。您可以將表格的HTML發送到WebService，以便可以處理和保存數據。

$('#save').click(function() { 
    // Creates an Object to store the HTML of the two tables 
    var o = new Object(); 
    o.table1 = $('#htmlTable1-Container').html(); 
    o.table2 = $('#htmlTable2-Container').html(); 

    // Creates a JSON String for this Object 
    var x = JSON.stringify(o); 

    // In your Web Service create a Method that has the parameters (string table1, string table2)  

    $.ajax({ 
     url: "WEB SERVICE LINK", 
     data:x, 
     success: function() { 
     // Ajax Call Successful 
     }, 
     error: function() { 
     // Ajax Call Failed 
     } 
    }); 
});

另一種選擇（這是一個有點尷尬，並沒有真正的好主意）是表中的HTML存儲ASP.NET控件，使輸入（即文本框）內，然後你可以檢索此在回發和處理服務器端的數據。

// Stores the HTML of the two tables in Two ASP.NET Textboxes for retrieval by the Server on postback. 
$('#save').click(function() { 
    $('#<%= tb1.ClientID %>').val($('#htmlTable1-Container').html()); 
    $('#<%= tb2.ClientID %>').val($('#htmlTable2-Container').html()); 
});

來源

2014-01-21 10:28:48 Nunners

因此，在第一種情況下，數據直接保存在數據庫中，或者他們通過槽AJAX，獲得存儲在表中，然後AJAX再次發送表？ –

使用Ajax方法時，您要將表格的HTML發送到方法。在這種方法中，您將不得不手動解析該HTML以獲取需要存儲在數據庫中的值。 – Nunners

好的！感謝你及時的答覆！ –

使用jquery拖放2個asp表之間的數據

回答

相關問題