jquery table dnd插件与gridview – 在drop事件永远不会工作

我正在使用asp.net(3.5).我有GridView,我需要使用Drag& Drop来重新排序项目(表格行)并将新订单保存到db.

我发现我可以使用jquery.tablednd插件来达到这个目的.

DnD功能对我来说真的很有用,但我不能重新排序项目并保存在db中,因为ON DROP永远不适合我.

我试图复制我在网络上发现的不同例子,但是ondrop对我来说永远不会有用.我创建了新文件来进行测试(我的原始页面使用了母版页).
我已经包含了ajaxToolkit：ToolkitScriptManager,但我也尝试过使用asp：ScriptManager.
DropAndDrag正在工作,但从不调用ON DROP事件. 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>

我真的被卡住了.不知道如何继续.

解决方法

我在这里找到了解决方案： http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/comment-page-15/#comment-3460

基本上,表中的每一行都需要一个Id,您可以使用这样的代码给它们一个：

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

我之前放置了这段代码：$(“#<％= GridViewSample.ClientID％>”).tablednD并且能够得到警报(1);每次我放下一排时显示的框.

jquery table dnd插件与gridview – 在drop事件永远不会工作

解决方法

相关文章