jqGrid TableDnD问题

Question

我使用jqGrid插件为jQuery创建了一个表，并依赖于下面的演示，我想要拖放表的行。演示：http://trirand.com/blog/jqgrid/jqgrid.html (新版本3.3 ->行拖放)

当我试图拖动一行时，我会在firebug中得到"TypeError: e为空“的错误。我想找到解决这个问题的办法，但在这个案子里我什么也没找到.此外，我尝试使用上面示例中显示的相同版本的jQuery和jQueryUI，但它没有解决问题。jQuery TableDnD (Version0.7)的新版本没有帮助，也没有解决这个问题的想法吗？

我的代码：

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jqueryUI-1.10.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-de.js"></script>
<script type="text/javascript" src="js/jqGrid/i18n/grid.locale-de.js"></script>
<script type="text/javascript" src="js/jqGrid/jqGrid-4.5.2.js"></script>
<script type="text/javascript" src="js/plugins/jqTableDnD-0.5.js"></script>

<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.10.3.css"/>
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" />
<link type="text/css" rel="stylesheet" href="css/ui.multiselect.css" />

<table id="grid"></table>
<div id="navi"></div>

<script type="text/javascript">
    $(document).ready(function() {    
        $("#grid").tableDnD({scrollAmount:0});

        $("#grid").jqGrid({
            colNames:["Artnr", "Bezeichnung", "Angebot (Position)", "Enddatum Startseite", "Eigener Bestand", "Versandlager Bestand"],
            colModel:[
                {name:"artnr", index:"artnr", align:"center", width:75, sortable:false, formatter:formatPic},
                {name:"benennung", index:"benennung", width:400, sortable:false, formatter:formatLink }
                ...
            ],
            datatype: "json",
            editurl: "edit.php",
            height: "auto",
            mtype: "POST",
            pager: "#navi",
            rowNum: 20,
            sortname: "angebot",
            sortorder: "asc",
            url: "load.php",
            viewrecords: true,
            gridComplete: function() {
                $("#_empty","#grid").addClass("nodrag nodrop");
                $("#grid").tableDnDUpdate();
            }
        }).navGrid ('#navi', {view:false,edit:false,add:false,del:true,search:false}, {}, {}, {}, {}, {} )
    });

    function formatPic(cellVal, options, rowObject) {
        return "<htmltag title=\""+ cellVal +"\" class=\"tooltip\">"+ cellVal +"</htmltag>";
    }

    function formatLink(cellVal, options, rowObject) {
        return "<a href=\"../details.php?art=" + rowObject[0] + "\" target=\"_blank\">"+ cellVal +"</a>";
    }
</script>

提前感谢！

Answer 1

来自官方的jqGrid演示页面的许多演示程序实际上都是--非常老的。换句话说，来自“NewInVersion3.3”-> "Row拖放“的演示在当前版本的jqGrid中不起作用。。另一方面，“NewinVersion3.6”“->”可排序行“提供了可以使用的方法sortableRows的演示。它在内部使用jQuery UI可排序小部件。所以您不需要包括jqTableDnD-0.5.js。

您可以在StackOverflow中搜索更多演示sortableRows用法的示例。例如，旧的答案展示了如何使用update回调(start回调是其他感兴趣的地方)来跟踪行顺序的更改。您可以使用其他回调(请参阅文献资料)。答案显示了在行之间移动时拖放行的样式的变化。我认为在使用sortableRows的情况下，也可以使用几乎相同的方法。