與TreeGrid + GridDnd一起使用JqGrid

我一直在試圖用TreeGrid和GridDnD功能來實現JqGrid一段時間，現在我遇到了麻煩。我以前看過它，所以我知道它可以完成。與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工作，儘管我能得到的功能，兩片分開工作就好了，我知道這是可以做到，因爲我已經看到這種情況發生的演示（其中我不能重現結果）。

讓我知道任何你可以建議幫助，謝謝大家提前。

來源

2012-07-13 Nick

我想通使用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結合使用。

享受如果你有類似的問題！

來源

2012-07-16 14:02:50 Nick

與TreeGrid + GridDnd一起使用JqGrid

回答

相關問題