jqGrid TableDnD問題

Question

我使用jQuery的jqGrid插件創建了一個表，並依賴於以下演示，我想拖放表中的行。 演示： http : //trirand.com/blog/jqgrid/jqgrid.html （版本3.3中的新增功能->行拖放）

當我嘗試拖動一行時，在螢火蟲中收到錯誤“ TypeError：e is null”。 我搜索了此問題的解決方案，但在這種情況下我什么都沒找到……此外，我嘗試使用如上例所示的相同版本的jQuery和jQueryUI，但不能解決問題。 jQuery TableDnD（0.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演示頁面上的許多演示確實很老 。 換句話說，“ 3.3版的新功能”->“拖放”中的演示不適用於當前版本的jqGrid。 。 另一方面，“ 3.6版中的新增功能”->“可排序行”提供了您可以使用的sortableRows方法的演示。 它在內部使用jQuery UI Sortable小部件。 因此，您無需包含jqTableDnD-0.5.js 。

您可以在StackOverflow中搜索更多示例，這些示例演示了sortableRows的用法。 例如，舊答案顯示了如何使用update回調（ start callack在其他位置）來跟蹤行順序的更改。 您可以使用其他回調（請參閱文檔 ）。 答案顯示了在行之間移動拖動行時樣式的變化。 我認為在使用sortableRows情況下也可以使用幾乎相同的內容。