Primefaces：通過句柄可拖動數據表中的行

我有一個DataTable，我在其中添加了對行的拖放支持（draggableRows =「true」）。問題在於，無論我在一行內點擊什麼，我都可以拖動它。Primefaces：通過句柄可拖動數據表中的行

我想要的只是通過一個句柄拖動行的可能性，句柄可能是一個圖標在axample行左邊的圖標（看看sceenshot），所以如果用戶點擊手柄外的一排，沒有拖拽支持;但如果他點擊手柄，他將有可能拖動整行。

我該如何實現？任何解決方案，歡迎:-)

來源

2016-03-03 wassimans

難道你不能抓住ReorderEvent，然後決定根據點擊區域執行操作嗎？這只是一個建議... – Ko2r

@ Ko2r：有趣的想法！我會嘗試:-) – wassimans

你可以看看這個 – Ko2r

的source永遠是你的。在那裏，你可以看到the makeRowsDraggable function on line 2727 in datatable.js

makeRowsDraggable: function() { 
    var $this = this; 

    this.tbody.sortable({ 
     placeholder: 'ui-datatable-rowordering ui-state-active', 
     cursor: 'move', 
     handle: 'td,span:not(.ui-c)', 
     appendTo: document.body, 
     start: function(event, ui) { 
      ui.helper.css('z-index', ++PrimeFaces.zindex); 
     }, 
    ... 
}

與到手柄的引用（ 'TD，跨度：不是（的.ui-C）'）。

通過重寫此函數並將句柄指向顯式引用您的句柄的選擇器，您可以「修復」它。

你甚至可以通過不向句柄分配一個顯式字符串來實現這種通用性，但是在例如它上面查找它。您在數據表中定義的自定義傳遞屬性，您在其中放置'字符串'。

我是否已經提過the source始終與您同在？好東西要記住有進一步的問題

來源

2016-03-03 10:58:29 Kukeltje

這是積極的！我在自定義JS文件中覆蓋了makeRowsDraggable（）並將其導入到我的主模板中，它的工作方式就像一個魅力。謝謝@Kukeltje – wassimans

很好聽。請記住，來源始終與你同在。也在其他情況下 – Kukeltje

-1

另一種可能性是UI可排序的初始化後，覆蓋處理的Primefaces的設定值：

<script type="text/javascript"> 
     $(document).ready(function() { 
      var sortableRows = $(".tableWithDraggableRows > tbody"); 
      if (sortableRows) { 
       sortableRows.sortable("option", "handle", ".ui-icon-arrow-4"); 
      } 
     }); 
    </script>

見

來源

2017-05-16 10:01:35

我的解決辦法是一樣的解決方案@ Kuketje。這裏是源代碼（與Primefaces 6.1兼容）

if (PrimeFaces.widget.DataTable){ 
PrimeFaces.widget.DataTable = PrimeFaces.widget.DataTable.extend({ 
    makeRowsDraggable: function() { 
     var $this = this, 
      draggableHandle = '.dnd-handle'; //change to what ever selector as you like 

     this.tbody.sortable({ 
      placeholder: 'ui-datatable-rowordering ui-state-active', 
      cursor: 'move', 
      handle: draggableHandle, 
      appendTo: document.body, 
      start: function (event, ui) { 
       ui.helper.css('z-index', ++PrimeFaces.zindex); 
      }, 
      helper: function (event, ui) { 
       var cells = ui.children(), 
        helper = $('<div class="ui-datatable ui-widget"><table><tbody></tbody></table></div>'), 
        helperRow = ui.clone(), 
        helperCells = helperRow.children(); 

       for (var i = 0; i < helperCells.length; i++) { 
        helperCells.eq(i).width(cells.eq(i).width()); 
       } 

       helperRow.appendTo(helper.find('tbody')); 

       return helper; 
      }, 
      update: function (event, ui) { 
       var fromIndex = ui.item.data('ri'), 
        toIndex = $this.paginator ? $this.paginator.getFirst() + ui.item.index() : ui.item.index(); 

       $this.syncRowParity(); 

       var options = { 
        source: $this.id, 
        process: $this.id, 
        params: [ 
         {name: $this.id + '_rowreorder', value: true}, 
         {name: $this.id + '_fromIndex', value: fromIndex}, 
         {name: $this.id + '_toIndex', value: toIndex}, 
         {name: this.id + '_skipChildren', value: true} 
        ] 
       } 

       if ($this.hasBehavior('rowReorder')) { 
        $this.cfg.behaviors['rowReorder'].call($this, options); 
       } 
       else { 
        PrimeFaces.ajax.Request.handle(options); 
       } 
      }, 
      change: function (event, ui) { 
       if ($this.cfg.scrollable) { 
        PrimeFaces.scrollInView($this.scrollBody, ui.placeholder); 
       } 
      } 
     }); 

    } 
});

}

從VIT蘇查內克的溶液並不真正的工作。只有當頁面準備就緒時，它纔會檢測到拖動手柄&。第一次拖動&下降交互後，它不再工作。

來源

2017-08-30 16:37:36 anhquan

Primefaces：通過句柄可拖動數據表中的行

回答

相關問題