4

asp.net（3.5）を使用しています。GridViewがあり、アイテム（テーブル行）を並べ替えて新しい順序をdbに保存するために、Drag＆Dropを使用する必要があります。

この目的でjquery.tabledndプラグインを使用できることがわかりました。

DnD機能は実際に機能しますが、ON DROPが機能しないため、アイテムを並べ替えてdbに保存することはできません。

Webで見つけたさまざまな例をコピーしようとしましたが、ondropが機能しません。テストを行うために新しいファイルを作成しました（元のページはマスターページを使用しています）。ajaxToolkit：ToolkitScriptManagerを含めましたが、asp：ScriptManagerでも試しました。DropAndDragは機能していますが、ONDROPイベントが呼び出されることはありません。OnDragStartイベントが正常に呼び出されました。私のコードを見てください：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="News.aspx.cs" Inherits="Tutelaconnect.News" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://www.isocra.com/articles/jquery.tablednd.js" type="text/javascript">  
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= GridViewSample.ClientID %>").tableDnD({
            onDrop: function (table, row) {
                alert('1');                    ///// THIS NEVER HAPPEN
            },
            onDragStart: function (table, row) {
                // alert('2');  //// THIS HAPPENS
            }
        });
    });        
</script>
</head>
<body>
<form id="form1" runat="server">
 <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div id="debugArea">
</div>
<div class="tableDemo">
    <asp:GridView ID="GridViewSample" runat="server" AutoGenerateSelectButton="false"
        AutoGenerateColumns="false" Width="800px">
        <Columns>
            <asp:TemplateField HeaderText="C">
                <ItemTemplate>
                    <asp:TextBox ID="TextBoxC" runat="server" Text='<%# Eval("C") %>' Width="50px" />
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" Width="10em" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="A">
                <ItemTemplate>
                    <asp:Label ID="LabelA" runat="server" Text='<%# Eval("A") %>' />
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Left" Width="30em" />
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
</form>
</body>
</html>

私は本当に立ち往生しています。続行する方法がわからない。

4

2 に答える 2

8

ここで解決策を見つけました：http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/comment-page-15/#comment-3460

基本的に、テーブルの各行には ID が必要です。次のようなコードを使用して ID を付与できます。

var i = 0;
$("#<%= GridViewSample.ClientID %>").find('tr').each(function() {
    $(this).attr('id', i++);
});

このコードを直前に配置しました:行をドロップするたび$("#<%= GridViewSample.ClientID %>").tableDnDにボックスを表示することができました。alert(1);

于 2012-10-16T07:31:21.090 に答える
0

定義されているかどうかに関係なくon drop、js ファイル内のトリガー関数を探してください。そうすれば、エラーの場所を見つけることができます。

于 2012-10-16T07:37:16.353 に答える