在TreeGrid + GridDnd中使用JqGrid

Question

一段时间以来，我一直在尝试实现具有TreeGrid和GridDnD功能的JqGrid，但遇到了麻烦。我以前见过这样做，所以我知道这是可以做到的。

下面是我用来创建TreeGrid的代码，它按照预期工作：

$("#documentmanagementtree").jqGrid({
            url: '<%: Url.Action("GetDocumentManagementFolderStructure", "Document") %>',
            datatype: 'json',
            mtype: 'post',
            colNames: ['Id','Type',
        '<%: Html.TranslateUiElement(Function(x) x.SharedTranslations.EntityTypeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.FileNameCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentFileSizeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.LastCheckinDateCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentDownloadCaption) %>'],
            colModel: [
        { name: 'id', index: 'id', hidden: true },
        { name: 'type', index: 'type', hidden: true },
        { name: 'icon', index: 'icon', width: 5, align: 'left' },
        { name: 'name', index: 'name', width: 15 },
        { name: 'size', index: 'size', width: 5, sortable: false, align: 'right' },
        { name: 'lastcheckindate', index: 'lastcheckindate', width: 10, align: 'center', sorttype: 'date', datefmt: '<%= Html.GetGridDateFormat()%>' },
        { name: 'downloadlink', index: 'downloadlink', width: 5, align: 'center' }
        ],
            height: 'auto',
            width: 1013,
            sortname: 'id',
            treeGrid: true,
            cellEdit: true,
            treeGridModel: 'adjacency',
            treedatatype: "json",
            ExpandColumn: 'icon'
        });

现在，当我实现GridDnD特性时(我可以在其他页面中正常工作)，什么也不会发生。但是，当我注释掉jqGrid代码中的"treeGrid: true“行时，我可以成功地拖放。

注意:我使用'#‘连接，因为我实现了拖放到自身的jqGrid，这是我使用jquery的droppable时使用的，它工作得很好。

$("#documentmanagementtree").gridDnD({
            connectWith: '#'
        });

因此，问题是我无法让TreeGrid与GridDnd一起工作，尽管我可以让这两个功能单独工作得很好，而且我知道这是可以做到的，因为我已经看到了这种情况的演示(我不能重现结果)。

如果你有任何建议可以帮助我，请让我知道，提前感谢大家。

Answer 1

我使用tableDnD解决了一些问题，下面是结果代码：

            $("#documentmanagementtree").tableDnD({ scrollAmount: 0 });

            $("#documentmanagementtree").jqGrid({
            url: '<%: Url.Action("GetDocumentManagementFolderStructure", "Document") %>',
            datatype: 'json',
            mtype: 'post',
            colNames: ['Id', 'Type',
        '<%: Html.TranslateUiElement(Function(x) x.SharedTranslations.EntityTypeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.FileNameCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentFileSizeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.LastCheckinDateCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentDownloadCaption) %>'],
            colModel: [
        { name: 'id', index: 'id', key: true, hidden: true },
        { name: 'type', index: 'type', hidden: true },
        { name: 'icon', index: 'icon', width: 5, align: 'left' },
        { name: 'name', index: 'name', width: 15 },
        { name: 'size', index: 'size', width: 5, sortable: false, align: 'right' },
        { name: 'lastcheckindate', index: 'lastcheckindate', width: 10, align: 'center', sorttype: 'date', datefmt: '<%= Html.GetGridDateFormat()%>' },
        { name: 'downloadlink', index: 'downloadlink', width: 5, align: 'center' }
        ],
            height: 'auto',
            width: 1013,
            sortname: 'id',
            treeGrid: true,
            viewrecords: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'icon',
            gridComplete: function () {
                $("#documentmanagementtree").tableDnDUpdate();
            }
        });

对jqgrid的重要补充是：

            gridComplete: function () {
                 $("#documentmanagementtree").tableDnDUpdate();
            }

虽然这种拖放功能不如gridDnD功能好，但可以实现它，以便与treeGrid一起更好地工作。

如果你有类似的问题，请尽情享受吧！