jsf-2 - 带有复选框的 Primefaces 树，在单击行上的任意位置时避免选中/取消选中

Question

Primefaces 优惠 http://www.primefaces.org/showcase/ui/treeSelectionCheckbox.jsf

它非常适合，只是“单击行上的任意位置”行为不是我想要的。我需要该行的其他按钮和内容。

Answer 1

您需要为 treeTable 覆盖 Primefaces Javascript。在您的页面上放置以下内容应该会禁用 Primefaces 3.5 的此功能:

PrimeFaces.widget.TreeTable.prototype.bindSelectionEvents = function() {
    var $this = this,
    rowSelector = this.jqId + ' .ui-treetable-data tr.ui-treetable-selectable-node';

    $(document).off('mouseover.treeTable mouseout.treeTable click.treeTable', rowSelector)
                .on('mouseover.treeTable', rowSelector, null, function(e) {
                    var element = $(this);
                    if(!element.hasClass('ui-state-highlight')) {
                        element.addClass('ui-state-hover');

                        if($this.isCheckboxSelection()) {
                            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').addClass('ui-state-hover');
                        }
                    }
                })
                .on('mouseout.treeTable', rowSelector, null, function(e) {
                    var element = $(this);
                    if(!element.hasClass('ui-state-highlight')) {
                        element.removeClass('ui-state-hover');

                        if($this.isCheckboxSelection()) {
                            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').removeClass('ui-state-hover');
                        }
                    }
                })
                .on('click.treeTable', rowSelector, null, function(e) {
                    // $this.onRowClick(e, $(this));  <-- commenting this out disables row selection
                    e.preventDefault();
                });

    if(this.isCheckboxSelection()) {
       var checkboxSelector = this.jqId + ' .ui-treetable-data tr.ui-treetable-selectable-node td:first-child div.ui-chkbox-box';
       $(document).off('click.treeTable', checkboxSelector)
                  .on('click.treeTable', checkboxSelector, null, function(e) {
                      var node = $(this).closest('tr.ui-treetable-selectable-node');
                      $this.toggleCheckboxNode(node);
                  });
    }
};

这将覆盖 TreeTable 的 bindEvents() 函数并在您单击该行时禁用选择。确保您覆盖了您正在使用的特定版本的 primefaces 的 javascript。