1

我使用 jqGrid Plugin for jQuery 创建了一个表格，并依靠以下演示，我想拖放表格的行。演示：http ://trirand.com/blog/jqgrid/jqgrid.html （3.3 版新增 -> 行拖放）

当我尝试拖动一行时，我在 firebug 中收到错误“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>

提前致谢！

4

1 回答 1

1

来自官方 jqGrid 演示页面的许多演示确实非常古老。换句话说，“3.3 版中的新功能”->“行拖放”的演示在当前版本的 jqGrid 中不起作用。. 另一方面，“3.6 版中的新功能”->“Sortable Rows”提供了您可以使用的方法sortableRows的演示。它在内部使用jQuery UI Sortable小部件。所以你不需要包括jqTableDnD-0.5.js.

您可以在 StackOverflow 中搜索更多示例来演示sortableRows. 例如，旧答案显示了如何使用update回调（startcallack 是其他感兴趣的地方）来跟踪行顺序的变化。您可以使用其他回调（请参阅文档）。答案显示在行之间移动时拖动行的样式发生变化。我认为在使用的情况下也可以使用几乎相同的东西sortableRows。

于 2013-08-19T14:58:08.363 回答