1

jQuery 用の jqGrid プラグインを使用してテーブルを作成し、次のデモに依存して、テーブルの行をドラッグ アンド ドロップしたいと考えています。デモ: 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 デモ ページの多くのデモは、非常に古いものです。つまり、"New in version 3.3" -> "Row Drag and Drop" のデモは、現在のバージョンの jqGrid では機能しません。. 反対側の "New in version 3.6" -> "Sortable Rows" は、使用できるメソッドsortableRowsのデモを提供します。内部でjQuery UI Sortableウィジェットを使用します。したがって、含める必要はありませんjqTableDnD-0.5.js。

の使用法を示すその他の例については、StackOverflow で検索できますsortableRows。たとえば、古い回答updateは、コールバック（startcallack は他の興味深い場所です）を使用して行の順序の変更を追跡する方法を示しています。他のコールバックを使用できます (ドキュメントを参照してください)。答えは、ドラッグされた行を行間で移動する際のスタイルの変更を示しています。使い方sortableRowsもほぼ同じように使えると思います。

于 2013-08-19T14:58:08.363 に答える