Question

我有一个DataTable，我在其中添加了对行的拖放支持（draggableRows =“true”）。问题是无论我在哪里点击一行，我都可以拖动它。

我想要的是只能用手柄拖动行的可能性，手柄可以是一个列字段，例如在行的左侧有一个图标（看一下截图），所以如果用户点击在手柄外面的一排，没有阻力支撑;但如果他点击手柄，他就有可能拖动整行。

我怎么能实现这个？

Answer 1

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);
        }, 
    ...
}

引用句柄（＆＃39; td，span：not（.ui-c）＆＃39;）。

通过覆盖此功能并让句柄指向明确指向您的句柄的选择器，您可以修复＆＃39;它

你甚至可以通过不为句柄指定一个明确的字符串来制作这个通用字母，但是可以查看它。您在数据表上定义的自定义传递属性，您可以在其中放置＆＃39;字符串＆＃39;英寸

我是否已经提到the source总是和你在一起？有进一步的问题时要记住好事

Answer 2

从Primefaces 6.2开始，p：datatable具有专门用于此目的的属性rowDragSelector。请参见下面的示例：

<p:dataTable value="#{myBean.entities}" id="myTablePreferredId" rowDragSelector=".draggableHandle" draggableRows="true">

    <p:ajax event="rowReorder" listener="#{myBean.onRowReorder}"/>

    <p:column>
        <h:outputText styleClass="fa fa-arrows-v draggableHandle" />
    </p:column>

    ...

</p:dataTable>

有关更多详细信息，请参见primefaces documentation。

Answer 3

我的解决方案与@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);
                }
            }
        });

    }
});

}

来自VítSuchánek的解决方案并没有真正起作用。它仅在页面准备好时才检测拖放手柄。在第一次拖放交互之后，它就不再起作用了。

Answer 4

另一种可能性是在UI可排序初始化后覆盖Primefaces的处理程序设置：

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

请参阅http://api.jqueryui.com/sortable/#option-handle

p中的可拖动行：dataTable by handle

4 个答案: